JavaScript | ES6+ 文法：分割代入 – オブジェクトの分割代入

JavaScript JavaScript
スポンサーリンク

オブジェクトの分割代入とは何か

オブジェクトの分割代入は、オブジェクトから「欲しいプロパティだけ」を取り出し、同名の変数に一気に割り当てる ES6 の書き方です。ここが重要です：左側のパターン { id, name } は「右側のオブジェクトの id と name プロパティを同名変数へ取り出す」という宣言であり、コードを短く、意図を明確にします。

const user = { id: 7, name: "Alice", age: 20 };
const { id, name } = user;
console.log(id, name); // 7 "Alice"
JavaScript

基本構文と名前変更（エイリアス）

プロパティ名と違う変数名にしたい場合は「プロパティ名: 変数名」と書いて名前変更できます。ここが重要です：外部 API のフィールド名を“自分のプロジェクトで扱いやすい名前”へ揃えるのに有効です。

const apiUser = { user_id: 7, display_name: "  Alice  " };
const { user_id: id, display_name: name } = apiUser;
console.log(id, name.trim()); // 7 "Alice"
JavaScript

既定値（デフォルト）も同時に使えます。既定値は「未指定または undefined のときだけ」発動する点が重要です。null は「値あり」と見なされるため既定値は適用されません。

const cfg = { theme: undefined, lang: "ja" };
const { theme = "light", lang = "en" } = cfg;
console.log(theme, lang); // "light" "ja"

const x = { v: null };
const { v = 0 } = x;
console.log(v); // null（既定値は効かない）
JavaScript

ネストの分割代入と段階的に読むコツ

ネストしたオブジェクトから必要な階層だけ取り出せます。ここが重要です：一行に詰め込みすぎると読みにくくなるため、“段階的分割”で読みやすさを優先します。

const data = {
  ui: { theme: "dark", fontSize: 14 },
  api: { base: "/api", timeout: 5000 }
};

// 段階的に取り出す（読みやすい）
const { ui, api } = data;
const { theme, fontSize } = ui;
const { base, timeout } = api;

// 一行でまとめても可
const { ui: { theme: th, fontSize: fs }, api: { base: url, timeout: to } } = data;
console.log(th, fs, url, to);
JavaScript

ネストでも既定値が使えます。未定義の可能性がある中間オブジェクトには、外側に安全な既定値を置くのがコツです。

const cfg = {};
const { ui: { theme = "light" } = {} } = cfg;
console.log(theme); // "light"
JavaScript

残余プロパティ（…rest）とスプレッドの違い

残余プロパティは「取り出し以外の残り全部」をまとめて受け取る構文です。ここが重要です：...rest は“受け取り側”、...obj（スプレッド）は“展開して渡す側”であり、役割が逆です。

const user = { id: 7, name: "Alice", age: 20, role: "admin" };
const { id, name, ...others } = user;
console.log(id, name);   // 7 "Alice"
console.log(others);     // { age: 20, role: "admin" }

// スプレッドは“渡す側”
const base = { a: 1 };
const ext  = { b: 2 };
const merged = { ...base, ...ext }; // { a: 1, b: 2 }
JavaScript

残余は“最後に1つだけ”という点が重要です。途中や複数の残余は構文エラーになります。

関数パラメータでの分割代入（安全設計の定石）

関数の引数でそのまま分割代入を使うと、必要なフィールド・既定値・意図が“関数シグネチャ”に現れます。ここが重要です：引数そのものが未指定の場合に備えて、外側の {} に既定値を必ず付けます。

// 既定値と名前変更を併用
function normalizeUser({ user_id: id, display_name: name = "" } = {}) {
  return { id, name: name.trim() };
}
console.log(normalizeUser({ user_id: 7 })); // { id: 7, name: "" }

// 設定オブジェクトの堅牢化
function connect({ host = "localhost", port = 5432, ssl = false } = {}) {
  return `postgres://${host}:${port}?ssl=${ssl}`;
}
console.log(connect()); // 既定値で安全に動く
JavaScript

