スプレッド構文
中級読み方：スプレッドこうぶん｜英語：Spread
配列やオブジェクトを展開する ... の構文で、コピーや結合に便利だよ。いつ使う？ 配列のコピーを作りたい、2つの配列を結合したい、オブジェクトの一部を上書きしたいときに使うよ。Reactのstate更新でも必須だよ。間違いやすいポイント: スプレッドは浅いコピー（シャローコピー）だよ。ネストしたオブジェクトは参照が共有されるから、深いコピーが必要ならstructuredClone()を使おう。
やさしい説明
スプレッド構文（...）は、配列やオブジェクトを「展開」する書き方です。中身をバラバラにして別の場所に広げるイメージです。
配列のコピー、配列の結合、オブジェクトのマージ（合体）に使います。元のデータを変更せずに新しいデータを作れるので、Reactの状態管理でも頻繁に使います。
レスト構文（残りをまとめる）としても使えます。関数の引数で「残りの引数をまとめて受け取る」ときに便利です。
具体例・使い方
// 配列のコピー
const copy = [...original];
// 配列の結合
const all = [...arr1, ...arr2];
// オブジェクトのマージ（後が優先）
const updated = { ...user, age: 16 };
// レスト構文（残りをまとめる）
const [first, ...rest] = [1, 2, 3, 4];
// first → 1, rest → [2, 3, 4]いつ使う？
配列やオブジェクトのコピー、React の setState で状態を更新するとき、関数に配列を引数として渡すとき（Math.max(...numbers)）に使います。
間違いやすいポイント
❌ スプレッドは浅いコピー（シャローコピー）
const obj = { a: { b: 1 } };
const copy = { ...obj };
copy.a.b = 99;
obj.a.b; // 99！（ネストしたオブジェクトは共有される）
// 深いコピーが必要ならstructuredClone(obj)を使うよくある疑問
Q: 配列のスプレッドの使い方は？
A: コピー: [...arr]、結合: [...arr1, ...arr2]、要素追加: [...arr, newItem]。元の配列は変更されません。
Q: オブジェクトのスプレッドの使い方は？
A: コピー: {...obj}、上書き: {...obj, name: '新しい名前'}。後に書いたプロパティが優先されます。
Q: レスト構文との違いは？
A: スプレッド(...)は展開、レスト(...)は残りをまとめる。const [first, ...rest] = arr; のrestがレスト構文です。見た目は同じですが役割が逆です。
関連用語
📖 関連レッスン
レッスンを見る →