こんにちは、かつコーチです。
前回は for ・ while ・ forEach を使った繰り返し処理を解説しました。
繰り返し処理とセットでよく登場するのが「配列」です。
今回は、JavaScriptで複数のデータをまとめて扱うための「配列」について、作成方法から追加・削除まで基本を丁寧に解説していきます。
配列とは？
複数のデータをひとまとめにする箱
配列（Array） とは、複数の値を1つの変数にまとめて入れておける入れ物のことです。
たとえば、果物の名前を3つ扱いたいとき、変数を3つ用意する方法もあります。
const fruit1 = "りんご";
const fruit2 = "みかん";
const fruit3 = "ぶどう";
これでも動きはしますが、果物が10種類、100種類に増えたらどうでしょうか。
変数を100個用意するのは現実的ではありません。
こういうときに配列を使うと、まとめて1つの変数で管理できます。
const fruits = ["りんご", "みかん", "ぶどう"];
なぜ配列が必要なのか
配列を使う一番のメリットは、「複数のデータをまとめて繰り返し処理できる」 ことです。
前回学んだ for や forEach は、まさに配列と組み合わせて使うことを前提とした構文です。
const fruits = ["りんご", "みかん", "ぶどう"];
fruits.forEach((fruit) => {
console.log(fruit);
});
// りんご
// みかん
// ぶどう
配列と繰り返し処理はセットで覚えると、一気にできることが広がります。
配列を作る・要素にアクセスする
配列リテラルでの作成
配列を作る一番シンプルな方法は、[ ]（角括弧）で値を囲む書き方です。
これを「配列リテラル」と呼びます。
const numbers = [10, 20, 30];
const names = ["田中", "佐藤", "鈴木"];
const mixed = ["文字列", 100, true]; // 型を混ぜることもできる
配列の中身は文字列や数値だけでなく、真偽値やオブジェクト、別の配列を入れることも可能です。
インデックスでアクセスする
配列の中の値には、それぞれ番号（インデックス）が振られています。
重要なポイントは、インデックスは0から始まる ということです。
const fruits = ["りんご", "みかん", "ぶどう"];
console.log(fruits[0]); // りんご（1番目ではなく0番目）
console.log(fruits[1]); // みかん
console.log(fruits[2]); // ぶどう
console.log(fruits.length); // 3（配列の要素数）
私が初めて配列を触ったとき、fruits[1] で「りんご」が取れると思い込んでいて、実際には「みかん」が返ってきて混乱した経験があります。
「1番目」という日本語の感覚と「インデックス1」がズレるのは、初心者が必ずと言っていいほど通る落とし穴なので、最初にしっかり意識しておきましょう。
要素を追加・削除する
push・unshiftで追加する
配列に新しい要素を追加するには、主に2つのメソッドを使います。
push()：配列の末尾 に要素を追加するunshift()：配列の先頭 に要素を追加する
const fruits = ["りんご", "みかん"];
fruits.push("ぶどう");
console.log(fruits); // ["りんご", "みかん", "ぶどう"]
fruits.unshift("いちご");
console.log(fruits); // ["いちご", "りんご", "みかん", "ぶどう"]
現場で使う頻度が高いのは圧倒的に push() です。
「リストの一番後ろに追加する」という処理は、フォームの入力値をためたり、APIから受け取ったデータを配列に足したりする場面で頻繁に登場します。
pop・shiftで削除する
要素を削除するメソッドも、追加と対になる形で用意されています。
pop()：配列の末尾 の要素を削除するshift()：配列の先頭 の要素を削除する
const fruits = ["いちご", "りんご", "みかん", "ぶどう"];
fruits.pop();
console.log(fruits); // ["いちご", "りんご", "みかん"]
fruits.shift();
console.log(fruits); // ["りんご", "みかん"]
どちらのメソッドも、削除した要素を戻り値として返してくれる点も覚えておくと便利です。
const fruits = ["りんご", "みかん", "ぶどう"];
const removed = fruits.pop();
console.log(removed); // ぶどう（削除された値）
console.log(fruits); // ["りんご", "みかん"]
つまずきやすいポイント：途中の要素を削除したいとき
配列のインデックスを直接いじって失敗した話
push や pop は端の要素にしか使えません。
「真ん中の要素だけ削除したい」というとき、私は最初 delete を使って失敗した経験があります。
❌ Before：delete で配列の要素を消す
const fruits = ["りんご", "みかん", "ぶどう"];
delete fruits[1];
console.log(fruits); // ["りんご", empty, "ぶどう"]
console.log(fruits.length); // 3（要素数が減らない！）
delete を使うと、その位置の値は消えるものの 配列の長さ（length）は変わらず、空の穴（empty）が残ってしまいます。
forEach でループを回したときに undefined が混ざったり、fruits.length を使った処理がズレたりして、原因を探すのに時間がかかった苦い記憶があります。
✅ After：splice() で要素そのものを取り除く
const fruits = ["りんご", "みかん", "ぶどう"];
// 第1引数：開始位置、第2引数：削除する数
fruits.splice(1, 1);
console.log(fruits); // ["りんご", "ぶどう"]
console.log(fruits.length); // 2（正しく詰められている）
splice() を使えば、途中の要素を「本当に取り除いて、後ろの要素を前に詰める」ことができます。
「途中の要素を消したいときは splice()」と覚えておけば、この落とし穴には二度とハマりません。
応用：配列を安全にコピーする
スプレッド構文で元の配列を壊さずに操作する
配列はオブジェクトの一種なので、そのまま代入すると 同じ配列を参照してしまう という性質があります。
const original = ["りんご", "みかん"];
const copy = original; // コピーではなく同じ配列を参照している
copy.push("ぶどう");
console.log(original); // ["りんご", "みかん", "ぶどう"]（元の配列まで変わってしまう）
意図せず元のデータまで変更してしまうと、思わぬバグにつながります。
こういうときは、スプレッド構文（...） を使って新しい配列を作るのが安全です。
const original = ["りんご", "みかん"];
const copy = [...original]; // 中身をコピーした新しい配列を作る
copy.push("ぶどう");
console.log(original); // ["りんご", "みかん"]（元の配列は変わらない）
console.log(copy); // ["りんご", "みかん", "ぶどう"]
「元のデータは変えず、新しい配列として扱いたい」という場面は実務で非常によく出てくるので、ここでセットで覚えておきましょう。
まとめ
この記事のポイント
- 配列は複数のデータをまとめて扱うための入れ物で、
[ ]で作成する - インデックスは0から始まるため、「1番目＝インデックス0」を意識する
- 末尾への追加・削除は
push()/pop()、先頭はunshift()/shift()を使う - 途中の要素を削除するときは
deleteではなくsplice()を使う - 配列を安全にコピーしたいときはスプレッド構文（
...）を使う
次に読むべき記事
配列の基本操作ができるようになったら、次は配列をさらに便利に扱える map ・ filter ・ reduce を見ていきましょう。
→ 次の記事：配列メソッドmap・filter・reduceの使い方