スプレッド構文は「配列をバラして並べ直すための魔法」
[...a, ...b]
スプレッド構文 ... は、配列操作の中でも最も直感的で、最も強力な書き方です。 天才プログラマーとして断言すると、配列コピーと配列結合はスプレッドを使うのが最も読みやすく、最も安全です。
初心者がつまずきやすいポイントを、例題を交えながら徹底的にかみ砕いて説明します。
配列コピーとしてのスプレッド
スプレッド構文は、配列を丸ごとコピーする最も簡単な方法です。
const a = [1, 2, 3];
const copy = [...a];
console.log(copy); // [1, 2, 3]
深掘り：なぜコピーになるのか
...a は「a の中身をバラして並べる」という意味です。 つまり、
[...a]は「a の中身を並べた新しい配列」copyを変更してもaは変わらない（別物だから）
copy.push(4);
console.log(copy); // [1, 2, 3, 4]
console.log(a); // [1, 2, 3]
元の配列を壊さないコピーができるのが最大のメリットです。
配列結合としてのスプレッド
スプレッド構文は、配列同士を自然な形で結合できます。
const a = [1, 2];
const b = [3, 4];
const r = [...a, ...b];
console.log(r); // [1, 2, 3, 4]
深掘り：concat より読みやすい理由
a.concat(b) と同じ意味ですが、スプレッドの方が
- 配列の中身がそのまま見える
- 値を途中に挟める
- 直感的で読みやすい
というメリットがあります。
値を混ぜながら結合する（スプレッドの真価）
スプレッド構文は、配列の中身と単体の値を自由に混ぜられるのが強みです。
const a = [1, 2];
const b = [4, 5];
const r = [0, ...a, 3, ...b, 6];
console.log(r); // [0, 1, 2, 3, 4, 5, 6]
このように、
- 先頭に値を置く
- 配列を展開する
- また値を置く
- また配列を展開する
という柔軟な構造が簡単に書けます。
concat では絶対にここまで自然に書けません。
浅いコピーであることを深掘りする（重要）
スプレッドによるコピーは「浅いコピー」です。 つまり、中身がオブジェクトの場合は参照が共有されるということです。
const a = [{ id: 1 }, { id: 2 }];
const copy = [...a];
copy[0].id = 999;
console.log(a[0].id); // 999
なぜこうなるのか
[...a]は「配列そのもの」をコピーする- しかし「中のオブジェクト」はコピーされず、同じものが入る
初心者はここでよく混乱します。 スプレッドは“配列の入れ物”だけコピーすると覚えておくと安全です。
例題：複数の配列をまとめて結合する
スプレッドは、複数の配列を一気に結合するのにも向いています。
const a = [1];
const b = [2, 3];
const c = [4, 5];
const r = [...a, ...b, ...c];
console.log(r); // [1, 2, 3, 4, 5]
深掘り：順番がそのまま反映される
スプレッドは「書いた順番に展開される」ため、 結合の意図がコードからそのまま読み取れます。
concat とスプレッドの違いを整理する
どちらも配列結合ができますが、目的が少し違います。
concat
- 配列を結合するためのメソッド
- 値を途中に挟むのはやや面倒
スプレッド
- 配列の中身を展開して並べる記法
- 値を混ぜながら結合できる
- コピーもできる
天才講師としての結論は、 「柔軟に書きたいならスプレッド、単純結合なら concat」 です。
まとめ：スプレッドは配列操作の“現代標準”
スプレッド構文を使いこなせると、配列操作が劇的に読みやすくなります。
[...a]→ 配列コピー[...a, ...b]→ 配列結合- 値を混ぜながら結合できる
- 浅いコピーであることを理解して使う
「この配列をコピーしたい」「この配列とこの配列を自然に結合したい」 そう感じた瞬間に、[...] の中で ... を使えるようになることが、 JavaScript 初心者から一段上のレベルへ進む大きなステップです。