スプレッド構文 とは？

たとえば2つの配列を合体させたいとき。従来は「arr1.concat(arr2)」と書いていたのが、スプレッド構文なら「[...arr1, ...arr2]」で済むんだ。オブジェクトのコピーも「{...obj}」で簡単にできる。中身を「バラバラにして広げる」イメージだよ。

まさにそれが得意技だよ！「{...user, name: '新しい名前'}」と書くと、元のuserオブジェクトはそのままで、nameだけ変更した新しいオブジェクトが作れるんだ。元のデータを壊さない「イミュータブル」な書き方で、ReactのState管理なんかで大活躍するよ。

一番のハマりポイントは「浅いコピー（シャローコピー）」しかできないことだよ。オブジェクトの中にさらにオブジェクトがある場合、内側のオブジェクトは参照がコピーされるだけで実体は共有されたままなんだ。深い階層のデータを完全にコピーしたいときはstructuredClone()を使うか、ライブラリの力を借りる必要があるよ。

見た目は同じ「...」だけど、使う場所で意味が逆になるんだ。スプレッド構文は「展開（バラバラにする）」、レスト構文は「集約（まとめる）」だよ。たとえばconst [first, ...rest] = [1,2,3]のようにレストパラメータで使うと、firstに1が入り、restに[2,3]がまとまる。関数の引数でもfunction sum(...nums)のように使えるよ。

大きなオブジェクトや配列を毎回スプレッドするとコピーコストがかかるよ。Reactで状態更新のたびに巨大なオブジェクトを{...state}するのは非効率。そういう場合はimmerライブラリを使うと内部的に構造共有して効率よく更新できる。また、配列の結合で[...arr1, ...arr2]よりarr1.concat(arr2)の方が大量データでは速い場合もある。パフォーマンスが問題になったら計測して判断しようね。