concat()は、複数の配列や値を結合して新しい配列を作成するメソッドです。元の配列を変更せずにデータを統合できるため、イミュータブルな配列操作に適しています。スプレッド演算子との使い分けも含めて解説します。
基本的な使い方
concat()は引数に指定した配列や値を、元の配列の末尾に結合した新しい配列を返します。元の配列は変更されません。
JavaScript
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8];
// 2つの配列を結合
const combined = arr1.concat(arr2);
console.log(combined);
// 3つ以上の配列を結合
const all = arr1.concat(arr2, arr3);
console.log(all);
// 配列と個別の値を混在して結合
const mixed = arr1.concat(4, 5, [6, 7]);
console.log(mixed);
// 元の配列は変更されない
console.log("元の配列:", arr1);実行結果
[1, 2, 3, 4, 5, 6]
[1, 2, 3, 4, 5, 6, 7, 8]
[1, 2, 3, 4, 5, 6, 7]
元の配列: [1, 2, 3]引数には配列と個別の値を混在して渡せます。配列は1段階だけ展開されますが、ネストした配列はそのまま要素として追加されます。
スプレッド演算子との比較
ES6以降では、スプレッド演算子[...]でも配列を結合できます。どちらも結果は同じですが、用途に応じて使い分けます。
JavaScript
const fruits = ["りんご", "バナナ"];
const vegs = ["にんじん", "キャベツ"];
// concat()
const result1 = fruits.concat(vegs);
console.log(result1);
// スプレッド演算子
const result2 = [...fruits, ...vegs];
console.log(result2);
// スプレッド演算子の方が柔軟（間に値を追加できる）
const withSeparator = [...fruits, "---区切り---", ...vegs];
console.log(withSeparator);
// ネストした配列の扱い
const nested = [[1, 2], [3, 4]];
console.log([].concat(...nested)); // 1段階フラット化
console.log(nested.flat()); // flat()の方が明確実行結果
["りんご", "バナナ", "にんじん", "キャベツ"]
["りんご", "バナナ", "にんじん", "キャベツ"]
["りんご", "バナナ", "---区切り---", "にんじん", "キャベツ"]
[1, 2, 3, 4]
[1, 2, 3, 4]実践的な活用例
concat()はデータの統合やデフォルト値の追加、条件付き結合に使えます。
JavaScript
// 複数ソースからのデータ統合
const localData = [
{ id: 1, name: "田中", source: "local" },
{ id: 2, name: "佐藤", source: "local" }
];
const apiData = [
{ id: 3, name: "鈴木", source: "api" },
{ id: 4, name: "高橋", source: "api" }
];
const allData = localData.concat(apiData);
console.log(`全${allData.length}件のデータ`);
console.log(allData.map(d => `${d.name}(${d.source})`));
// 条件付き結合
const baseItems = ["ホーム", "検索"];
const isAdmin = true;
const menuItems = baseItems.concat(
isAdmin ? ["管理画面", "ユーザー管理"] : []
);
console.log("メニュー:", menuItems);
// 配列のイミュータブルな先頭追加
const original = [2, 3, 4];
const withFirst = [1].concat(original);
console.log(withFirst);実行結果
全4件のデータ
["田中(local)", "佐藤(local)", "鈴木(api)", "高橋(api)"]
メニュー: ["ホーム", "検索", "管理画面", "ユーザー管理"]
[1, 2, 3, 4]concat()のパフォーマンス
大量の配列を結合する場合、concat()は毎回新しい配列を生成するためメモリ効率が低下します。ループ内で繰り返しconcat()するよりも、一度にまとめて結合するか、push()で破壊的に追加する方がパフォーマンスは良くなります。
浅いコピーに注意
concat()は浅いコピーを行います。結合後の配列に含まれるオブジェクトは元のオブジェクトへの参照です。結合後に要素のプロパティを変更すると元の配列にも影響するため、独立したコピーが必要な場合はstructuredClone()を使ってください。
まとめ
concat()は配列や値を結合して新しい配列を返す- 元の配列は変更されない（イミュータブルな操作）
- 配列は1段階だけ展開され、ネストは保持される
- スプレッド演算子
[...]でも同様の結合が可能 - 大量の結合にはパフォーマンスに注意する