JavaScript配列（Array）の基本まとめ
配列とは？
配列（Array）は、**順序を持った「値のコレクション」**です。
複数の値をひとまとめにして管理できます。
配列の作成と値の特徴
どんな型の値でも混在して格納できます。
// 空の配列
let students = [];
// 文字列の配列
let colors = ['red', 'orange', 'yellow'];
// 型がバラバラでもOK
let mixed = [42, true, 'apple', null];
- 型は揃えなくてもよい（JavaScriptは動的型付け言語）
- 配列リテラル
[]で作るのが一般的
インデックスとlength
配列の各要素には、0から始まるインデックス番号が自動で割り振られます。
let colors = ['red', 'orange', 'yellow', 'green'];
console.log(colors.length); // 4
console.log(colors[0]); // 'red' ← 0番目
console.log(colors[2]); // 'yellow' ← 2番目
-
.lengthプロパティで要素数を取得できます
配列の要素の更新
配列は値の上書きや、新しいインデックスへの追加ができます。
let colors = ['red', 'orange', 'yellow', 'green'];
// 要素の上書き
colors[0] = 'blue';
console.log(colors[0]); // 'blue'
// 存在しないインデックスに代入すると「空要素」を挟んで追加される
colors[6] = 'purple';
console.log(colors);
// ['blue', 'orange', 'yellow', 'green', <2 empty items>, 'purple']
console.log(colors[4]); // undefined（未定義＝空）
⚠️ 空要素（empty）は実務ではバグの温床になるので注意！
よく使う配列メソッド
配列には便利なメソッドが多数あります。
| メソッド | 説明 | サンプル |
|---|---|---|
push() |
末尾に要素を追加 | colors.push('pink') |
pop() |
末尾の要素を削除 | colors.pop() |
shift() |
先頭の要素を削除 | colors.shift() |
unshift() |
先頭に要素を追加 | colors.unshift('black') |
concat() |
複数の配列を結合し、新しい配列を作成 | colors.concat(['white','gray']) |
indexOf() |
指定要素のインデックスを返す | colors.indexOf('yellow') |
includes() |
指定要素が存在するかどうか | colors.includes('green') |
reverse() |
配列を逆順に並び替える（元の配列が変わる） | colors.reverse() |
slice() |
部分配列を作って返す（元配列は変更されない） | colors.slice(1, 3) |
splice() |
要素の削除・置換（元の配列が変わる） | colors.splice(2, 1, 'gold') |
sort() |
要素を並び替える（元配列が変わる・注意！） | numbers.sort() |
💡 ポイント
-
reverse,splice,sortなどは元の配列自体を変更します。 -
slice,concatなどは新しい配列を返すだけで元配列は変わりません。
配列の等価性に注意
配列同士の比較は**「中身」ではなく「参照先」が比較**されます。
let arr1 = ['hi', 'bye'];
let arr2 = ['hi', 'bye'];
console.log(arr1 === arr2); // false
✅ 配列は「==」や「===」で中身が同じかは判定できません！
多次元配列（配列の中の配列）
配列の中に、さらに配列を入れることも可能です。
多次元配列として表やグリッド状のデータを管理できます。
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matrix[1][2]); // 6（2行目の3番目）
まとめ
- 配列は複数の値をまとめて管理できる便利な構造
- インデックスは0から始まる・型は自由
- 配列同士の比較は「参照」で判定される点に注意
- 多次元配列もよく使う