【TypeScript】配列を結合する3つの方法を徹底解説！concatとスプレッド演算子の使い分け

実務経験半年以上のエンジニア探してます！

>> 【急募】C# または TypeScript エンジニア募集（完全フルリモート）

こんにちは！

TypeScriptでプログラミングをしていると、複数の配列を1つにまとめたいという場面に頻繁に出会います。

配列を結合する方法っていくつかあるみたいだけど、どれを使えばいいの?

concatとスプレッド演算子、どっちが良いのかな?

パフォーマンスの違いってあるの?

TypeScriptでの配列の結合について、このような疑問をお持ちではないでしょうか。

この記事では、TypeScriptにおける配列結合の方法について、基本的な使い方から、それぞれの特徴、そして実際の使い分けまでを詳しく解説します。

この記事は次のような方におすすめです。

この記事はこんな人におすすめ!

TypeScriptで配列を結合する方法を知りたい方
concatとスプレッド演算子の違いを理解したい方
状況に応じた最適な配列結合の方法を学びたい方
TypeScriptの基礎を固めたい初学者の方
コードの可読性を向上させたいと考えている開発者の方

この記事を読めば、TypeScriptで配列を結合する複数の方法と、それぞれのメリット・デメリットが分かります。適切な方法を選択することで、より読みやすく効率的なコードを書けるようになりましょう。

「配列の結合方法を正しく使い分けたい方」「TypeScriptのコードをレベルアップしたい方」は、ぜひ参考にしてください。

それでは、順を追って詳しく見ていきましょう！

Contents

TypeScriptで配列を結合する必要性
配列を結合する3つの基本的な方法
concatとスプレッド演算子の違い
実際のユースケース
配列結合時の注意点
まとめ

TypeScriptで配列を結合する必要性

プログラミングでは、データを配列で管理することが多くあります。例えば、ユーザーのリスト、商品のリスト、検索結果のリストなど、様々なデータが配列として扱われます。

これらの配列を扱う際に、複数の配列を1つにまとめる必要性が頻繁に発生します。

配列を結合する典型的なケースには次のようなものがあります。

APIから取得した複数のデータセットを統合する場合に使います。
既存のリストに新しい要素を追加する場合に使います。
フィルタリングした結果を元の配列と組み合わせる場合に使います。
ページネーション（ページ分割）されたデータをまとめて表示する場合に使います。

TypeScriptには配列を結合するための方法がいくつか用意されており、状況に応じて使い分けることが重要です。

配列を結合する3つの基本的な方法

TypeScriptで配列を結合するには、主に3つの方法があります。それぞれの特徴を理解することで、適切な方法を選択できるようになります。

方法1：concatメソッドを使う

concatメソッドは、配列を結合するための伝統的な方法です。元の配列を変更せずに、新しい配列を返します。

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

const combined = array1.concat(array2);

console.log(combined);
// 出力: [1, 2, 3, 4, 5, 6]

console.log(array1);
// 出力: [1, 2, 3] (元の配列は変更されない)

このコードでは、array1とarray2を結合して新しい配列combinedを作成しています。元の配列array1とarray2は変更されません。

複数の配列を一度に結合する

concatメソッドは、複数の配列を引数として受け取ることができます。

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

const combined = array1.concat(array2, array3);

console.log(combined);
// 出力: [1, 2, 3, 4, 5, 6]

この方法を使えば、3つ以上の配列も簡単にまとめることができます。

方法2：スプレッド演算子（…）を使う

スプレッド演算子は、現代のTypeScript/JavaScriptで最も広く使われている配列結合の方法です。...という記号を使って、配列の要素を展開します。

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

const combined = [...array1, ...array2];

console.log(combined);
// 出力: [1, 2, 3, 4, 5, 6]

スプレッド演算子を使うと、コードがシンプルで読みやすくなります。また、配列の途中に要素を挿入することも簡単にできます。

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

const combined = [...array1, 3, 4, ...array2];

console.log(combined);
// 出力: [1, 2, 3, 4, 5, 6]

このように、スプレッド演算子は柔軟な配列操作を可能にします。

方法3：pushメソッドと組み合わせる

既存の配列に別の配列の要素を追加したい場合は、pushメソッドとスプレッド演算子を組み合わせる方法があります。

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

array1.push(...array2);

console.log(array1);
// 出力: [1, 2, 3, 4, 5, 6]

この方法は元の配列を直接変更します。新しい配列を作成する必要がない場合に有効です。

ただし、元の配列が変更されるため、イミュータブル（不変）なコードを書く場合には注意が必要です。

concatとスプレッド演算子の違い

concatメソッドとスプレッド演算子は、どちらも配列を結合できますが、いくつかの違いがあります。

可読性の違い

スプレッド演算子を使ったコードは、視覚的にシンプルで読みやすいという特徴があります。

// concatメソッド
const result1 = array1.concat(array2, array3);

// スプレッド演算子
const result2 = [...array1, ...array2, ...array3];

どちらも同じ結果を返しますが、スプレッド演算子の方が配列リテラル[]の中で要素を展開しているため、配列を作成していることが一目で分かります。

