✅ スプレッド構文（...）とは？

スプレッド構文は、配列やオブジェクトの中身を展開（分解）する構文です。 主に以下のような使い方があります：

• 配列やオブジェクトのコピー
• 要素の追加・結合
• 関数の引数展開

✅ 基本構文

const newArray = [...array];
const newObject = { ...object };

• ... を使うことで「中身を展開」できる
• 配列にもオブジェクトにも使える

✅ スプレッド構文の特徴

• 元の配列・オブジェクトを壊さずにコピーできる（非破壊的）
• 配列の結合やオブジェクトのマージに便利
• 関数の引数に配列を展開して渡すことができる

✅ 練習

コピペではなく実際に打ち込んで練習してみましょう。

1. 配列のコピー

const arr1 = [1, 2, 3];
const arr2 = [...arr1];

console.log(arr2); // [1, 2, 3]
console.log(arr1 === arr2); // false（別の配列）

2. 配列の結合

const a = [1, 2];
const b = [3, 4];
const merged = [...a, ...b];

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

3. 要素の追加

const nums = [2, 3];
const extended = [1, ...nums, 4];

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

4. オブジェクトのコピーと追加

const user = { name: "Taro", age: 25 };
const copied = { ...user };
const updated = { ...user, age: 30 };

console.log(copied);  // { name: "Taro", age: 25 }
console.log(updated); // { name: "Taro", age: 30 }

5. 関数の引数として展開

const numbers = [3, 5, 9];
console.log(Math.max(...numbers)); // 9

✅ 練習のコツ

• 深いネストがある配列やオブジェクトは、スプレッドだけでは完全コピーにならない（shallow copy）
• スプレッドを使うことで、元のデータを壊さず加工できる
• ... の意味は「中身を展開して並べる」ことだと意識すると使いやすくなる

✅ まとめ（スプレッド構文）

• ... を使って配列・オブジェクトの中身を展開
• コピー・結合・追加・関数の引数などに使える
• 非破壊的で便利、使い所が非常に多い