JavaScriptにおける配列の初期化は、一見すると非常に単純な作業に思えるかもしれません。

しかし、現代のWebアプリケーション開発において、データ構造の基盤となる配列をどのように生成し、初期値を割り当てるかは、プログラムの可読性やメンテナンス性、さらには実行パフォーマンスにまで大きな影響を及ぼします。

2026年現在のJavaScriptエコシステムでは、ECMAScriptの進化に伴い、より宣言的で直感的な初期化手法が定着しています。

以前から使われてきた手法のメリット・デメリットを整理しつつ、最新のベストプラクティスに基づいたモダンな書き方を整理していくことが、効率的なコーディングへの第一歩となります。

本記事では、単純な空配列の作成から、特定のルールに基づいた値の生成、多次元配列の初期化、そして大規模データを扱う際のパフォーマンス最適化までを詳しく解説します。

目次 [ close ]
  1. 配列初期化の基本手法
    1. 配列リテラルによる初期化
    2. Arrayコンストラクタによる初期化
  2. 特定のサイズと値で埋めるモダンな手法
    1. Array.fill() を活用した初期化
    2. Array.from() による柔軟な初期化
  3. 多次元配列（2次元配列）の初期化
    1. 正しい2次元配列の作成
  4. パフォーマンスを考慮した使い分け
    1. 事前確保（Pre-allocation）の有効性
    2. TypedArray による数値データの最適化
  5. スプレッド構文による初期化と結合
  6. 2026年における最新のトレンド
  7. まとめ

配列初期化の基本手法

JavaScriptで配列を作成する最も一般的、かつ推奨される方法は配列リテラルを用いた初期化です。

しかし、用途によってはコンストラクタを利用したほうが適切な場面も存在します。

配列リテラルによる初期化

配列リテラル [] を使用する方法は、最もシンプルで直感的です。

コードの記述量が少なく、エンジンの最適化も効きやすいため、基本的にはリテラル記法を第一選択とすべきです。

JavaScript
// 空の配列を初期化
const emptyArray = [];

// 初期値を持つ配列を初期化
const fruits = ['apple', 'banana', 'cherry'];

console.log(fruits);
実行結果
["apple", "banana", "cherry"]

リテラル記法は、要素が事前にわかっている場合や、空の状態から順次要素を追加していく場合に最適です。

Arrayコンストラクタによる初期化

new Array() を使用するコンストラクタ記法は、主に「要素数は決まっているが、中身は後で決めたい」という場合に利用されます。

ただし、引数の数によって挙動が変わるという特異な性質があるため注意が必要です。

JavaScript
// 要素数5の空枠を持つ配列を作成
const limitedArray = new Array(5);

// 引数が複数の場合はその要素を持つ配列になる
const multiArgsArray = new Array(10, 20, 30);

console.log(limitedArray.length);
console.log(multiArgsArray);
実行結果
5
[10, 20, 30]

new Array(5) で作成された配列は、「穴」が開いた状態の「疎な配列 (Sparse Array)」となります。

この状態では map() や forEach() などの反復メソッドがスキップされてしまうため、そのままでは扱いにくいという側面があります。

特定のサイズと値で埋めるモダンな手法

特定の長さの配列を作成し、すべての要素を初期値で埋めたい場合には、Array.fill() や Array.from() を活用するのがモダンなアプローチです。

Array.fill() を活用した初期化

Array(n).fill(value) という形式は、固定値で配列を埋める際に非常に強力です。

JavaScript
// 長さ5の配列をすべて 0 で埋める
const zeroFilled = new Array(5).fill(0);

console.log(zeroFilled);
実行結果
[0, 0, 0, 0, 0]

ここで最も注意しなければならないのが、「参照型（オブジェクトや配列）を fill に渡した場合」の挙動です。

JavaScript
// 失敗例：すべての要素が「同じオブジェクト」を参照してしまう
const objectArray = new Array(3).fill({ name: 'Guest' });

objectArray[0].name = 'Alice';

// すべての要素の name が Alice に変わってしまう
console.log(objectArray);
実行結果
[{"name":"Alice"}, {"name":"Alice"}, {"name":"Alice"}]

このように、すべての要素がメモリ上の同一オブジェクトを指してしまうため、独立したオブジェクトを持つ配列を作りたい場合には fill() は適していません。

Array.from() による柔軟な初期化

独立したインスタンスを持つ配列を作成したり、インデックスに基づいた値を生成したりする場合は、Array.from() が最適です。

第二引数にマッピング関数を渡すことで、初期化と同時に値を加工できます。

JavaScript
// 0から4までの連番を作成
const rangeArray = Array.from({ length: 5 }, (_, index) => index);

// 独立したオブジェクトを持つ配列を作成
const dynamicObjectArray = Array.from({ length: 3 }, () => ({ name: 'Guest' }));

dynamicObjectArray[0].name = 'Alice';

console.log(rangeArray);
console.log(dynamicObjectArray);
実行結果
[0, 1, 2, 3, 4]
[{"name":"Alice"}, {"name":"Guest"}, {"name":"Guest"}]

