JavaScriptを学習していると、

2つの配列を1つにまとめたい！

という場面が出てきます。
今回は「冷たい飲み物」と「温かい飲み物」を1つにまとめる例で解説します。

🎯 サンプル配列

let coldDrinks = ["グレープ", "メロンソーダ", "コーラ"];
let hotDrinks = ["コーヒー", "カフェラテ"];

この2つを1つの配列にまとめたいとします。

❌ ＋演算子では配列は結合できない

まずやりがちな間違いです。

let result = coldDrinks + hotDrinks;
console.log(result);

出力結果：

グレープ,メロンソーダ,コーラコーヒー,カフェラテ

あれ？
配列ではなく、文字列になってしまいました。

なぜ？

+ は

• 数値 → 足し算
• 文字列 → 連結

として動きます。
配列に + を使うと、自動的に文字列に変換されてしまいます。

👉 配列同士を＋で結合することはできません。

✅ 方法① concat() を使う

正しい方法の1つ目は concat() です。

let result = coldDrinks.concat(hotDrinks);
console.log(result);

出力結果：

["グレープ", "メロンソーダ", "コーラ", "コーヒー", "カフェラテ"]

ポイント

• 元の配列は変更されない
• 新しい配列が作られる

安全に結合できます。

✅ 方法② スプレッド構文（今はこちらが主流）

最近はこちらの書き方がよく使われます。

const result = [...coldDrinks, ...hotDrinks];
console.log(result);

同じ結果になります。

🔎 スプレッド構文とは？

... は「中身を展開する」という意味です。

[...coldDrinks]

は、

["グレープ", "メロンソーダ", "コーラ"]

と同じ意味になります。
それを2つ並べているだけです。

🎯 まとめ

配列を結合する方法は次の2つ。

✔ concat()

coldDrinks.concat(hotDrinks);

✔ スプレッド構文（おすすめ）

[...coldDrinks, ...hotDrinks];

❌ ＋演算子は使えない

coldDrinks + hotDrinks // NG

🔥 言語ごとのルールの違いを知ろう

JavaScriptでは、+ 演算子は
「数値の計算」や「文字列の連結」に使われます。

一方、Rubyなどの言語では、+ を使って配列を結合することもできます。

つまり、

同じ「＋」でも、言語によって役割が違う

ということです。

プログラミングでは、「前に使えたから今回も使えるはず」と考えるのではなく、
その言語のルールを確認する習慣がとても大切です。