1. JavaScript のスプレッド構文とは

スプレッド構文は 「...」を使って配列やオブジェクトを展開するための記法 です。
🔍 「展開」とは？
👉 配列やオブジェクトの中身を、その場に広げて使えるようにすること

const arr = [1, 2, 3];
console.log(...arr);
// 出力: 1 2 3   ← 配列の要素が展開されて並ぶ

🔍 なぜ展開する必要があるのか？
👉配列やオブジェクトは「そのまま」ではひとまとまりのデータとして扱われます。
そのため、関数に渡すときなどに意図通りに動かないことがあります。

配列をそのまま渡した場合

function sum(a, b, c) {
  return a + b + c;
}

const arr = [1, 2, 3];

console.log(sum(arr)); // NaN

なぜ NaN になるのか？

sum(arr) と書くと引数は 1つだけ。渡される実際の中身はこうなる↓

a = [1, 2, 3]
b = undefined
c = undefined

🚩 まとめ

配列をそのまま渡す → 「配列1個」を引数として渡す
スプレッド構文で渡す → 配列の中身を「個々の要素」として渡す

sum(arr)      → a = [1,2,3], b = undefined, c = undefined
sum(...arr)   → a = 1, b = 2, c = 3

2. スプレッド構文とその使用方法

✅ 配列での使い方

コピー

const arr = [1, 2, 3];
const copy = [...arr];

copy.push(4);

console.log(arr);  // [1, 2, 3]   ← 元の配列はそのまま
console.log(copy); // [1, 2, 3, 4]
 // 新しい配列を作れるので、元の配列が壊れない

結合

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

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

✅ オブジェクトでの使い方

コピー

const obj = { a: 1, b: 2 };
const copy = { ...obj };

console.log(copy); // { a: 1, b: 2 }

結合

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2 };

console.log(merged); // { a: 1, b: 2, c: 3, d: 4 }

関数呼び出しでの利用

function sum(x, y, z) {
  return x + y + z;
}

const nums = [1, 2, 3];
console.log(sum(...nums)); // 6

3. 使用上の注意点

✅ 無効なデータ型への展開はエラーになる

スプレッド構文はオブジェクト型（配列やオブジェクトなど）にのみ使用できます。
プリミティブ型の値（文字列や数値など）に対して使用すると、エラーが発生します。

✅ 重複する部分は上書きされる

複数のオブジェクトをマージする場合、後から書いた方が優先されます。

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 100, c: 200 };

const merged = { ...obj1, ...obj2 };

console.log(merged); // { a: 1, b: 100, c: 200 }

4. 参考資料 📚