配列・オブジェクトから変数に値を取り出す構文
// ── 配列の分割代入: 位置で変数に取り出す ──────────────
const [first, second, ...rest] = [10, 20, 30, 40, 50];
console.log(first); // 10
console.log(second); // 20
console.log(rest); // [30, 40, 50] ← 残りをまとめて取得
// 使わない要素はカンマで飛ばせる
const [, , third] = ['a', 'b', 'c']; // third = 'c'
// ── オブジェクトの分割代入: 名前で取り出す ────────────
const user = { name: '田中', age: 25, city: '東京' };
const { name, age } = user; // name = '田中', age = 25
// 別名で取り出す: { 元の名前: 新しい名前 }
const { name: userName, age: userAge } = user;
// デフォルト値（プロパティがない場合に使われる）
const { role = 'user' } = user; // user.role がないので 'user'
// ── ネストしたオブジェクトの分割代入 ─────────────────
const config = { db: { host: 'localhost', port: 5432 } };
const { db: { host, port } } = config;
console.log(host); // 'localhost'
console.log(port); // 5432
// ── 関数引数での分割代入（Reactのpropsでよく使う）────
function UserCard({ name, age, role = 'user' }: {
name: string; age: number; role?: string;
}) {
return <div>{name}（{age}歳 / {role}）</div>;
デフォルト値・ネスト・リネーム（{ name: myName }）が組み合わせられる。APIレスポンスの分解や関数引数の名前付きパラメータに多用される。