1. 配列を結合するとは？

配列は複数のデータをまとめたものですが、時には別々の配列を一つにまとめたいことがあります。例えば、果物のリストと野菜のリストが別々にあって、それを一緒にしたい場合などです。このように配列をつなげて一つにすることを「結合」と言います。

2. concatメソッドで配列を結合する方法

concatは配列に対して使う「他の配列や値をつなげる」ためのメソッドです。使い方は簡単で、つなげたい配列や値をconcatのかっこ内に入れます。


let fruits = ["りんご", "みかん"];
let vegetables = ["にんじん", "キャベツ"];

let food = fruits.concat(vegetables);
console.log(food);  // ["りんご", "みかん", "にんじん", "キャベツ"]

この例では、fruits配列にvegetables配列をつなげて、新しい配列foodを作っています。元の配列は変わらず、新しい配列が作られる点に注意しましょう。

3. スプレッド構文を使った配列の結合

スプレッド構文は、配列やオブジェクトの中身を「広げる」ことができる記号のことで、三つの点 ... で表します。これを使うと配列の中身を簡単に他の配列に入れられます。


let fruits = ["りんご", "みかん"];
let vegetables = ["にんじん", "キャベツ"];

let food = [...fruits, ...vegetables];
console.log(food);  // ["りんご", "みかん", "にんじん", "キャベツ"]

この方法はconcatよりも書き方がシンプルで、複数の配列をまとめるのに便利です。複数の配列を同時に広げて結合できます。

4. concatとスプレッド構文の違い

concatもspread構文も新しい配列を作る点は同じですが、書き方の違いで使い分けができます。concatは古くからある方法で読みやすく、スプレッド構文はモダンなJavaScriptで特に複数配列の結合に便利です。

例えば、たくさんの配列をまとめたいときはスプレッド構文の方がすっきり書けます。

5. 配列の値を直接追加する場合

結合だけでなく、配列に新しい値を加えたい時もあります。スプレッド構文なら次のように配列の間に値も入れられます。


let fruits = ["りんご", "みかん"];

let newFruits = [...fruits, "バナナ", "ぶどう"];
console.log(newFruits);  // ["りんご", "みかん", "バナナ", "ぶどう"]

このように配列の中に直接値を追加して新しい配列を作ることもできます。

6. 元の配列は変わらない

注意したいのは、concatもスプレッド構文も元の配列はそのままで、新しく結合した配列を返すだけだということです。元の配列を直接書き換えたい場合は別の方法が必要ですが、基本は新しい配列を作るこのやり方が安全でよく使われます。

まとめ

配列を結合する考え方を振り返ろう

この記事では、JavaScriptにおける配列の結合方法について、concatメソッドとスプレッド構文を中心に学んできました。配列は複数のデータを順番にまとめて扱える便利な仕組みですが、実際の開発では「別々に用意した配列を一つにまとめたい」という場面が頻繁に登場します。たとえば、画面表示用のデータをまとめたり、条件ごとに分けて取得した配列を最終的に一つに整理したりするケースです。

まず理解しておきたいのは、「配列を結合する」とは、元の配列同士をくっつけて新しい配列を作る操作だという点です。どちらの方法を使っても、元の配列そのものが書き換えられることはなく、新しい配列が作られるという共通点があります。この特徴は、思わぬデータの書き換えを防ぐ意味でも、とても重要なポイントです。

concatとスプレッド構文の使い分け

concatメソッドは、昔から使われてきた配列結合の基本的な方法です。書き方がシンプルで、「この配列に、あの配列をつなげる」という意味がコードから直感的に読み取れるため、初心者にも理解しやすいのが特徴です。一つずつ順番に配列を結合したい場合や、処理の流れをはっきり見せたいときに向いています。

一方、スプレッド構文は配列の中身を展開して結合できる、比較的新しい書き方です。複数の配列をまとめて結合したり、配列の途中や末尾に値を追加したりできるため、柔軟で読みやすいコードを書きやすくなります。配列をそのまま並べる感覚で書けるので、慣れてくると直感的に使えるようになります。


// concatを使った結合
let a = [1, 2];
let b = [3, 4];
let result1 = a.concat(b);

// スプレッド構文を使った結合
let result2 = [...a, ...b];

console.log(result1); // [1, 2, 3, 4]
console.log(result2); // [1, 2, 3, 4]

結果は同じでも、書き方や考え方が少し違うことが分かります。どちらが正解というわけではなく、「読みやすいか」「あとから見て分かりやすいか」を基準に選ぶことが大切です。