【JavaScript】配列の結合とは？concatやスプレッド構文を初心者向けにわかりやすく解説

フロントエンド開発•2025/2/15

はじめに

JavaScriptで開発をしていると、配列の操作は非常に多くの場面で登場します。
なかでも配列の結合は、複数のデータを扱うときに欠かせないテクニックです。
Webアプリケーションの開発現場では、APIから取得したデータをまとめたり、ユーザーが入力した内容を配列として管理したりする際に配列を合体させることがよくあります。

この記事では、初心者の皆さんでも理解しやすいように、JavaScriptでの配列結合を具体的なコード例とともに解説します。
実際の現場で配列を結合する必要に迫られたとき、どんなメソッドを選んでどう使えば良いのかを整理して学びましょう。

この記事を読むとわかること

JavaScriptで配列を結合するさまざまな方法
concatメソッドやスプレッド構文による結合のやり方
配列結合の実務での活用シーンと具体的な注意点
大規模な配列を結合する際のパフォーマンスへの配慮
複雑な結合を実装するためのテクニックや便利メソッドの紹介

JavaScript配列を結合する理由

配列の結合とは、複数の配列をひとつにまとめる操作のことを指します。
たとえば、ユーザーから送られた複数のフィードバック一覧と、別のデータソースから取得した新しいフィードバックをまとめて管理したい場合に役立ちます。
また、同じ形式のデータを集めて処理するときなどにも便利です。

結合した配列を活用すると、データを一括で走査したり、同じ処理を一度にまとめて行えます。
データの数が多くなるほど管理が複雑になりがちですが、結合しておけば後の処理を楽にすることができます。
実務での開発においては、APIコールを複数回行って得られるデータを一つの一覧にするなど、配列の結合が必須になるシーンは少なくありません。

実務での活用シーン

複数APIのレスポンスを統合：外部サービスや社内の別サーバーから複数のAPIを呼び出し、それぞれのレスポンスを一つの配列にまとめたい場合があります。
ユーザーからの入力データ整理：フォームやチェックボックスで取得した複数の項目をまとめて扱う際に、わかりやすく管理するために配列を結合すると便利です。
イベントログの集計：サーバーサイドやクライアントサイドで別々に取得したログデータを、最終的にまとめて処理したい場合に利用されます。

これらのシーンを見ても、配列結合は開発の入り口からかなり役立つ操作だとわかるのではないでしょうか。
それでは、実際にどのように結合を行っていくのか、一つずつ見ていきましょう。

JavaScriptの配列結合方法

JavaScriptには配列を結合するための便利な方法がいくつか用意されています。
なかでもconcatメソッドとスプレッド構文は代表的な手段といえます。
また、やや応用的ではありますが、pushメソッドを使った結合やreduceを用いた結合も覚えておくと便利です。

ここからは、各手段の特徴とサンプルコードを交えながら解説していきます。
初心者の皆さんにもわかりやすいように、なるべく平易な言葉で整理していきます。

concat()メソッドを使った結合

配列の結合でまず思い浮かぶのが、concat() メソッドです。
concat() は元の配列を変更せずに、新しく結合された配列を返してくれる特徴があります。
実務で元のデータを残したい場合などには特に便利です。


const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

// concat()で結合
const mergedArray = array1.concat(array2);
console.log(mergedArray); // [1, 2, 3, 4, 5, 6]

// 元の配列は変化しない
console.log(array1); // [1, 2, 3]
console.log(array2); // [4, 5, 6]

上記のように、concat() を実行すると新しい配列が返ってきます。
concatは引数に複数の配列を指定できるため、array1.concat(array2, array3, array4, ...) といった形でまとめて結合することもできます。

スプレッド構文(...)を使った結合

ES6以降で導入されたスプレッド構文も、配列の結合において非常に便利な方法の一つです。
まるで配列を“展開”するかのように書けるため、コードが視覚的にわかりやすいというメリットがあります。


const arrayA = ['Apple', 'Banana'];
const arrayB = ['Cherry', 'Dates'];

