分割代入（構造の分解）とは何か
分割代入は、オブジェクトや配列から「必要な部分だけ」を抜き出して、変数に一気に割り当てる書き方です。ここが重要です：オブジェクトは“キー名で取り出す”、配列は“位置で取り出す”。重複したアクセスコードを減らし、意図がひと目で分かる読みやすいコードになります。
const user = { id: 1, name: "Alice", active: true };
const { id, name } = user; // id=1, name="Alice"
オブジェクトの基本分割（キー名で取り出す）
そのまま取り出す
const product = { name: "Pen", price: 120 };
const { name, price } = product;
取り出しながら“別名”にする
const user = { id: 1, name: "Alice" };
const { id: userId, name: displayName } = user; // userId=1, displayName="Alice"
ここが重要です：右側のキー名は“元のオブジェクトのキー”、左側は“新しい変数名”。キーと変数名を揃えないときに使います。
“既定値”を設定する
const cfg = { retry: 3 }; // timeout が無い
const { retry = 1, timeout = 5000 } = cfg; // retry=3, timeout=5000
ここが重要です：既定値は「値が undefined のときだけ」使われます。null や 0、”” は“値がある”扱いで既定値は使われません。
ネストの分割（入れ子を安全に取り出す）
入れ子のキーを直接取り出す
const order = { customer: { id: 10, name: "Alice" } };
const { customer: { name } } = order; // name="Alice"
ネストが“無いかも”への安全策
const order = {}; // customer が無い可能性
const { customer: { name } = {} } = order; // name は undefined（例外にならない）
ここが重要です：中間の欠損でエラーにしないために、ネストの受け皿に空オブジェクトの既定値 = {} を置きます。分割代入ではオプショナルチェーン（?.）は使えないため、このパターンが実務定番です。
“残り”をまとめて受ける（restパターン）
指定したキー以外をひとまとめに
const user = { id: 1, name: "Alice", password: "secret", role: "admin" };
const { password, ...publicUser } = user;
// publicUser: { id:1, name:"Alice", role:"admin" }
ここが重要です：...rest は“残り全部”を受け取ります。浅いコピーなので、内側のオブジェクトは参照共有です。
関数パラメータでの分割（オプション引数に最適）
オプション引数の既定値と分割を同時に
function setup(options = {}) {
const { retry = 2, timeout = 5000, verbose = false } = options;
// ...
}
ここが重要です：呼び出し側が何も渡さなくても安全。キーごとの既定値を定義でき、読みやすさが段違いになります。
パラメータ位置で直接分割する
function connect({ host = "localhost", port = 8080 } = {}) {
// host, port が変数として利用可能
}
配列の分割（位置で取り出す）
基本の位置取り
const point = [10, 20];
const [x, y] = point; // x=10, y=20
スキップと既定値
const arr = [1];
const [first, , third = 0] = arr; // first=1, third=0
ここが重要です：配列は“順番”がすべて。位置がずれる設計なら、オブジェクト（キー名）にするほうが安全です。
よくある落とし穴（重要ポイントの深掘り）
既定値は“undefined のときだけ”
const obj = { a: null, b: 0, c: undefined };
const { a = 1, b = 2, c = 3 } = obj; // a=null, b=0, c=3
null や 0 は“値あり”。既定値は発動しません。必要なら ??（null合体）を使って代入後に上書きします。
const { a } = obj;
const aSafe = a ?? 1;
中間欠損で例外になる
// NG: order.customer が undefined のとき TypeError
// const { customer: { name } } = order;
// OK: 受け皿に {} を与える
const { customer: { name } = {} } = order;
既存変数への再分割は“括弧が必要”
let a, b;
({ a, b } = { a: 1, b: 2 }); // 文頭がブロックに見えるため丸括弧で包む
キーが存在しないと“undefined”
分割は“キーがなければ undefined”。存在チェックが必要なら、事前に Object.hasOwn(obj, "key") を使うか、既定値を設定します。
実践レシピ（読みやすさと安全性を両立）
入力検証と取り出しを分ける
function validateUser(u) {
return u && typeof u.id === "number" && typeof u.name === "string";
}
function useUser(u) {
if (!validateUser(u)) throw new Error("invalid");
const { id, name } = u;
// 安心して使える
}
APIレスポンスの整形（不要フィールドを落とす）
function toPublicUser(u) {
const { password, token, ...publicUser } = u;
return publicUser;
}
ネストの部分抽出＋既定値
const payload = { config: { locale: "ja" } };
const {
config: {
locale = "en",
theme = "light"
} = {}
} = payload;
まとめ
分割代入は「必要なフィールドだけを、短く安全に取り出す」ための基本テクニックです。オブジェクトはキー名で、配列は位置で取り出す。既定値は“undefined のときだけ”発動、ネストは“受け皿に {}”で例外を防ぐ。...rest で残りをまとめ、関数パラメータでの分割＋既定値はオプション引数に最適。落とし穴（中間欠損、既存変数への再代入、既定値の条件）を理解すれば、初心者でも読みやすく壊れにくいデータ取り回しが書けます。