分割代入: 値を取り出す

配列やオブジェクトから値を簡潔に取り出す。

分割代入
配列やオブジェクトから値を取り出す構文。
Rest
残りの要素をまとめて配列に。
デフォルト値
値がない時に使う初期値。

分割代入基礎

プレゼントを開ける

箱（オブジェクト/配列）から中身だけ取り出す。

Basic Destructuring
// 配列の分割代入
const [first, second, ...rest] = [1, 2, 3, 4, 5];
// first = 1, second = 2, rest = [3, 4, 5]


// オブジェクトの分割代入
const { name, age } = { name: 'Alice', age: 30 };


// デフォルト値
const { city = 'Unknown' } = user;


// リネーム
const { name: userName } = user;
Bad
// ❌ Bad: 長いアクセス
const name = props.user.name;
const age = props.user.age;
const email = props.user.email;
Good
// ✅ Good: 分割代入
const { name, age, email } = props.user;

よくあるパターン

Advanced Patterns
// 関数の引数で分割代入
function greet({ name, age }: User) {
    console.log(`Hi ${name}, you are ${age}`);
}


// ネスト
const { address: { city, zip } } = user;


// 配列とオブジェクトの組み合わせ
const [{ name }, { name: name2 }] = users;


// スワップ
[a, b] = [b, a];
Tip: React/Vue のコンポーネントの props でよく使う。

合格ライン

☐ 配列・オブジェクトの分割代入を書ける
☐ デフォルト値を設定できる

演習課題

課題1: 分割代入
オブジェクトと配列の分割代入を使ってください。
課題2: デフォルト値
デフォルト値を設定した分割代入を実装してください。