// スプレッド構文で結合
const combined = [...arrayA, ...arrayB];
console.log(combined); // ['Apple', 'Banana', 'Cherry', 'Dates']

スプレッド構文による結合は、元の配列を変更しません。
新しく配列を作っているイメージです。
何かしらの機能追加やフィルタリングをしたいときにも、スプレッド構文は柔軟に使えるのでぜひ覚えておきましょう。

push()で結合する方法

あまり結合の手段としては使われないかもしれませんが、push() メソッドも工夫次第で配列を結合できます。
push() はもともと、配列に新しい要素を末尾に追加するメソッドです。
複数の要素を同時に追加したい場合や、一方の配列にもう一方の要素を全て追加してしまいたい場合に活用できます。


const nums1 = [10, 20, 30];
const nums2 = [40, 50, 60];

// applyやスプレッドを組み合わせてpush
nums1.push(...nums2);
console.log(nums1); // [10, 20, 30, 40, 50, 60]

このように、nums1.push(...nums2) と書けば、nums2 の要素がすべて nums1 の末尾に加わります。
ただし、push() を使う場合は元の配列が変更される点に注意してください。
実務でも、元の配列を上書きしても問題ないかどうかはしっかり確認する必要があります。

結合時の注意点

ここでは、実務でよく引っかかりがちな点をいくつか紹介します。
配列結合の基本を理解していても、ちょっとした落とし穴にはまるケースがあるので気をつけましょう。

元の配列を変更するかどうか

配列を結合するときに最も重要なのが、元の配列を変えたくない場合です。
前述のとおり、concat() やスプレッド構文は元の配列を変更しませんが、push()は元の配列を直接書き換えます。
同じチームの人が後からコードを読むときにも、この点を明確にしておくと混乱が起きにくいでしょう。

小規模な個人プロジェクトならまだしも、チーム開発ではバグの温床になりやすいところです。
明確に「ここは新しい配列として返す」「ここは既存の配列を更新しても大丈夫」などを決めておくと安心です。

配列に含まれる要素の型

配列には文字列、数値、オブジェクトなどさまざまな型の要素が含まれます。
そのため、結合先の配列と結合元の配列に含まれる要素の型が大きく異なると、後の処理で型の取り扱いに戸惑うことがあります。

たとえば、数値と文字列が混在する配列を結合すると、意図せず文字列として扱われる部分が出るかもしれません。
単純に結合するだけでなく、要素の型チェックや変換が必要になる場合もあるので気を配りましょう。

応用テクニック

ここではもう少し実務寄りの応用方法を見ていきます。
単に配列を横につなげるだけでは物足りないケースもあるかと思います。
そんなときに役立つアイデアを紹介します。

二次元配列の結合

たとえば、二次元配列（配列の中に配列が入っている構造）を持ち、特定の段階でフラットな配列に変えたい場合があります。
二次元配列を結合するときにも、concat() やスプレッド構文は活躍しますが、状況によっては何度も結合処理を行う必要があるかもしれません。


const matrix = [[1, 2], [3, 4], [5, 6]];

// 手動で結合
const flattened = matrix[0].concat(matrix[1], matrix[2]);
console.log(flattened); // [1, 2, 3, 4, 5, 6]

上記のように二次元配列を結合するだけなら簡単ですが、大きな配列やネストが深い配列は対策が必要です。
後述のflat()メソッドという便利なものもあるので、そちらもチェックしてみてください。

reduce()で複雑な結合を実装

もし複雑な条件のもとで配列を結合したい場合は、reduce() を使う方法が有効です。
たとえば、配列の要素に含まれる特定のフラグをチェックしながら、別の配列と結合するかどうかを条件分岐したい、といったケースです。


const dataA = [
  { id: 1, active: true },
  { id: 2, active: false }
];
const dataB = [
  { id: 3, active: true },
  { id: 4, active: true }
];

// activeがtrueの要素だけを結合
const mergedData = dataA.reduce((acc, current) => {
  if (current.active) {
    return acc.concat(current);
  }
  return acc;
}, []).concat(
  dataB.filter(item => item.active)
);

