concat で「配列をくっつけて1本にする」イメージ
const r = arr1.concat(arr2)
concat は、「複数の配列をつなげて、新しい1本の配列を作る」ためのメソッドです。 天才プログラマー視点で言うと、「配列同士を安全に結合したいときの基本技」が concat です。
重要なのは、元の配列を壊さず、新しい配列を返すという点です。
concat の基本構造と「新しい配列」が返る仕組み
const arr1 = [1, 2];
const arr2 = [3, 4];
const r = arr1.concat(arr2);
console.log(r); // [1, 2, 3, 4]
console.log(arr1); // [1, 2]
console.log(arr2); // [3, 4]
ここで起きていることを丁寧に分解します。 arr1.concat(arr2) は、「arr1 の後ろに arr2 をくっつけた新しい配列」を返します。 元の arr1 と arr2 は一切変更されません。
つまり、concat は 「配列を結合して新しい配列を作る“コピー機”」だと考えると分かりやすいです。
例題：ページごとのデータを「全ページ分」にまとめる
const page1 = ["Aki", "Mika"];
const page2 = ["Ken", "Aya"];
const all = page1.concat(page2);
console.log(all); // ["Aki", "Mika", "Ken", "Aya"]
console.log(page1); // ["Aki", "Mika"]
console.log(page2); // ["Ken", "Aya"]
ここでのイメージはこうです。 ページ1とページ2に分かれているデータを、「全部まとめて1本の配列にしたい」という状況です。 concat を使うことで、元の配列を壊さずに「全体リスト」を作ることができます。
実務でも、「部分的な配列をいくつか持っていて、それらをまとめたい」という場面は非常に多いです。
複数の配列をまとめて concat する
concat は、2つだけでなく、複数の配列を一度に結合できます。
const a = [1];
const b = [2, 3];
const c = [4, 5];
const r = a.concat(b, c);
console.log(r); // [1, 2, 3, 4, 5]
ここで重要なのは、「左側の配列に、右側の配列たちを順番にくっつけていく」という動きです。 a.concat(b, c) は、a.concat(b).concat(c) と同じ意味になります。
「いくつかの配列を順番に並べたい」ときに、concat はとても素直な書き方になります。
配列以外の値も concat できる
concat は、配列だけでなく「単体の値」もくっつけられます。
const arr = [1, 2];
const r = arr.concat(3, 4);
console.log(r); // [1, 2, 3, 4]
ここでは、3 や 4 のような単体の値が、配列の末尾に追加されています。 ただし、配列を渡した場合は「中身」が展開されることに注意してください。
const arr = [1, 2];
const r = arr.concat([3, 4]);
console.log(r); // [1, 2, 3, 4]
このように、concat は「配列同士」だけでなく、「配列＋値」の結合にも使えます。
スプレッド構文との違いを深掘りする
最近の JavaScript では、スプレッド構文 ... もよく使われます。
const arr1 = [1, 2];
const arr2 = [3, 4];
const r1 = arr1.concat(arr2);
const r2 = [...arr1, ...arr2];
console.log(r1); // [1, 2, 3, 4]
console.log(r2); // [1, 2, 3, 4]
どちらも「新しい配列を作る」という意味では同じですが、 天才講師としての感覚で言うと、
配列結合の意図をはっきり示したいなら concat、 柔軟に「途中に値を挟みたい」ならスプレッド構文、
という使い分けがしやすいです。
よくあるミスと注意点を深掘りする
まず、concat は 元の配列を変更しないことが重要です。 「結合したつもりで元の配列を見たら変わっていない」という勘違いがよく起きます。
const arr1 = [1, 2];
const arr2 = [3, 4];
arr1.concat(arr2);
console.log(arr1); // [1, 2]（変わっていない）
新しい配列を使いたいなら、必ず変数に代入する必要があります。
const r = arr1.concat(arr2);
もうひとつの注意点は、ネストされた配列はそのまま入るということです。
const a = [1, 2];
const b = [[3, 4]];
const r = a.concat(b);
console.log(r); // [1, 2, [3, 4]]
flat のように「中身を展開して平坦化する」わけではないので、 「ネストを崩したいときは concat ではなく flat / flatMap を使う」 という意識を持っておくと混乱しません。
まとめ：concat は「配列を安全に結合するための基本技」
concat を使いこなせると、配列の結合処理がシンプルで安全になります。
元の配列を壊さず、新しい配列を作る。 複数の配列を順番にくっつける。 値も一緒に追加できる。
「この配列とこの配列を、ただ順番に並べて1本にしたい」と感じたら、 まず arr1.concat(arr2) を思い出す。
それが、配列操作の基礎体力をつけるうえで、とても大事な一歩になります。