JavaScript | concat() と似た動きをする push()／slice()／スプレッド演算子（…） の違いと使い分け

ここでは、concat() と似た動きをする push()／slice()／スプレッド演算子（...） の違いと使い分けを、初心者向けにわかりやすく解説します。

配列を結合・コピーする主な方法の比較

各メソッドの使い方と特徴をわかりやすく解説！

① concat()：配列を結合・コピー（元を変えない）

let a = [1, 2];
let b = [3, 4];

let c = a.concat(b);
console.log(c); // [1, 2, 3, 4]
console.log(a); // [1, 2]  ← 元はそのまま

let a = [1, 2];
let b = [3, 4];

let c = a.concat(b);
console.log(c); // [1, 2, 3, 4]
console.log(a); // [1, 2]  ← 元はそのまま

• 新しい配列を作るので、安全に使える。
• 元のデータを保ちつつ「新しい一覧を作る」ときに最適。

② push()：配列に要素を追加（元が変わる）

let a = [1, 2];
a.push(3, 4);
console.log(a); // [1, 2, 3, 4] ← 元の配列が変わる！

let a = [1, 2];
a.push(3, 4);
console.log(a); // [1, 2, 3, 4] ← 元の配列が変わる！

• 新しい配列は作らず、元を直接変更する。
• 「データをどんどん追加したい」ようなときに使う。
• 一時的に結合するだけなら不向き。

③ slice()：配列の一部 or 全体をコピー

let a = [1, 2, 3, 4];
let part = a.slice(1, 3); // インデックス1〜2をコピー
console.log(part); // [2, 3]

let copy = a.slice(); // 全体コピー
console.log(copy); // [1, 2, 3, 4]

let a = [1, 2, 3, 4];
let part = a.slice(1, 3); // インデックス1〜2をコピー
console.log(part); // [2, 3]

let copy = a.slice(); // 全体コピー
console.log(copy); // [1, 2, 3, 4]

• concat() と同じく元の配列を変更しない。
• ただし結合はできず、「切り出し or コピー」専用。

④ スプレッド演算子（...）：モダンで柔軟！

let a = [1, 2];
let b = [3, 4];

let c = [...a, ...b];
console.log(c); // [1, 2, 3, 4]

let copy = [...a];
console.log(copy); // [1, 2]

let a = [1, 2];
let b = [3, 4];

let c = [...a, ...b];
console.log(c); // [1, 2, 3, 4]

let copy = [...a];
console.log(copy); // [1, 2]

• concat() と同じように新しい配列を作るが、記述が短くて見やすい！
• ほぼ「concat のモダン版」。
• 中にオブジェクトや配列がある場合は、concat() 同様「浅いコピー」。

使い分けの目安

まとめ：これを覚えよう！