Array.from() は、第1引数に { length: n } というオブジェクトを渡すことで、指定した長さの反復可能なオブジェクトとして扱えます。

オブジェクトの初期化において「参照の共有」を避けたい場合は、必ずこの手法を選択してください。

多次元配列（2次元配列）の初期化

JavaScriptには多次元配列という専用の型は存在せず、配列の中に配列を入れる「配列の配列」として表現します。

この初期化においても、前述の fill() の罠に気をつける必要があります。

正しい2次元配列の作成

例えば、3×3の行列（すべて0で初期化）を作成する場合、以下のような書き方が推奨されます。

JavaScript
// 良い例：Array.from を入れ子にする
const matrix = Array.from({ length: 3 }, () => Array(3).fill(0));

matrix[0][0] = 1;

console.log(matrix);
実行結果
[[1, 0, 0], [0, 0, 0], [0, 0, 0]]

もしここで new Array(3).fill(new Array(3).fill(0)) と書いてしまうと、3つの行がすべて同じ配列オブジェクトを参照してしまい、一つの値を書き換えると全行が書き換わるというバグを引き起こします。

多次元配列の初期化は、外側のループで新しい配列インスタンスを生成することが鉄則です。

パフォーマンスを考慮した使い分け

配列の初期化方法は、扱うデータの規模によってパフォーマンス面での検討が必要になります。

特に、数万、数百万といった大規模なデータを扱う場合、エンジンの内部動作を意識することが重要です。

事前確保（Pre-allocation）の有効性

JavaScriptのエンジン（V8など）は、配列のサイズが動的に変わるたびにメモリの再確保を行うことがあります。

最初から必要な要素数が分かっている場合、new Array(size) で領域を確保しておくことで、再確保のコストを抑えられる場合があります。

手法パフォーマンス特性適したユースケース
[] (リテラル)極めて高速小規模〜中規模、要素が固定、または追加が少ない場合
new Array(n)メモリ確保に有利要素数が非常に大きく、事前に確定している場合
Array.from()やや低速（関数呼び出しコスト）複雑な初期値計算が必要な場合や参照を分けたい場合

ただし、現代のブラウザエンジンは非常に高度に最適化されているため、数千件程度のデータであればリテラル記法や Array.from() で十分な速度が得られます。

パフォーマンスチューニングは、実際の計測結果に基づいて行うようにしましょう。

TypedArray による数値データの最適化

画像処理、音声解析、WebGL、大規模な計算処理などで数値のみを扱う場合は、通常の Array ではなく Int32Array や Float64Array などの TypedArray（型付き配列） の使用を検討してください。

JavaScript
// 32ビット整数の配列を100万要素分確保
const hugeData = new Int32Array(1000000);

// すべて 0 で初期化されている
console.log(hugeData.length);
console.log(hugeData[0]);
実行結果
1000000
0

TypedArrayはメモリ上に連続した領域を確保するため、通常の配列よりもメモリ効率が良く、アクセス速度も非常に高速です。

大量の数値を扱うアプリケーションでは、通常の配列初期化とは一線を画す最適化手法となります。

スプレッド構文による初期化と結合

既存の配列を元に新しい配列を初期化する場合、ES6以降で導入されたスプレッド構文 ... が非常に便利です。

JavaScript
const base = [1, 2, 3];
// 既存の配列を展開して新しい配列を作成
const extended = [...base, 4, 5, 6];

console.log(extended);
実行結果
[1, 2, 3, 4, 5, 6]

スプレッド構文を用いると、元の配列を変更せずに（イミュータブルに）新しい配列を作成できるため、Reactなどの宣言的なUIフレームワークとの相性が抜群です。

また、new Array(n) で作成した疎な配列を [...Array(n)] とすることで、中身が undefined で埋まった密な配列に変換するといったテクニックもよく使われます。

2026年における最新のトレンド

2026年のJavaScript開発現場では、「イミュータブル（不変）」な操作がより一般的になっています。

toSpliced() や toSorted() といった、元の配列を破壊せずに新しい配列を返すメソッドを組み合わせて、初期化直後にフィルタリングやソートを行うパイプラインのような記述が増えています。

また、大規模なデータセットを初期化する際には、メインスレッドをブロックしないよう Worker スレッド側で初期化処理を行い、Transferable Objects を使ってメインスレッドに転送する手法も、Webアプリケーションの快適性を維持するために重要視されています。

まとめ

JavaScriptにおける配列の初期化は、単に箱を作る作業ではなく、その後のデータの扱いやすさやパフォーマンスを決定づける重要な工程です。

  • 基本は配列リテラル [] を使用する。
  • 固定値で埋める場合は Array.fill() を使うが、参照型の共有に注意する。
  • ロジックに基づいた初期化や、独立したオブジェクトを持つ配列を作る場合は Array.from() が最適。
  • 多次元配列は Array.from() を入れ子にして、各行に独立したインスタンスを生成する。
  • 大規模な数値データには TypedArray を検討し、メモリ効率を高める。

これらの手法を適切に使い分けることで、バグの少ない、そして実行効率の高い優れたコードを記述できるようになります。

プロジェクトの要件やデータの特性に合わせて、最適な初期化方法を選択してください。