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