JavaScript配列の結合（concat）の基本と実践
「2つ以上の配列をつなげたい」ときに使うのが concat。初心者でも直感的に扱えるメソッドで、元の配列を壊さず新しい配列を返してくれるのが特徴です。
構文と考え方
const result = arr1.concat(arr2, arr3, ...);
- 返り値: 新しい配列（元の配列は変更されない）
- 引数: つなげたい配列や値を複数渡せる
- 特徴: 元の配列はそのまま残るので安全。複数配列を一気に結合できる。
すぐ使えるテンプレート集
基本：2つの配列を結合
const arr1 = [1, 2];
const arr2 = [3, 4];
const result = arr1.concat(arr2);
console.log(result); // [1, 2, 3, 4]
- ポイント: arr1とarr2はそのまま残り、新しい配列が返る。
複数配列を一気に結合
const a = [1];
const b = [2, 3];
const c = [4, 5];
const result = a.concat(b, c);
console.log(result); // [1, 2, 3, 4, 5]
- ポイント: 引数を複数渡せるので、まとめて結合可能。
配列と値を同時に結合
const arr = [1, 2];
const result = arr.concat(3, [4, 5]);
console.log(result); // [1, 2, 3, 4, 5]
- ポイント: 値も配列も混ぜて渡せる。配列は展開される。
ネスト配列は展開されない
const arr1 = [1, 2];
const arr2 = [[3, 4]];
const result = arr1.concat(arr2);
console.log(result); // [1, 2, [3, 4]]
- ポイント: concatは「1階層の展開」はしない。ネストを解消したいならflatを使う。
よくある落とし穴と対策
- 元配列が変わると思い込む: concatは新しい配列を返すだけ。元はそのまま。
- ネストが展開されると勘違い: concatは単純結合。ネストは残る。展開したいならflat。
- 大量結合でパフォーマンス: 大量の配列結合ではスプレッド構文
[...arr1, ...arr2]もよく使われる。
他の手段との使い分け
| 手段 | 主な用途 | 元配列の変更 |
|---|---|---|
| concat | 複数配列や値を結合 | しない |
スプレッド構文 [...a,...b] | 簡潔に結合 | しない |
| push/apply | 既存配列に追加 | 変更する |
| flat | ネスト配列を平坦化 | しない |
練習問題（手を動かして覚える）
1. 2つの配列を結合して新しい配列を作る
const arr1 = ["A", "B"];
const arr2 = ["C", "D"];
const result = arr1.concat(arr2);
console.log(result); // ["A","B","C","D"]
2. 複数配列＋値を結合
const arr1 = [1];
const arr2 = [2, 3];
const result = arr1.concat(arr2, 4, [5, 6]);
console.log(result); // [1,2,3,4,5,6]
3. ネスト配列を結合（展開されないことを確認）
const arr1 = [1];
const arr2 = [[2, 3]];
const result = arr1.concat(arr2);
console.log(result); // [1,[2,3]]
直感的な指針
- 単純に配列をつなげたい: concat
- 展開もしたい: flat
- 短く書きたい: スプレッド構文
[...arr1, ...arr2]