concat とは何か
concat は「複数の配列や値を“結合して新しい配列”を返す」非破壊メソッドです。元の配列は変更されず、つなげた結果だけが戻り値として返ります。ここが重要です：concat は“安全な結合”の定番で、push や splice と違って参照共有による副作用を避けられます。React/Vue のような状態管理とも相性が良い、初心者がまず覚えるべき結合手段です。
基本の使い方と戻り値
配列どうしを結合する
const a = [1, 2];
const b = [3, 4];
const merged = a.concat(b);
console.log(merged); // [1, 2, 3, 4]
console.log(a, b); // [1, 2] [3, 4]（元は不変）
ここが重要です：concat は“新しい配列”を返します。元配列はそのままなので、別のロジックや UI に副作用が伝わりません。
値（単体）も結合できる
const a = [10, 20];
const added = a.concat(30);
console.log(added); // [10, 20, 30]
ここが重要です：引数は配列でも値でも OK。複数の値を並べれば、まとめて末尾に追加できます。
スプレッド構文との比較（どちらを使うべき？）
読みやすさと意図の違い
const a = [1, 2], b = [3, 4];
// 両者とも結果は同じ
const merged1 = a.concat(b);
const merged2 = [...a, ...b];
ここが重要です：配列結合の可読性は文脈次第。関数チェーンの中では concat が読みやすく、リテラルで“前後に値も混ぜたい”場合はスプレッド（[x, …a, …b, y]）が直感的です。どちらも非破壊で安全です。
他配列の“中身”を入れたいときの注意
const a = [1, 2], b = [3, 4];
a.concat(b); // [1, 2, 3, 4]（中身が展開される）
a.concat([b]); // [1, 2, [3, 4]]（入れ子になる）
ここが重要です：“入れ子”を避けたいなら、渡すのは b そのもの。配列をさらに配列で包むと、ネストになってしまいます。
複数配列・階層の扱い（浅い結合と深さの注意）
いくつでも連結できる
const a = [1], b = [2], c = [3];
const merged = a.concat(b, c); // [1, 2, 3]
ここが重要です：引数を並べれば、何本でも一度に結合できます。ループで何度も concat するより、まとめて渡すほうが意図が明確です。
“浅い結合”であること（深い配列はそのまま残る）
const nested = [[1, 2], [3, 4]];
const merged = [].concat(nested); // [[1, 2], [3, 4]]（内側は展開されない）
ここが重要です：concat は“1階層だけ展開”。内側の配列まで平坦化したいなら nested.flat() を使います。結合と平坦化は目的が違う、という意識が大切です。
非破壊更新の定番パターン（実務での使い方）
末尾に追加（push の非破壊版）
const arr = [1, 2];
const next = arr.concat(3); // [1, 2, 3]
ここが重要です：push は元配列を変えますが、concat は“新配列”。状態管理や参照共有の場面では concat が安全です。
先頭に追加（unshift の非破壊版）
const arr = [2, 3];
const next = [1].concat(arr); // [1, 2, 3]
ここが重要です：先頭操作は壊さず書くのがコツ。スプレッド（[1, …arr]）でも同様に非破壊で表現できます。
間に挿入（前後を結合）
const arr = ["A", "C"], i = 1;
const next = arr.slice(0, i).concat("B", arr.slice(i)); // ["A","B","C"]
ここが重要です：splice の“挿入”を非破壊で再現。前後を slice し、concat でつなげると副作用ゼロで意図通りになります。
配列以外との結合（配列風・特殊ケース）
文字列や非配列は“そのまま1要素”として結合
[1].concat("x"); // [1, "x"]
[1].concat({ id: 1 }); // [1, { id: 1 }]
ここが重要です：展開されるのは“配列”だけ。オブジェクトや文字列は1要素として扱われます。
ArrayLike を結合したいときの下準備
const nodeList = document.querySelectorAll("div"); // ArrayLike
const arr = Array.from(nodeList);
const next = [].concat(arr, ["extra"]);
ここが重要です：NodeList など“配列風”は、そのままだと concat の展開対象になりません。必要なら Array.from で“本物の配列”にしてから結合します。
よくある落とし穴と回避策
挿入したい配列をさらに配列で包み、意図せず入れ子にしてしまうミスが頻発します。“中身を入れたいなら配列そのもの”を渡す、またはスプレッド（…[arr]）で展開してください。深い配列を concat で平坦化できると思い込みがちですが、concat は“浅い結合”です。平坦化は flat を使います。大量データをループで何度も concat すると、不要な配列生成を繰り返して性能が落ちます。可能なら一度に結合する、あるいは最終形だけ一回で作るのが効率的です。参照共有のまま push/splice を使うと UI やロジックに副作用が及びます。非破壊の concat（やスプレッド）へ切り替える習慣を持ちましょう。
まとめ
concat は「配列や値を結合して新しい配列を返す」非破壊メソッドで、安全な更新の定番です。配列の中身は展開されますが、結合は“浅い”ため平坦化とは別物。末尾・先頭・間への追加を非破壊で表現でき、状態管理と好相性です。入れ子の誤結合を避け、必要なら flat や Array.from を併用する。結合は“まとめて一度に”を意識すると、読みやすく性能も安定します。これらを押さえれば、初心者でも直感的で壊れにくい配列結合が書けます。