JavaScript・TypeScriptで2つの配列をまとめる方法【簡単】

JavaScriptやTypeScriptで配列を扱う際に、2つの配列同士を1つに結合したい時ってありますよね。

例えば、['a', 'b', 'c']という配列と['d', 'e', 'f']という配列をまとめて、['a', 'b', 'c', 'd', 'e', 'f']という配列を作る場合です。

パッと思いつくのはこんな感じでしょうか？

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
array2.forEach(element => {
    array1.push(element);
})
console.log('array1 =>', array1);
// array1 => ["a", "b", "c", "d", "e", "f"]

一方の配列からforEachで要素を取り出して、もう一つの配列にpushしてもまとめることはできます。

しかし、せっかくならもう少しサクッと結合したいですよね。

実はJavaScriptには便利なメソッドがありますので、それを使えばお手軽に配列をまとめることができますよ。
もちろん、TypeScriptでも大丈夫です。

そんなわけで、今回はJavaScriptやTypeScriptで配列同士を結合する方法についてご紹介しますね。

配列同士の結合にはconcat()が便利！

早速ですが、今回使うのはconcat()です。

concat() メソッドは、配列に他の配列や値をつないでできた新しい配列を返します。

MDN web docs：Array.prototype.concat()

説明にもある通り、配列同士を結合して新しい配列を返してくれる便利なメソッドです。

百聞は一見に如かず、ということで、実際にコードを書いてみましょう。

以下のようなコードを用意しました！

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const newArray = array1.concat(array2);
console.log('newArray =>', newArray);
// newArray => ["a", "b", "c", "d", "e", "f"]

出力を見ると、確かに2つの配列が1つにまとまっていますね！

これは既存の配列から新しい配列を作り出すものなので、以下のようにどんどん配列を生み出すこともできますよ。

const newArray1 = newArray.concat(array2);
console.log('newArray1 =>', newArray1);
// newArray1 => ["a", "b", "c", "d", "e", "f", "d", "e", "f"]

また、メソッドチェーンにも対応しているので、以下のように数珠つなぎにすることもできます。
これで3つ以上の配列を一度にまとめることができますね。

const array1 = ['つ', 'な', 'げ'];
const array2 = ['て', 'み', 'る'];
const array3 = ['よ', 'ー', '！'];
const newArray = array1.concat(array2).concat(array3);
console.log('newArray =>', newArray);
// newArray => ["つ", "な", "げ", "て", "み", "る", "よ", "ー", "！"]

concat()は新しい配列を返すので、既存の配列の中身は変わりません。

concat()はとても便利です。

しかし、プログラミングを始めたばかりの方や経験が浅い方の場合は1つ気をつけるポイントがあります。

例えば、以下のようなコードを書くとうまく動作してくれません。
なぜだかわかりますか？

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
array1.concat(array2);
console.log('array1 =>', array1);
// array1 => ["a", "b", "c"]
// 本当はこれが欲しい→["a", "b", "c", "d", "e", "f"]

正解は、このconcat()が新しく配列を生成して返却するメソッドだからです。
つまり、既存の配列の中身は変わらないのです。

push()の場合は既存の配列に追加するので、concat()も同じものだと勘違いする方もいらっしゃるかもしれませんね。

concat()の場合は新しい配列を返すので、受け皿となる新しい配列を宣言する必要があります。
以下のような感じですね。

const newArray = array1.concat(array2);

言われてみれば簡単なことかもしれませんが、意外と気づかずにはまってしまうこともあるので、気をつけてくださいね。

終わりに

今回はJavaScriptやTypeScriptで配列同士を結合する方法についてご紹介しました。

内容をまとめると以下のようになります。

今回はここまでです。それでは。