console.log(mergedData);
// [{ id: 1, active: true }, { id: 3, active: true }, { id: 4, active: true }]

ここでは、dataA の要素で active が true のものだけを acc という蓄積用変数に入れています。
最後に、dataB の active が true の要素もまとめて結合しています。
こういった柔軟な操作が必要な場合は、reduce() と他のメソッドを組み合わせるとよいでしょう。

パフォーマンスについて考える

配列が少数なら問題は起きにくいですが、実務では数万件、数十万件など大規模なデータを扱うケースも出てきます。
そんなとき、配列結合の方法によっては処理時間に大きな差が生じることがあります。

たとえば、concat() は新しい配列を生成するため、元の配列が大きいほどメモリ使用量が増えることがあります。
一方で、push() は元の配列を上書きし続けるため、一度に要素を追加し続ける処理としては高速な場合もあります。

ただし、コードの可読性や保守性とのバランスを考えずに、闇雲にパフォーマンスを追求するのは得策ではありません。
まずはわかりやすい方法で実装してから必要に応じて最適化する、というのが多くの現場での流れです。

膨大なデータを扱うときには、結合する前に不要な要素をフィルタリングしたり、バックエンドとのやり取りを工夫して過剰な配列生成を避ける工夫が必要です。

結合に関連する便利な配列メソッド

配列結合と近い用途で便利なメソッドを補足しておきます。
結合と併せて覚えておくと、より効率的に配列を扱えるようになるはずです。

join()と結合の違い

join() は配列の全要素を文字列として連結するメソッドです。
配列を単なる文字列に変換してしまうため、今回のように配列同士を結合する目的ではありません。
しかし、「配列の要素を ' - ' でつなげた文字列を一括生成したい」などの場合に有効です。


const fruits = ['Apple', 'Banana', 'Cherry'];
const fruitsString = fruits.join(', ');
console.log(fruitsString); // "Apple, Banana, Cherry"

配列を扱う上で、結合とjoin()を混同しないようにしておきましょう。
join()は実際に配列を合体させるわけではなく、一時的に文字列を作りたいときに使うメソッドです。

array.flat()との比較

array.flat() は、ネストされた配列を平坦化（フラット化）するメソッドです。
たとえば、[[1, 2], [3, 4]] のような配列を [1, 2, 3, 4] として扱いたい場合などに便利です。
ただし、複数の配列を結合すること自体を目的とした機能ではありません。


const nestedArray = [1, [2, 3], [4, 5, [6, 7]]];
// デフォルトだと1階層だけフラット化
console.log(nestedArray.flat()); // [1, 2, 3, 4, 5, [6, 7]]

// 引数に2を指定すると2階層ネストもフラット化
console.log(nestedArray.flat(2)); // [1, 2, 3, 4, 5, 6, 7]

配列の結合をしたいときにはスプレッド構文やconcat()が王道ですが、
もし深いネストを一気に解除するようなケースがあるなら flat() も覚えておくと良いでしょう。
少しニュアンスが異なるものの、実務では意外と「一つのリストにまとまりとして扱いたい」というニーズに応えてくれます。

まとめ

いかがでしたでしょうか。
ここまで、JavaScriptで配列を結合する方法を中心に、具体的なコード例や注意点、そして応用的なメソッドの使い方についても解説してきました。

特に、concat() や スプレッド構文 はよく使われるので、実務で迷ったときにもすぐに役立つはずです。
そして、元の配列を変更するかどうかという点には常に気をつけながら、プロジェクトごとに最適な手段を選びましょう。

また、大規模なデータを扱う場合はパフォーマンス面にも配慮が必要です。
わかりやすいメソッド選択やコードの保守性を優先しつつ、必要なときに最適化を検討するのがおすすめです。

皆さんが今後、Webアプリやサーバーサイドの開発で複数の配列を取り扱うシーンに出会ったとき、今回解説した内容が参考になれば嬉しいです。
配列はとてもよく使う基本要素のひとつなので、ぜひいろいろな方法を試して習得してみてください。