JavaScript 配列: 順序データを添字で扱う

JavaScript 配列は、順序を持つ整数インデックス付きの値コレクションを保存します。順序が重要なとき、つまりリスト、キュー、または位置に意味があるデータに使います。インデックスによるアクセスは配列サイズに関係なく即時 (O(1)) で、length が要素数を自動で追跡します。

データを作成して参照する JavaScript 配列の例

JavaScript エディター

const colors = ["赤", "緑", "青"];

console.log(colors[0]);      // 赤
console.log(colors.length);  // 3

colors.push("黄");
console.log(colors);

出力:

ここに出力が表示されます...

出力:

赤
3
[
  "赤",
  "緑",
  "青",
  "黄"
]

この例の仕組み

["赤", "緑", "青"] は、角括弧のリテラル構文で3要素の配列を作成します。初期値付きで JavaScript 配列を定義する標準的な方法です。
colors[0] は先頭要素を読み取ります。配列は 0 始まりのインデックスを使うため、0 が1番目、1 が2番目の要素です。
colors.length は要素数を返します。要素の追加や削除に応じて自動で更新されます。
colors.push("黄") は末尾に要素を追加します。元の配列がその場で変更されます。

JavaScript 配列とは？

JavaScript 配列は数値インデックス向けに最適化されたオブジェクトです。要素を追加・削除すると length は自動更新され、map、filter、reduce、forEach などの組み込みメソッドはインデックス順に反復します。typeof [] は "object" を返すため、配列判定には Array.isArray(value) を使います。

JavaScript 配列でよくある間違い

new Array(n) で単一要素の配列を作ろうとする。

悪い例:

const items = new Array(3); // 空スロットが3つで、[3] ではない

正しい例:

const items = [3]; // 数値 3 を1つ含む配列

数値を1つだけ渡すと要素は作られず、length が設定されて空スロットが作られます。

疎配列がすべて反復されると期待する。

悪い例:

const a = Array(3).map((_, i) => i); // [空 × 3]

正しい例:

const a = Array.from({ length: 3 }, (_, i) => i); // [0, 1, 2]

map は空スロットをスキップします。Array.from は要素を定義して作るため、各インデックスでコールバックが実行されます。

破壊的メソッドと非破壊的メソッド

元の配列を変更する	新しい配列を返す
`push`, `pop`, `splice`, `sort`, `reverse`	`map`, `filter`, `slice`, `concat`, `toSorted`

ES2023 では toReversed()、toSorted()、toSpliced()、with() が追加され、対応する破壊的メソッドの非破壊版として使えます。元の配列もソート結果も必要なら、sort() より toSorted() を優先してください。

パフォーマンスに関する考慮事項

push と pop は配列末尾で O(1) で動作します。shift と unshift は全要素のインデックスを詰め直すため O(n) です。ホットループでは、大きな配列に対する先頭操作を避けてください。

その他の例

配列の配列: ネストしたデータにアクセスする

const matrix = [[1, 2], [3, 4], [5, 6]];
console.log(matrix[1][0]); // 3

各要素がさらに配列です。配列の配列はグリッドを表現するシンプルな方法で、二重インデックス [row][col] で内側の値に到達できます。

push と pop を使ったスタック:

const stack = [10, 20, 30];
stack.push(40);
console.log(stack.at(-1)); // 40
stack.pop();
console.log(stack);        // [ 10, 20, 30 ]

push は末尾に追加し、pop は末尾から削除します。どちらも O(1) です。at(-1) を使えば、長さを知らなくても末尾要素を取得できます。

JavaScript 配列を使う場面

位置ベースのアクセスが重要な順序付きコレクション（リスト、キュー、スタック）。
伸縮するシーケンス。スタックは push/pop、キューは push/shift。
配列の配列として表現するグループ化データ（行、列、行列）。
キーと値の検索には配列を使わず、Map またはプレーンオブジェクトを使う。
全要素の一意性が必須なら配列を使わず、Set を使う。

FAQ

初期値付きの JavaScript 配列はどう作りますか？

角括弧記法を使います: const colors = ["赤", "緑", "青"]。これが推奨されるリテラル構文です。Array.of(1, 2, 3) も使えますが、new Array(n) との曖昧さを避ける必要がある多相的なコード以外ではほとんど必要ありません。

元の配列を変更する JavaScript 配列メソッドはどれですか？

push、pop、shift、unshift、splice、sort、reverse、fill は配列をその場で変更します。toSorted、toReversed、toSpliced（ES2023）などの新しい代替は、元の配列を変更せず新しい配列を返します。

値が JavaScript の配列かどうかはどう確認しますか？

Array.isArray(value) を呼びます。これは iframe や別 realm をまたいでも正しく動作します。instanceof Array は、配列が別の実行コンテキストで作られた場合に失敗します。