変数名変更（エイリアス）とは何か
分割代入の「変数名変更」は、オブジェクトのプロパティ名を“別名の変数”へ取り出す書き方です。ここが重要です：{ prop: alias } の形で「右側のオブジェクトの prop を、左側の変数 alias に入れる」宣言になります。外部APIのフィールド名や、短くしたいプロパティ名を、自分のコードで扱いやすい名前に変えられます。
const apiUser = { user_id: 7, display_name: "Alice" };
const { user_id: id, display_name: name } = apiUser;
console.log(id, name); // 7 "Alice"
基本構文と“取り出し名”と“変数名”の関係
左側の「プロパティ名」は右側オブジェクトのキー、「コロンの右」は新しく作る変数名です。ここが重要です：右側のキーにアクセスできないとき（欠落や undefined）には、その変数は undefined になります。配列は“位置で”取り出すため、オブジェクトのような「名前変更」はありませんが、任意の変数名を自由に付けられます。
const obj = { a: 1, b: 2 };
const { a: x, b: y } = obj; // a→x, b→y
console.log(x, y); // 1 2
const arr = [10, 20];
const [first, second] = arr; // 配列は位置で名前を付けるイメージ
デフォルト値との併用（未定義だけを補う）
既定値は「未指定または undefined のとき」だけ発動します。ここが重要です：{ prop: alias = default } と書くと、prop が undefined の場合に限り alias に既定値が入ります（null は既定値になりません）。名前変更と既定値を組み合わせると、欠けても安全な受け方ができます。
const cfg = { theme: undefined, locale: "ja" };
const { theme: uiTheme = "light", locale: lang = "en" } = cfg;
console.log(uiTheme, lang); // "light" "ja"
const x = { v: null };
const { v: value = 0 } = x; // null は既定値発動しない
console.log(value); // null
ネストした構造での名前変更（段階的に読む）
ネストでも「取り出し名: 変数名」を使えます。ここが重要です：深い構造を一行で解体しすぎると読みにくいので、段階的分割で“意味ごとに”変数へ落とすと保守しやすくなります。中間オブジェクトが無い可能性がある場合は、外側に {} の既定値を添えるのが安全策です。
const data = {
ui: { theme: "dark", fontSize: 16 },
api: { base: "/api", timeout: 5000 }
};
// 段階的に（読みやすい）
const { ui, api } = data;
const { theme: th, fontSize: fs } = ui;
const { base: url, timeout: to } = api;
// 一行でも可能（読みやすさに注意）
const { ui: { theme: themeName }, api: { base: apiBase } } = data;
console.log(themeName, apiBase); // "dark" "/api"
// 中間欠落に備える（外側の既定値）
const cfg = {};
const { ui: { theme: safeTheme = "light" } = {} } = cfg;
console.log(safeTheme); // "light"
関数パラメータでの名前変更（安全設計の定石）
関数の引数に直接名前変更を使うと、受ける形がシグネチャに現れて読みやすくなります。ここが重要です：引数そのものが未指定のときに備えて、外側 {} の既定値を必ず付けます。既定値・トリム・変換など“軽い整形”はシグネチャに、重い処理は関数本文へ分けると見通しが良くなります。
function normalizeUser({ user_id: id, display_name: name = "" } = {}) {
return { id, name: name.trim() };
}
console.log(normalizeUser({ user_id: 7 })); // { id: 7, name: "" }
function makeUrl(base, { q: query = "", page: p = 1, per: perPage = 20 } = {}) {
const params = new URLSearchParams({ q: query, page: p, per: perPage });
return `${base}?${params}`;
}
console.log(makeUrl("/search", { q: "js", per: 5 }));
既存変数への再代入と括弧のルール
すでに宣言済みの変数へ“再代入”で名前変更を使うときは、左側全体を丸括弧で囲う必要があります。ここが重要です：先頭の { を文ブロックと誤解されないよう、式であることを明示します。再代入は“値の更新”に便利ですが、可読性のために“宣言＋初期化”でまとめられるならそちらを優先しましょう。
let id, name;
({ user_id: id, display_name: name } = { user_id: 7, display_name: "Alice" });
console.log(id, name); // 7 "Alice"
よくある落とし穴と回避策（重要ポイントの深掘り）
未指定の引数で外側 {} を忘れると、「Cannot destructure property … of undefined」で落ちます。関数パラメータの分割では、常に = {} を添える習慣を。別名を付けすぎて“元のキーの意味”が見えなくなることがあります。ここが重要です：命名は「ドメインの語彙」に揃えつつ、元のキーが推測できる短い別名に留めるのがコツです。さらに、既定値の式は毎回評価されるため、重い処理や副作用を置かないこと。
// NG：外側既定値なし（未指定でクラッシュ）
// function f({ a: x = 1 }) { return x; }
// OK：外側既定値あり
function f({ a: x = 1 } = {}) { return x; }
console.log(f()); // 1
例題で理解を固める
// 1) API → 自分の語彙へ：名前変更＋既定値
const apiRow = { product_id: 1, product_name: " Apple ", price_jpy: 123456 };
const { product_id: id, product_name: name, price_jpy: price = 0 } = apiRow;
const view = `${id}:${name.trim()} (${price.toLocaleString("ja-JP")} 円)`;
console.log(view);
// 2) ネスト設定：段階的＋名前変更
const cfg = { ui: { theme: "dark" }, api: { base: "/api" } };
const { ui: { theme: uiTheme = "light" } = {}, api: { base: apiBase = "/v1" } = {} } = cfg;
console.log(uiTheme, apiBase);
// 3) 関数パラメータ：別名で受けてから使う
function render({ id: productId, name: title = "", price: amount = 0 } = {}) {
return `
<div data-id="${productId}">
<h2>${title.trim()}</h2>
<p>価格: ${amount.toLocaleString("ja-JP")} 円</p>
</div>
`.trim();
}
console.log(render({ id: 10, name: " Banana ", price: 200 }));
// 4) 既存変数へ再代入（括弧必須）
let x, y;
({ a: x, b: y } = { a: 1, b: 2 });
console.log(x, y); // 1 2
まとめ
変数名変更の核心は「外部や深い構造の“元のキー”を、コード内で扱いやすい“意味ある名前”へマッピングする」ことです。{ key: alias } を基本に、既定値は undefined のときだけ発動、ネストは段階的に、関数パラメータには外側 {} の既定値を必ず添える。再代入は括弧で明示し、重い処理は既定値の式に置かない。命名を“ドメインの語彙”に揃えることで、初心者でも読みやすく保守しやすい ES6+ の分割代入を実践できます。