柔軟性の違い

スプレッド演算子は、配列の任意の位置に要素を挿入できるため、より柔軟な操作が可能です。

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

// 配列の間に要素を追加
const result = [...array1, 3, 4, ...array2, 7];

console.log(result);
// 出力: [1, 2, 3, 4, 5, 6, 7]

concatメソッドでも同様のことは可能ですが、コードがやや冗長になります。

const result = array1.concat([3, 4], array2, [7]);

パフォーマンスの違い

実行環境によって、パフォーマンスに違いが出ることがあります。

一部のJavaScriptエンジン（V8など）では、concatメソッドの方がスプレッド演算子よりも高速に動作する場合があります。特に、結合する配列の数が多い場合や、配列のサイズが大きい場合には、その差が顕著になることがあります。

ただし、通常のアプリケーション開発では、この速度差が実際の問題になることはほとんどありません。可読性や保守性を優先して、スプレッド演算子を使うことが一般的です。

実際のユースケース

それでは、実際の開発でよくある場面での配列結合の例を見てみましょう。

ケース1：APIから取得したデータの統合

複数のAPIエンドポイントからデータを取得し、1つのリストとして表示する場合です。

async function fetchAllUsers() {
  const response1 = await fetch('/api/users?page=1');
  const users1 = await response1.json();

  const response2 = await fetch('/api/users?page=2');
  const users2 = await response2.json();

  // スプレッド演算子で統合
  const allUsers = [...users1, ...users2];

  return allUsers;
}

この例では、2つのページからユーザー情報を取得し、スプレッド演算子で1つの配列にまとめています。

ケース2：初期データと追加データの結合

既存のデータに新しいデータを追加する場合です。

let todoList = ['買い物に行く', 'メールを返信する'];

// 新しいタスクを追加
const newTasks = ['レポートを作成する', '会議の準備をする'];

todoList = [...todoList, ...newTasks];

console.log(todoList);
// 出力: ['買い物に行く', 'メールを返信する', 'レポートを作成する', '会議の準備をする']

スプレッド演算子を使うことで、元のリストを保ちながら新しいリストを作成できます。

ケース3：配列の重複を排除しながら結合

2つの配列を結合する際に、重複する要素を取り除きたい場合があります。

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

// Setを使って重複を排除
const combined = [...new Set([...array1, ...array2])];

console.log(combined);
// 出力: [1, 2, 3, 4, 5, 6]

この例では、スプレッド演算子で配列を結合した後、Setオブジェクトを使って重複を取り除いています。

配列結合時の注意点

配列を結合する際には、いくつかの注意すべき点があります。

多次元配列の結合

配列の中に配列が含まれている場合（多次元配列）、結合の仕方に注意が必要です。

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

const combined = [...array1, ...array2];

console.log(combined);
// 出力: [[1, 2], [3, 4], [5, 6]]

この場合、内側の配列はそのまま保持されます。すべての要素を1次元配列にしたい場合は、flatメソッドを使います。

const combined = [...array1, ...array2].flat();

console.log(combined);
// 出力: [1, 2, 3, 4, 5, 6]

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

配列の要素がオブジェクトの場合も、基本的な結合方法は同じです。

const users1 = [
  { id: 1, name: '太郎' },
  { id: 2, name: '花子' }
];

const users2 = [
  { id: 3, name: '一郎' }
];

const allUsers = [...users1, ...users2];

console.log(allUsers);
// 出力: [{ id: 1, name: '太郎' }, { id: 2, name: '花子' }, { id: 3, name: '一郎' }]

ただし、結合後の配列内のオブジェクトは元の配列のオブジェクトと同じ参照を持ちます。オブジェクトを変更する場合は、この点に注意が必要です。

型の安全性を保つ

TypeScriptでは、配列の型を明示的に指定することで、より安全なコードを書くことができます。

const numbers1: number[] = [1, 2, 3];
const numbers2: number[] = [4, 5, 6];

const combined: number[] = [...numbers1, ...numbers2];

型を指定しておくことで、異なる型の要素が混ざってしまうことを防ぐことができます。

【付録】さらに学びを深めるためのリソース

さらにTypescriptの学習を進めたい方のために、いくつかのリソースを紹介します。
これらのリソースを活用することで、TypeScriptの型システムについてより深い知識を得ることができるでしょう。

オンラインで参照できる公式ドキュメント

TypeScript公式ハンドブック

https://www.typescriptlang.org/docs/
TypeScriptの公式ドキュメントです。
intersection型を含む、すべての型システムの機能について詳細な説明があります。

TypeScript Deep Dive

https://basarat.gitbook.io/typescript/
TypeScriptの深い部分まで掘り下げて解説しているオンラインブックです。
無料で読むことができ、intersection型についても詳しく説明されています。

TypeScriptの学習は終わりがありません。
新しい機能が常に追加され、より良い書き方が発見されています。
継続的に学習を続けることで、より良いTypeScriptプログラマーになれるはずです。

キャリア形成/給与還元
ひとつひとつ真摯に向き合う企業