配列の初期化とは何か
配列の初期化は「配列を作って、最初の中身（要素）や長さを決める」ことです。ここが重要です：JavaScript では複数の初期化方法がありますが、意図と挙動が微妙に違います。最も安全で予測可能なのは配列リテラル []。一方、new Array、Array.from、Array.of、fill は“正しく使えば便利、誤ると落とし穴”です。
基本の初期化（配列リテラル）
値を並べて初期化する
const empty = []; // 空の配列
const nums = [10, 20, 30]; // 数値の配列
const mixed = [1, "A", true]; // 型が混在してもOK
ポイント: 配列リテラルは「書いたその値だけ」が入り、意図が明快で安全です。要素数は length で確認できます。
無限に伸び縮みできる前提を持つ
const a = [1];
a.push(2); // [1,2]（末尾に追加）
a.splice(0, 0, 0); // [0,1,2]（先頭へ挿入）
ポイント: 初期化後も配列は変更可能です。必要に応じて追加・削除・並び替えができます。
Array コンストラクタの注意点
“長さだけ”の配列を作る new Array(n)
const a = new Array(3);
console.log(a.length); // 3
console.log(a); // [ <3 empty items> ]（穴だらけ）
ここが重要: new Array(3) は“疎な配列（穴）”を作ります。map や forEach が穴をスキップするなど、一貫しない挙動で初心者が混乱しがち。中身を埋めたいなら Array.from や fill と組み合わせましょう。
値を並べた new Array は結局 []
const b = new Array(1, 2, 3); // 実質 [1,2,3]
const c = [1, 2, 3]; // こちらのほうが読みやすい
ポイント: 値があるなら配列リテラルを使うほうが簡潔で明確です。
Array.from と Array.of の使いどころ
Array.of（値をそのまま配列に）
const a = Array.of(1); // [1]
const b = Array.of(1, 2); // [1,2]
ここが重要: Array.of(3) は [3] を作ります。new Array(3) が“長さ3の穴配列”になるのと違い、誤解がありません。
Array.from（長さと初期化関数で埋める）
const n = 5;
// 0,1,2,3,4 の連番
const seq = Array.from({ length: n }, (_, i) => i);
// すべて 0 の配列
const zeros = Array.from({ length: n }, () => 0);
// インデックスを使って計算初期化
const squares = Array.from({ length: n }, (_, i) => i * i);
ここが重要: Array.from({ length: n }, mapFn) は「穴がない、完全に埋まった配列」を作る最強の初期化パターン。インデックスを使った計算や、オブジェクト生成に向いています。
fill の正しい使い方（落とし穴含む）
一括で同じ値を入れる
const n = 4;
const ones = new Array(n).fill(1); // [1,1,1,1]
ポイント: fill は“穴”を実際の値で埋めます。new Array(n).fill(v) は「長さ n の v 埋め配列」を作る定番。
参照型を fill すると全要素が“同じオブジェクト参照”になる
const rows = new Array(3).fill([]); // 各要素が同じ配列参照
rows[0].push(1);
console.log(rows); // [[1],[1],[1]]（意図せず全行が変わる）
ここが重要: 参照型（配列・オブジェクト）を fill するのは危険。要素ごとに“別インスタンス”を作るなら Array.from を使い、生成関数で新規作成してください。
const safeRows = Array.from({ length: 3 }, () => []);
safeRows[0].push(1);
console.log(safeRows); // [[1],[],[]]（期待通り）
多次元配列の初期化（行列・グリッド）
行×列を 0 で埋める安全な方法
const rows = 3, cols = 4;
const matrix = Array.from({ length: rows }, () =>
Array.from({ length: cols }, () => 0)
);
ここが重要: Array(rows).fill(Array(cols).fill(0)) は“同じ行配列参照”を共有してしまいます。必ず行ごと・列ごとに新しい配列を作る初期化関数を使ってください。
連番や座標で初期化する
const grid = Array.from({ length: 3 }, (_, r) =>
Array.from({ length: 3 }, (_, c) => r * 3 + c) // 0..8
);
ポイント: インデックス (r, c) を使うと、規則的な初期値が簡潔に書けます。
実用的な初期化レシピ
範囲配列（start..end）
function range(start, end, step = 1) {
const len = Math.max(0, Math.ceil((end - start) / step));
return Array.from({ length: len }, (_, i) => start + i * step);
}
const r = range(5, 10); // [5,6,7,8,9]
const r2 = range(10, 5, -2);// [10,8,6]
ここが重要: Array.from で“長さを先に決める”と、正負どちらのステップにも対応できます。
固定長の初期オブジェクト配列
const users = Array.from({ length: 3 }, (_, i) => ({ id: i + 1, name: "" }));
ポイント: 参照型は“要素ごとに新規作成”。fill({}) の罠を避けられます。
既存配列から別の形へ初期化（変換）
const input = ["10", "20", "30"];
const nums = Array.from(input, s => Number(s)); // [10,20,30]
ここが重要: Array.from(iterable, mapFn) は“取り込みと同時変換”ができ、初期化と変換を一行でまとめられます。
よくある落とし穴と回避策
“穴”のある配列を作ってしまう
new Array(n) は穴だらけ。map が動かないなどの違和感につながります。最初から Array.from({ length: n }, () => 初期値) で“完全配列”を作るのが安全です。
fill に参照型を渡して全要素が連動する
fill([]) や fill({}) は全要素が同じ参照を共有します。要素ごとに独立させるなら初期化関数（Array.from(..., () => 新規作成)）で作ってください。
多次元を fill で作って一括崩壊
Array(rows).fill(Array(cols).fill(0)) は、1行を変えると全行が変わる典型的事故。行・列をそれぞれ Array.from で新規作成する二段構えが正解です。
new Array と Array.of の混同
Array.of(3) は [3]、new Array(3) は穴配列。数値1つで“値を要素にしたい”なら Array.of を使いましょう。
まとめ
配列初期化の安全な第一選択は配列リテラル []。長さと規則で埋めたいなら Array.from({ length: n }, mapFn)、単一値から確実に配列を作るなら Array.of。同値埋めは fill が便利ですが、参照型は“全要素が同じインスタンス”になるため厳禁。多次元は Array.from を二段重ねて“行・列をそれぞれ新規生成”。この基本を徹底すれば、意図通りの初期化ができ、穴や参照共有のバグを根絶できます。