concat() と スプレッド演算子（...） はどちらも「配列を結合したりコピーしたり」できますが、
実際の開発では使い分けを意識するとコードが読みやすく・安全になります。
結論まとめ（先にざっくり）
| 目的 | おすすめ | 理由 |
|---|---|---|
| 配列を単純に結合 | ✅ スプレッド演算子 [...] | 直感的・短く書ける・モダン |
| 古い環境での互換性重視 | ✅ concat() | ES5以前でも使える |
| 引数を動的に渡したい | ✅ concat() | 変数や関数の戻り値をそのまま繋げやすい |
| 多次元配列のコピーや結合 | ⚠ どちらも「浅いコピー」なので注意 | |
| ネストしたデータを完全コピーしたい | ❌ どちらも不適 | → structuredClone() や JSON.parse(JSON.stringify()) を使う |
1. スプレッド演算子 ... の特徴
✅ 特徴
- 短く・見やすく書ける
- 配列の途中に別の配列を「展開」できる
- 近年のJSでは主流（ES6以降）
例1：配列の結合
let a = [1, 2];
let b = [3, 4];
let c = [...a, ...b];
console.log(c); // [1, 2, 3, 4]
例2：途中に値を挟める
let a = [1, 2];
let b = [3, 4];
let c = [0, ...a, 99, ...b];
console.log(c); // [0, 1, 2, 99, 3, 4]
例3：コピー（浅いコピー）
let arr = [10, 20, 30];
let copy = [...arr];
copy[0] = 999;
console.log(arr); // [10, 20, 30] → 元の配列は変わらない
✨ メリット
- シンプルで読みやすい
- 途中に値を挟める柔軟性
- Reactなどのモダン開発で標準的に使われている
⚠ デメリット
- IE（古いブラウザ）では非対応（ES6が必要）
- 深いコピーはできない（
concat()と同じ）
2. concat() の特徴
✅ 特徴
- 関数形式で配列や値を結合
- 複数の引数をまとめて渡せる
- 古い環境でも動作（ES5以前から）
例1：単純な結合
let a = [1, 2];
let b = [3, 4];
let c = a.concat(b);
console.log(c); // [1, 2, 3, 4]
例2：複数の配列をまとめて結合
let a = [1];
let b = [2];
let c = [3];
let d = a.concat(b, c, [4, 5]);
console.log(d); // [1, 2, 3, 4, 5]
例3：引数なしでコピー
let arr = [10, 20, 30];
let copy = arr.concat();
✨ メリット
- 引数を柔軟に渡せる
- 関数として扱えるため、動的に組み立てやすい
（例：arr.concat(getListFromServer())） - 古いブラウザでも動く
⚠ デメリット
- 書き方がやや長い
- 配列の途中に値を挟むような柔軟な書き方はできない
- 可読性がやや劣る（特にネストすると）
⚔ 実践比較（ベストプラクティス）
モダンJS（ES6+）なら：
👉 スプレッド演算子を優先
// ✅ 推奨
const newList = [...oldList, ...extraItems];
const copied = [...array];
理由：
- コードが短く、構造が直感的
- React / Vue / Node.js など、ほとんどの現代環境で標準的
レガシー環境（古いブラウザ対応が必要）なら：
👉 concat() を使う
// ✅ 古い書き方
var newList = oldList.concat(extraItems);
var copy = oldList.concat();
動的に結合したい場合（引数を変数に持つ）
👉 concat() が便利
function mergeArrays(base, extra) {
return base.concat(extra);
}
let data = [1, 2];
let newData = mergeArrays(data, [3, 4]);
（... は引数が配列の中身を展開するので、配列そのものを引数に渡したい時は concat() の方が扱いやすい）
3. 実務的な選び方（まとめ）
| シーン | 推奨 | 理由 |
|---|---|---|
| モダンWeb開発（React/Vue/Node） | スプレッド演算子 | 短くて見やすい、標準的 |
| 古いブラウザ対応が必要 | concat() | ES5互換 |
| 引数を動的に受け取る関数で結合 | concat() | 関数の中で扱いやすい |
| 配列を部分的に展開したい | スプレッド演算子 | [...a, 100, ...b] のように柔軟 |
| ネストしたデータを完全コピー | どちらも不適 | → structuredClone() や JSON.parse(JSON.stringify()) |
4. 例題（理解を深める）
問題：
次の2つのコードはどちらが好ましい？
理由も説明してください。
// A
let merged = arr1.concat(arr2, arr3);
// B
let merged = [...arr1, ...arr2, ...arr3];
✅ 答え：B（スプレッド演算子）
- 理由：構文がシンプルで読みやすく、モダンなJavaScriptでは標準的。
- ただし、古い環境（IE11など）で動かす必要がある場合は
concat()に切り替える。