配列と組み合わせる場合は“位置は配列、意味はオブジェクト”という役割分担が読みやすさにつながります。

function renderRow([id = 0, name = "", price = 0] = [], { rate = 0.1, round = Math.round } = {}) {
  return `${id}:${name.trim()} (${round(price * (1 + rate))}円)`;
}
console.log(renderRow([1, "  Apple  "], { rate: 0.08 }));
JavaScript

既存変数への再代入と括弧のルール

既に宣言済みの変数へ“再代入”で分割代入したい場合、左側を丸括弧で囲う必要があります。ここが重要です：{ から始まるとブロック文と解釈されるため、式であることを明示します。

let id, name;
({ id, name } = { id: 7, name: "Alice" });
console.log(id, name); // 7 "Alice"
JavaScript

よくある落とし穴と対策（重要ポイントの深掘り）

未指定の引数に対して外側 {} の既定値を忘れると、「Cannot destructure property … of undefined」のエラーになります。関数パラメータで分割する際は、常に = {} を添える習慣をつけてください。

// NG（未指定でクラッシュ）
// function f({ a = 1 }) { return a; }

// OK
function f({ a = 1 } = {}) { return a; }
console.log(f()); // 1
JavaScript

既定値は undefined に対してのみ発動する点にも注意します。null は既定値になりません。null も既定値扱いにしたい場合は、関数内で ??（null 合体演算子）を使って補正します。

const normalize = ({ rate } = {}) => (rate ?? 0.1); // null/undefined を 0.1 に
console.log(normalize({ rate: null })); // 0.1
JavaScript

重い計算や整形を分割代入の式に直接書きすぎると、読みづらくパフォーマンスにも悪影響です。ここが重要です：分割代入は“取り出しの宣言”、ロジックは“別の変数・補助関数”へ分離すると保守しやすくなります。

例題で理解を固める

// 1) API レスポンスの整形：名前変更＋既定値＋トリム
const apiUser = { user_id: 7, display_name: "  Alice  " };
const normalizeUser = ({ user_id: id, display_name: name = "" } = {}) =>
  ({ id, name: name.trim() });
console.log(normalizeUser(apiUser)); // { id: 7, name: "Alice" }

// 2) ネスト設定の安全な取り出し：段階的分割＋既定値
const cfg = { ui: { theme: "dark" } };
const { ui = {}, api = {} } = cfg;
const { theme = "light", fontSize = 16 } = ui;
const { base = "/api", timeout = 3000 } = api;
console.log(theme, fontSize, base, timeout); // "dark" 16 "/api" 3000

// 3) 残余プロパティで「残り全部」をまとめる
const user = { id: 7, name: "Alice", age: 20, role: "admin" };
const { id, ...rest } = user;
console.log(id, rest); // 7 { name: "Alice", age: 20, role: "admin" }

// 4) 既存変数へ再代入（括弧が必要）
let x, y;
({ x, y } = { x: 10, y: 20 });
console.log(x, y); // 10 20

// 5) 関数パラメータで分割（未指定に強い）
function makeUrl(base, { q = "", page = 1, per = 20, sort = "new" } = {}) {
  const params = new URLSearchParams({ q, page, per, sort });
  return `${base}?${params}`;
}
console.log(makeUrl("/search")); // 既定値で生成
console.log(makeUrl("/search", { q: "js", per: 5 })); // 欠けても安全
JavaScript

まとめ

オブジェクトの分割代入の核心は「欲しいプロパティだけを、意図の伝わる形で取り出す」ことです。名前変更で API を自分の語彙へ揃え、既定値で未指定や undefined に強くし、ネストは段階的分割で読みやすく保つ。残余プロパティで“残り全部”を扱い、既存変数への再代入は括弧で明示。分割代入は“取り出しの宣言”、ロジックは“補助関数・変数”へ分離する——この設計を徹底すれば、初心者でも短く堅牢で読みやすい ES6+ のオブジェクトハンドリングが身につきます。

スポンサーリンク
タイトルとURLをコピーしました