【JavaScript】配列連結の決定版！concatとスプレッド構文の使い分け

2026年1月25日

概要

複数のデータリストを1つにまとめたい場合、JavaScriptには伝統的な concat メソッドと、ES2015(ES6)で導入された直感的な「スプレッド構文（...）」の2つの方法があります。

現在では、可読性が高く柔軟な操作が可能なスプレッド構文が主流となっています。本記事では、これら2つの結合手法の比較と、複数の部署リストを統合して全社員名簿を作成する実例を紹介します。

仕様（入出力）

配列結合の構文比較

構文	意味	特徴
`arr1.concat(arr2)`	配列1の後ろに配列2を連結した新しい配列を生成する。	従来の書き方。メソッドチェーンで記述可能。
`[...arr1, ...arr2]`	配列を展開（spread）し、再定義することで新しい配列を生成する。	推奨。要素の間に別の値を追加するなど、自由度が高い。

入力: 結合したい複数の配列
出力: 結合された新しい配列（元の配列は変更されません）

基本の使い方

1. `concat` メソッド（従来の方法）

メソッドをつなげて記述します。

const groupA = ['User1', 'User2'];
const groupB = ['User3'];

const merged = groupA.concat(groupB);
console.log(merged); // ["User1", "User2", "User3"]

2. スプレッド構文（推奨される方法）

... を使って配列の中身を「展開」し、新しい [] の中に並べ直すイメージです。

const groupA = ['User1', 'User2'];
const groupB = ['User3'];

// AとBを展開して結合
const merged = [...groupA, ...groupB];
console.log(merged); // ["User1", "User2", "User3"]

// 配列の複製（コピー）も簡単にできる
const copy = [...groupA];

コード全文（HTML / JavaScript）

開発部（Engineering）と営業部（Sales）のメンバーリストを統合し、プロジェクト全体の参加者リストを画面に表示するデモです。

柔軟性の高いスプレッド構文を採用しています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Team Merger Demo</title>
    <style>
        .container {
            font-family: sans-serif;
            max-width: 400px;
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 8px;
            background-color: #f9f9f9;
        }
        h3 { margin-top: 0; color: #333; }
        .list-group {
            background: white;
            border: 1px solid #ddd;
            padding: 10px;
            margin-bottom: 10px;
            list-style-type: none;
            border-radius: 4px;
        }
        .list-item {
            padding: 5px 0;
            border-bottom: 1px dashed #eee;
        }
        .list-item:last-child { border-bottom: none; }
        .badge {
            display: inline-block;
            padding: 2px 6px;
            font-size: 0.8em;
            border-radius: 4px;
            margin-right: 8px;
            color: white;
        }
        .bg-eng { background-color: #2196F3; }
        .bg-sales { background-color: #FF9800; }
        .bg-leader { background-color: #4CAF50; }
    </style>
</head>
<body>

<div class="container">
    <h3>合同プロジェクトメンバー</h3>
    <ul id="merged-list" class="list-group">
        </ul>
</div>

<script src="merge_teams.js"></script>
</body>
</html>

JavaScript

/**
 * チーム統合スクリプト
 * スプレッド構文を用いた配列結合
 */

// 1. 各チームのメンバー配列
const engineeringTeam = [
    { name: 'Alice', role: 'Dev', dept: 'Eng' },
    { name: 'Bob', role: 'QA', dept: 'Eng' }
];

const salesTeam = [
    { name: 'Charlie', role: 'Sales', dept: 'Sales' },
    { name: 'Dave', role: 'Manager', dept: 'Sales' }
];

// プロジェクトリーダー（単一のオブジェクト）
const projectLeader = { name: 'Eve', role: 'Leader', dept: 'All' };

// DOM要素の取得
const listElement = document.getElementById('merged-list');

/**
 * リストを描画する関数
 */
const renderMembers = () => {
    // 2. 配列の結合
    // リーダーを先頭にし、その後にエンジニア、営業メンバーを結合する
    // スプレッド構文なら、配列と単一要素を自由にミックスできる
    const allMembers = [
        projectLeader,      // 単一オブジェクトを追加
        ...engineeringTeam, // エンジニア配列を展開
        ...salesTeam        // 営業配列を展開
    ];

    // HTML生成
    allMembers.forEach(member => {
        // 部署ごとのバッジ色設定
        let badgeClass = 'bg-eng';
        if (member.dept === 'Sales') badgeClass = 'bg-sales';
        if (member.role === 'Leader') badgeClass = 'bg-leader';

        const li = document.createElement('li');
        li.className = 'list-item';
        li.innerHTML = `
            <span class="badge ${badgeClass}">${member.role}</span>
            <span>${member.name}</span>
        `;
        listElement.appendChild(li);
    });
};

// 実行
renderMembers();

カスタムポイント

間に要素を挟む:スプレッド構文の最大の利点は、結合の途中に別の要素を挿入できることです。const newArray = [...arrA, '中間要素', ...arrB]; のように記述できます。concat ではこれが面倒になります。
3つ以上の結合:[...arr1, ...arr2, ...arr3] といくつでも連続して記述可能です。

注意点

シャローコピー（浅いコピー）であるconcat もスプレッド構文も、新しい配列を作りますが、中身がオブジェクトの場合、その参照だけがコピーされます。結合後の配列でオブジェクトの中身（例: member.name）を変更すると、元の配列のデータも書き換わってしまうため注意が必要です。
大量データのパフォーマンス数万件を超える巨大な配列を結合する場合、スプレッド構文はスタックオーバーフローを引き起こす可能性があります（引数として展開されるため）。その場合は concat の方が安全な場合がありますが、通常のWebアプリ開発レベルでは気にする必要はありません。

応用

条件付きで要素を追加しながら結合

三項演算子とスプレッド構文を組み合わせることで、「条件に合致する場合だけ配列を結合する」といった高度な操作が可能です。

const coreFiles = ['index.js', 'style.css'];
const devFiles = ['test.js', 'mock.json'];
const isProduction = true; // 本番環境フラグ

// 本番環境なら開発用ファイルは含めない
const deployFiles = [
    ...coreFiles,
    ...(isProduction ? [] : devFiles) // falseならdevFilesを展開、trueなら空配列を展開
];

console.log(deployFiles); // ["index.js", "style.css"]