メインコンテンツまでスキップ

配列

順序付けられた要素のコレクションです。

配列の作成とアクセス​

// 配列の作成
const numbers = [1, 2, 3, 4, 5];

// 要素へのアクセス（インデックスは 0 から始まる）
console.log(numbers[0]); // 1
console.log(numbers[2]); // 3

// 配列の長さ
console.log(numbers.length); // 5

末尾の要素へのアクセス​

const numbers = [1, 2, 3, 4, 5];

// 従来: length を使う
console.log(numbers[numbers.length - 1]); // 5

// Array.at() (ES2022): 負のインデックスで末尾から数えられる
console.log(numbers.at(-1)); // 5 (最後の要素)
console.log(numbers.at(-2)); // 4 (後ろから 2 番目)

配列の操作​

const numbers = [1, 2, 3, 4, 5];

// 末尾に要素を追加 / 削除
numbers.push(6);        // [1, 2, 3, 4, 5, 6]
numbers.pop();          // [1, 2, 3, 4, 5] (6 を取り出す)

// 先頭に要素を追加 / 削除
numbers.unshift(0);     // [0, 1, 2, 3, 4, 5]
numbers.shift();        // [1, 2, 3, 4, 5] (0 を取り出す)

// 部分配列の取得 (元の配列は変更しない)
console.log(numbers.slice(1, 4)); // [2, 3, 4]

// 配列の結合
console.log(numbers.concat([6, 7])); // [1, 2, 3, 4, 5, 6, 7]

// 配列の要素を文字列に変換
console.log(numbers.join(", ")); // 1, 2, 3, 4, 5
破壊的メソッドと非破壊的メソッド

push / pop / shift / unshift / splice / sort は 元の配列を直接変更 します（破壊的）。一方 slice / concat / map / filter は 元の配列を変えずに新しい配列を返します（非破壊的）。元のデータを保ちたいときは非破壊的メソッドを選びましょう。

要素の存在確認​

const fruits = ["りんご", "バナナ", "オレンジ"];

// includes: 含まれているかを true / false で返す (可読性が高い)
console.log(fruits.includes("バナナ")); // true

// indexOf: 位置を返す。存在しなければ -1
console.log(fruits.indexOf("バナナ")); // 1
console.log(fruits.indexOf("ぶどう")); // -1
includes と indexOf の使い分け

「含まれているか」を知りたいだけなら includes() の方が意図が明確です。indexOf() は位置が必要なときに使います。なお indexOf(NaN) は常に -1 を返す（NaN を見つけられない）のに対し、includes(NaN) は正しく判定できる、という違いもあります。

配列の高階関数​

関数を引数に取るメソッドで、ループ処理を簡潔に書けます。

const data = [1, 2, 3, 4, 5];

// map: 各要素に関数を適用して新しい配列を作成
console.log(data.map(item => item * 2)); // [2, 4, 6, 8, 10]

// filter: 条件に一致する要素のみの新しい配列を作成
console.log(data.filter(item => item % 2 === 0)); // [2, 4]

// reduce: 配列の要素を累積して単一の値にする
console.log(data.reduce((acc, curr) => acc + curr, 0)); // 15

// forEach: 各要素に対して関数を実行 (戻り値なし)
data.forEach(item => console.log(`Item: ${item}`));

// find: 条件に合った最初の「要素」を返す
console.log(data.find(item => item > 3)); // 4

// findIndex: 条件に合った最初の要素の「位置」を返す
console.log(data.findIndex(item => item > 3)); // 3

// some: 少なくとも 1 つが条件を満たすか
console.log(data.some(item => item > 4)); // true

// every: すべてが条件を満たすか
console.log(data.every(item => item > 0)); // true
初級者向け解説

高階関数を使うと、ループ処理を宣言的に書けます。特に map（変換）・filter（絞り込み）・reduce（集計）はデータ処理の基本です。これらは非破壊的なので、元の配列はそのまま残ります。

配列の分割代入（ES6）​

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first);  // 1
console.log(second); // 2
console.log(rest);   // [3, 4, 5]

次に読む​

  • DOM 操作 — 配列やオブジェクトの知識を使って HTML を操作する