配列リテラルとは何か
配列リテラルは、角括弧 [] を使って値を並べる最短・安全な配列の作り方です。例として [1, 2, 3] は数値の配列、[“A”, true, { id: 1 }] は型が混在した配列になります。ここが重要です：JavaScript の配列はどんな型でも混ぜられ、長さは後から自由に伸び縮みします。new Array(…) よりも [] を使うほうが意図が明確で、予期せぬ挙動を避けられます。
基本構文とよく使う初期化パターン
からの配列と初期値ありの作成
const empty = []; // 空の配列
const nums = [10, 20, 30]; // 値を並べて初期化
const mixed = [1, "A", true]; // 型は混在してOK
console.log(nums.length); // 3（要素数）
ここが重要です：[] は“その場で並べた値だけ”を含む、予測可能な配列を作ります。length は配列の操作で最もよく使う基準です。
ネスト（配列の中に配列やオブジェクト）
const grid = [[1, 2], [3, 4]];
const users = [{ id: 1, name: "Taro" }, { id: 2, name: "Hanako" }];
console.log(grid[1][0]); // 3
console.log(users[0].name); // "Taro"
ここが重要です：リテラルは複雑な構造も直感的に書けます。二重のインデックスやドット記法で、すぐに値へアクセスできます。
配列の“穴”と末尾カンマ（落とし穴を理解する）
空要素（疎な配列）を意図せず作らない
const a = [1, , 3]; // 2番目が“穴”になる（undefined とは異なる）
console.log(a.length); // 3
console.log(a[1]); // undefinedだが、メソッドでの挙動が変わることがある
ここが重要です：“穴”は map や forEach でスキップされるなど一貫しない挙動を招きます。明示的に undefined を入れるか、穴を作らない配列リテラルを書きましょう。
末尾カンマは可（可読性向上）
const list = [
"apple",
"banana",
"cherry", // 末尾カンマはOK（差分が見やすい）
];
ここが重要です：末尾カンマは構文上問題なく、行追加や差分管理が楽になります。ただし“穴”を作る中間の連続カンマには注意してください。
new Array(…) との違い（[] を選ぶ理由）
意図しない“長さだけの配列”を避ける
const a = new Array(3); // 長さ3の空配列（穴だらけ）
const b = [undefined, undefined, undefined]; // 明示的な値を持つ配列
console.log(a.length, b.length); // 3, 3
ここが重要です：new Array(n) は“疎な配列”を作り、map などが期待通り動きません。値を入れて初期化したいなら [] と繰り返し処理、または Array.from({length:n}, () => 初期値) を使うのが安全です。
値を渡す new Array は結局 []
const c = new Array(1, 2, 3); // [1,2,3] と同義だが冗長
const d = [1, 2, 3]; // 推奨
ここが重要です：読みやすさ・一貫性のため、配列は配列リテラルで書くのがベストです。
配列リテラルの応用（スプレッド・分割代入・初期化）
スプレッドでコピー・結合・挿入
const base = [1, 2, 3];
const copy = [...base]; // 浅いコピー
const merged = [...base, 4, 5]; // 末尾へ結合
const inserted = [0, ...base, 6]; // 間に挿入
ここが重要です：スプレッド構文は“元を壊さず新配列を作る”ため、意図が明確で安全です。浅いコピーなので、ネストオブジェクトは共有される点に注意しましょう。
分割代入で取り出し・スキップ・残りをまとめる
const colors = ["red", "green", "blue"];
const [first, , third] = colors; // 2番目をスキップ
const [head, ...rest] = colors; // 残りをまとめて配列に
ここが重要です：分割代入は“名前を付けて取り出す”のに最適。スキップや残りの集約が一行で書け、読みやすくなります。
初期値を合わせて安全に取り出す
const [x = 0, y = 0] = []; // x=0, y=0（不足時のデフォルト）
ここが重要です：不足や undefined に対するデフォルトをリテラル側で決めると、後続の計算や表示が安定します。
JSON と配列リテラルの違い（構文と用途の整理）
JSON は“データ表現”、配列リテラルは“コード”
// 配列リテラル（コメント・関数・undefined も書ける）
const a = [1, undefined, () => 42]; // OK
// JSON 配列（strict。コメントや関数は不可、undefined も不可）
const json = "[1, null]"; // 文字列としてのJSON
ここが重要です：JSON は厳格で、コメント・関数・undefined が使えません。APIとのやり取りは JSON、コード内の構造定義は配列リテラル――と使い分けましょう。
実践例（初期データ定義・テーブル処理・選択肢生成）
選択肢の元データを配列リテラルで定義
const PREFS = ["東京都", "大阪府", "北海道"];
const options = PREFS.map(p => new Option(p, p));
ここが重要です：人が読んで変更する“定数リスト”は配列リテラルが最適です。map で UI に展開すれば、重複や誤綴りの混入も減らせます。
テーブル行を配列→DOMへ
const rows = [
["品名", "価格"],
["ペン", "120"],
["ノート", "300"],
];
const html = rows.map(r => `<tr>${r.map(c => `<td>${c}</td>`).join("")}</tr>`).join("");
document.querySelector("tbody").innerHTML = html;
ここが重要です：二次元配列は表の表現に直感的。map を二段重ねで“行→セル”へ展開できます。
ルーティングや権限などの設定配列
const ROUTES = [
{ path: "/home", auth: false },
{ path: "/admin", auth: true },
];
ここが重要です：設定は“オブジェクト配列”で宣言すると、検索（find）、抽出（filter）、変換（map）が簡単で保守性が高いです。
まとめ
配列リテラルは、[] に値を並べるだけで予測可能な配列を作れる最短・安全な手段です。疎な配列（穴）を避け、末尾カンマを活用し、new Array(…) より常に [] を選ぶと挙動が安定します。スプレッドで非破壊のコピー・結合、分割代入で取り出しとデフォルト設定を行い、現実的なデータはオブジェクト配列で表現するのが定石です。JSONとの違いを理解し、初期データ・表・設定などに配列リテラルを使えば、初心者でも読みやすく拡張しやすいコードが書けます。