JavaScript | 配列を結合する方法（concatメソッド）

JavaScript JavaScript
2020.07.26
スポンサーリンク

concat() は 配列を結合したり、配列をコピーしたりするためのメソッドです。元の配列は変更しない点が重要。ここでは「なぜ使うのか」「どう動くのか」「注意点」「練習問題（解答付き）」まで、初心者向けにかみ砕いて説明します。

1. concat() の基本（イメージ）

  • イメージ：2つの紙（配列）を繋げて新しい紙を作る。元の紙はそのまま残る。
  • 書き方（基本）
let a = [1, 2];
let b = [3, 4];
let c = a.concat(b); // c は [1,2,3,4]
JavaScript
  • ポイント：a や b は変わらない（破壊的でない）。

2. よくある使い方の例

例：配列と値を混ぜて結合

let fruits = ['Apple', 'Melon'];
let all = fruits.concat('Peach', ['Grapes', 'Strawberry']);
console.log(all);
// => ["Apple", "Melon", "Peach", "Grapes", "Strawberry"]
JavaScript

引数は配列でも単一値でも OK。配列は展開されて結合されます。

例：配列のコピー（浅いコピー）

let arr = ['A', 'B', 'C'];
let copy = arr.concat(); // 引数なしでコピー
copy[0] = 'Z';
console.log(arr);  // -> ['A','B','C'] 元は変わらない
console.log(copy); // -> ['Z','B','C']
JavaScript

3. 注意：浅いコピー（シャローコピー）であること

配列の中にさらにオブジェクトや配列がある場合、concat() は「その参照」をコピーします。つまり内部のオブジェクトは共有されるため、内部要素を書き換えると元配列も変わることがあります。

let nested = [[1,2], [3,4]];
let copy = nested.concat();
copy[0][1] = 99;
console.log(nested[0]); // -> [1, 99]  元も変わる
JavaScript

内部まで完全に独立したコピー（深いコピー）がほしい場合は、JSON.parse(JSON.stringify(...)) や専用のライブラリ（lodashのcloneDeepなど）を検討します（ただし JSON 法は関数や undefined などを扱えない制約あり）。

4. concat() と似た方法の違い（簡単）

  • push()：元配列を直接変更して追加する（破壊的）。
a.push(3); // a が変わる
JavaScript
  • スプレッド演算子 [...]：結合やコピーに使える。読みやすい。 
let c = [...a, ...b]; // concat と同じ結果
let copy = [...arr];  // コピー
JavaScript
  • slice()：引数なしで配列全体をコピーできる（浅いコピー）。concat() と同等のコピー用途に使える。

5. 実践的な例（オブジェクト配列の結合）

ユーザーのリストを結合して表示する例：

let teamA = [{id:1, name:'Aiko'}, {id:2, name:'Taro'}];
let teamB = [{id:3, name:'Yuki'}];

let all = teamA.concat(teamB);
console.log(all.length); // -> 3

// 注意：オブジェクトは参照共有（浅いコピー）
all[0].name = 'Aiko-chan';
console.log(teamA[0].name); // -> 'Aiko-chan' （teamAも変わる）
JavaScript

6. 練習問題（自力で考えてから下の解答を見ると効果的）

初級（簡単）

  1. let a = [10, 20]; let b = [30]; を結合して [10,20,30] を作ってください。

解答

let c = a.concat(b);
JavaScript

中級（応用）

  1. let names = ['Ken', 'Miki']; に文字列 'Sora' を先頭に入れて ['Sora','Ken','Miki'] を作るにはどうする？

解答

let result = ['Sora'].concat(names);
JavaScript

（または let result = ['Sora', ...names];）

上級（注意点を理解する）

  1. 次のコードの出力は何になる？ 理由も書け。
let x = [{n:1}, {n:2}];
let y = x.concat();
y[0].n = 99;
console.log(x[0].n);
JavaScript

解答
出力は 99。
理由：concat() は浅いコピーなので、配列内のオブジェクトは参照が共有されている。y[0] と x[0] は同じオブジェクトを指しているため、どちらかでプロパティを変えると両方に反映される。

7. まとめ（初心者が覚えておくべきこと）

  • concat() は元の配列を変えずに新しい配列を作る。
  • 引数は配列でも値でも良い（配列は展開される）。
  • 引数なしで呼ぶと浅いコピーになる（内部オブジェクトは共有される）。
  • 多くの場合、イミュータブル（元を変えない）操作がほしいときに便利。
  • 内部まで独立したコピーが欲しいなら、別の方法（深いコピー）を使う必要がある。
前へ次へ
1234
スポンサーリンク
タイトルとURLをコピーしました