安全な分割とは何か
分割代入は「欲しい値だけ」を短く取り出せますが、未定義（undefined）や欠落、深いネスト、null、宣言順の問題で簡単にエラーになります。ここが重要です：安全な分割の基本は「外側の既定値を必ず付ける」「undefined と null の違いを理解する」「段階的に分割して読みやすさと堅牢性を両立する」ことです。
// 外側既定値を付けて、安全に取り出す
function connect({ host = "localhost", port = 5432 } = {}) {
return `postgres://${host}:${port}`;
}
console.log(connect()); // 欠けても安全
外側既定値を必ず付ける（undefined 対策の第一歩）
関数引数やネストに対して分割するとき、対象が undefined だと「Cannot destructure … of undefined」で落ちます。ここが重要です：外側に {} や [] の既定値を必ず付けて、足場を作ってから内側のプロパティ・要素にアクセスします。
// オブジェクト
const cfg = undefined;
const { ui = {}, api = {} } = cfg ?? {}; // 外側既定値（?? で null/undefined を補正）
const { theme = "light", fontSize = 16 } = ui;
const { base = "/api", timeout = 3000 } = api;
// 配列
const row = undefined;
const [id = 0, name = "", price = 0] = row ?? []; // 外側 []
// 関数パラメータは必ず外側既定値を付ける
function render({ title = "Untitled", author = "" } = {}) {
return `${title} by ${author}`;
}
console.log(render()); // 安全
undefined と null の違い（既定値発動の条件を理解する）
デフォルト（既定値）は「undefined」にだけ発動し、「null」には発動しません。ここが重要です：null も既定として扱いたい場合は、取り出した後で null 合体演算子（??）を使って補正します。
// 既定値は undefined のみ
const { rate = 0.1 } = { rate: undefined }; // 0.1
const { r = 0.1 } = { r: null }; // r = null（発動しない）
// null/undefined を同じ既定にする
const { rate } = { rate: null };
const safeRate = rate ?? 0.1; // 0.1
段階的分割（深いネストを安全に読む）
一行で深い構造を解体しすぎると、欠落に弱く読みづらくなります。ここが重要です：上位の塊を先に安全に取り出し、次に内側を分割する「段階的」アプローチで、可読性と堅牢性を両立します。
const data = { user: { id: 7, profile: { name: "Alice" } } };
// 段階的分割（推奨）
const { user = {} } = data;
const { id = 0, profile = {} } = user;
const { name = "" } = profile;
console.log(id, name); // 7 "Alice"
// 一行で書くなら外側既定値を忘れない
const { user: { id: uid = 0, profile: { name: uname = "" } = {} } = {} } = data;
スキップと残余の安全な組み合わせ（配列の不足・過多に強く）
配列は“位置”に意味があり、欠けると undefined になります。ここが重要です：必要な位置だけ変数にし、不要はスキップ、可変長は残余（…rest）で受けると安全で柔軟です。不足に備えた既定値を必ず付けます。
const [id = 0, , price = 0, ...extras] = [1, "Apple"]; // extras=[]
console.log(id, price, extras); // 1 0 []
// ヘッダ＋残り全部
const [type = "unknown", ...payloads] = ["loaded", { id: 1 }];
console.log(type, payloads); // "loaded" [{ id: 1 }]
名前変更（エイリアス）とバリデーションの併用
外部 API のフィールド名は自分の語彙へ揃え、軽い整形や検証は本文で行います。ここが重要です：分割は“取り出しの宣言”、検証・正規化は“別の責務”。重い処理を分割の式に置かない。
const apiUser = { user_id: 7, display_name: " Alice ", age: "20" };
const { user_id: id, display_name: name = "", age } = apiUser;
// 軽い整形・検証は本文で
const normalized = {
id,
name: name.trim(),
age: Number.isFinite(Number(age)) ? Number(age) : null
};
再代入・TDZ・括弧のルール（構文で落ちないために）
既存変数へ“再代入”で分割するとき、左側は丸括弧で囲います。ここが重要です：先頭の { がブロックと解釈されるのを防ぐためです。また、未宣言変数や初期化前の変数に触れると TDZ（Temporal Dead Zone）で ReferenceError になります。
let a, b;
// 括弧が必要
({ a, b } = { a: 1, b: 2 });
// TDZ 回避：宣言後に分割
let x = 10;
const { y = x } = {}; // y=10（宣言済みなら安全）
オブジェクト残余は“浅いコピー”（共有参照の理解）
オブジェクトの残余（…rest）は浅いコピーです。ここが重要です：ネストされたオブジェクトは参照を共有するため、書き換えが元に影響します。深い変更が必要なら、ディープコピーを検討します。
const src = { a: { nested: 1 }, b: 2 };
const { a, ...rest } = src;
a.nested = 99;
console.log(src.a.nested); // 99（共有される）
実務で効く「安全な分割」パターン集
設定の安全初期化（外側既定値＋内側既定値）
function init(cfg = {}) {
const { ui = {}, api = {} } = cfg;
const { theme = "light", fontSize = 16 } = ui;
const { base = "/api", timeout = 3000 } = api;
return { theme, fontSize, base, timeout };
}
console.log(init()); // 既定値で初期化
行データの安全整形（不足に強い）
const toRowView = ([id = 0, name = "", price = 0] = []) =>
`${id}:${name.trim()} (${price.toLocaleString("ja-JP")} 円)`;
console.log(toRowView([1, " Apple "])); // price は既定値で安全
ネスト API レスポンスの安全取り出し（段階的＋既定値）
const res = { product: { id: 1, name: " Banana " }, price: { jpy: 200 } };
const { product = {}, price = {} } = res;
const { id = 0, name = "" } = product;
const { jpy = 0 } = price;
console.log(`${id}:${name.trim()} (${jpy.toLocaleString("ja-JP")} 円)`);
null 補正が必要な数値設定（?? で安全化）
const cfg = { rate: null };
const { rate } = cfg;
const safeRate = rate ?? 0.1;
console.log(safeRate); // 0.1
まとめ
安全な分割の核心は「外側既定値で足場を作り、undefined と null の振る舞いを理解し、段階的に分割して欠落に強くする」ことです。配列は位置ベースなので不足に既定値、残余で可変長を安全に受ける。オブジェクトは意味ベースで、名前変更と軽い整形を併用し、浅いコピーの特性を理解する。再代入は括弧、TDZを回避し、重い処理は分割に書かない。これらを徹底すれば、初心者でも“落ちない・崩れない”ES6+の分割代入を安心して使いこなせます。
