分割代入とスプレッド構文
なぜ学ぶか： const { data } = ...や{...user} — AIのコードはこの記法だらけです。知らないと「謎の波カッコ」に見えますが、正体は「取り出す」と「広げる」の2つだけ。まずは例から。
まずはこの例を見てみましょう
const user = { name: "Ada", age: 36 };
// 分割代入: 中身を取り出す
const { name, age } = user;
name; // → "Ada"
// スプレッド: 中身を広げて「新しい」オブジェクトを作る
const older = { ...user, age: 37 };
older.age; // → 37
user.age; // → 36（元の user は変わらない！）「取り出す」と「広げて新しく作る」。この2つが読めると、コードを読む速度が一気に上がります。
{ }を=の左に書くと「取り出し」
例のconst { name, age } = userは「userの中のnameとageを取り出す」。user.nameと何度も書く手間を省けます。
...は「中身を広げる」
{ ...user, age: 37 }は「userの中身を全部写して、ageだけ変えた新しいオブジェクト」を作ります。
元は変わらない、が大事
例の最後で、元のuserのageが36のままな点に注目。「元を変えずに新しく作る」は、この後のReactで大原則になります。
ステップ 1 / 3
※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。