JavaScriptで配列を結合する際によく使用される`concat()`メソッドについて、基本的な使い方から実践的な活用方法まで詳しく解説します。

concat()メソッドとは

`concat()`は、既存の配列に新しい要素や配列を結合して、新しい配列を作成するメソッドです。元の配列は変更されず、結合された新しい配列が返されます。

基本的な使い方

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const newArray = array1.concat(array2);

console.log(newArray); // [1, 2, 3, 4, 5, 6]

複数の配列を結合する

`concat()`は複数の配列を同時に結合することができます。

const array1 = ['a', 'b'];
const array2 = ['c', 'd'];
const array3 = ['e', 'f'];
const newArray = array1.concat(array2, array3);

console.log(newArray); // ['a', 'b', 'c', 'd', 'e', 'f']

値を直接追加する

配列だけでなく、単独の値も追加できます。

const array = [1, 2, 3];
const newArray = array.concat(4, 5);

console.log(newArray); // [1, 2, 3, 4, 5]

配列と値を組み合わせて結合

const array1 = [1, 2];
const array2 = [3, 4];
const newArray = array1.concat(5, array2, 6);

console.log(newArray); // [1, 2, 5, 3, 4, 6]

注意点と代替手段

1. 元の配列は変更されない

const original = [1, 2];
const merged = original.concat([3, 4]);

console.log(original); // [1, 2]
console.log(merged);   // [1, 2, 3, 4]

2. スプレッド演算子を使用する方法

const array1 = [1, 2];
const array2 = [3, 4];
const newArray = [...array1, ...array2];

console.log(newArray); // [1, 2, 3, 4]

実践的な使用例

オブジェクトの配列を結合する

const users1 = [{ id: 1, name: 'John' }];
const users2 = [{ id: 2, name: 'Jane' }];
const allUsers = users1.concat(users2);

console.log(allUsers);
// [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }]

フィルタリング後の配列結合

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
const result = evenNumbers.concat([6, 8]);

console.log(result); // [2, 4, 6, 8]

まとめ

`concat()`メソッドは、配列の結合に便利な方法を提供します。以下の特徴があります：

  • 元の配列を変更しない
  • 複数の配列や値を同時に結合可能
  • 新しい配列を返す
  • メソッドチェーンで使用可能

近代的なJavaScriptでは、スプレッド演算子（`...`）も配列結合の代替手段として人気がありますが、`concat()`は依然として重要なメソッドとして広く使用されています。