JavaScriptスプレッド構文で配列コピー／結合
配列を「そのままコピーしたい」「複数の配列をつなげたい」ときに便利なのが スプレッド構文（…）。初心者でも直感的に書けて、concatよりも短く表現できるのが魅力です。
構文と考え方
// コピー
const copy = [...arr];
// 結合
const merged = [...arr1, ...arr2];
...（スプレッド）: 配列の中身を「展開」する記号。- 返り値: 新しい配列。元の配列は変更されない。
- 特徴: 短く書ける、可読性が高い、コピーや結合に最適。
すぐ使えるテンプレート集
配列コピー（基本）
const arr = [1, 2, 3];
const copy = [...arr];
console.log(copy); // [1, 2, 3]
console.log(arr === copy); // false（別の配列）
- ポイント: 元配列とは別物になるので安全。浅いコピー（ネストはそのまま参照）。
2つの配列を結合
const a = [1, 2];
const b = [3, 4];
const merged = [...a, ...b];
console.log(merged); // [1, 2, 3, 4]
- ポイント: concatと同じ結果。短く書ける。
複数配列＋値を結合
const a = [1];
const b = [2, 3];
const c = [4, 5];
const merged = [...a, ...b, 99, ...c];
console.log(merged); // [1, 2, 3, 99, 4, 5]
- ポイント: 値も混ぜて展開できる。柔軟に結合可能。
ネスト配列は展開されない（浅いコピー）
const arr = [[1, 2], [3, 4]];
const copy = [...arr];
console.log(copy); // [[1, 2], [3, 4]]
console.log(arr[0] === copy[0]); // true（中の配列は同じ参照）
- ポイント: スプレッドは浅いコピー。中の配列やオブジェクトは参照が共有される。
よくある落とし穴と対策
- 深いコピーはできない: ネストした配列やオブジェクトは参照が共有される。完全コピーしたいならstructuredCloneやJSON.parse(JSON.stringify(…))などを使う。
- 元配列を壊さない: スプレッドは新しい配列を返すので安全。pushやspliceのように元を変えない。
- オブジェクトにも使える: 配列だけでなくオブジェクトのコピー／結合にも使える（
{...obj}）。
他の手段との使い分け
| 手段 | 主な用途 | 元配列の変更 |
|---|---|---|
スプレッド構文 [...a,...b] | コピー／結合を簡潔に書く | しない |
| concat | 複数配列や値を結合 | しない |
| slice | 部分コピー | しない |
| push/splice | 元配列に追加／削除 | 変更する |
練習問題（手を動かして覚える）
1. 配列をコピー
const arr = ["A", "B", "C"];
const copy = [...arr];
console.log(copy); // ["A","B","C"]
2. 複数配列を結合
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5];
const merged = [...arr1, ...arr2, ...arr3];
console.log(merged); // [1,2,3,4,5]
3. 値を混ぜて結合
const arr1 = ["Pen"];
const arr2 = ["Note"];
const result = [...arr1, "Bag", ...arr2];
console.log(result); // ["Pen","Bag","Note"]
直感的な指針
- コピーしたい:
[...arr] - 結合したい:
[...arr1, ...arr2] - 値も混ぜたい:
[...arr1, "X", ...arr2]