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. 参考資料 📚