オブジェクトの分割代入で必要なキーだけ取り出す
このレッスンで分かること
- オブジェクト分割代入は
const { name, age } = userの形でキーから値を取り出します- キーがなければ
=でデフォルト、別名はkey: newNameでリネーム- 最小例は
const { name, age = 0 } = user; return { name, age };
オブジェクトの分割代入で必要なキーだけ取り出す とは
オブジェクトの分割代入で必要なキーだけ抽出し、リネーム・デフォルト値・ネストも扱う書き方を学ぶ。本レッスンでは、オブジェクトの分割代入で必要なキーだけ取り出す の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。
オブジェクトの分割代入で必要なキーだけ取り出す
API から返ってきた JSON や、複雑な設定オブジェクトから「必要な値だけ」取り出したい場面は山ほどあります。毎回 user.name、user.age、user.email と書いていたら、コードがすぐに長くなります。JavaScript のオブジェクト分割代入を使えば、const { name, age } = user の 1 行で済みます。さらに、別名にリネームしたり、無いキーにデフォルト値を入れたり、ネストしたキーを直接取り出すこともできます。
オブジェクトの分割代入は 「キー名と同じ変数を一度に宣言する」 ためのショートカット。値の取り出しと変数宣言を 1 行に圧縮できる。
基本構文
左辺に波括弧 {} を書き、その中にオブジェクトのキーと同じ名前の変数を書きます。配列分割代入と違って順序ではなくキー名でマッチングするため、左辺の並び順は自由です。
JavaScript
const user = { name: "Alice", age: 28, email: "a@example.com" };
const { name, age } = user;
console.log(name, age); // "Alice" 28配列との違いは次のとおりです。
JavaScript
// 配列: 位置で取り出す
const [first, second] = [10, 20];
// オブジェクト: キー名で取り出す
const { a, b } = { b: 20, a: 10 };| 種類 | 構文 | マッチング | 例 |
|---|---|---|---|
| 配列 | const [a, b] = arr | 位置 (index) | [10, 20] → a=10, b=20 |
| オブジェクト | const { a, b } = obj | キー名 | { b: 20, a: 10 } → a=10, b=20 |
配列は
[]で位置マッチング、オブジェクトは{}でキーマッチング。これが基本の対比。
リネームとデフォルト値
キー名と違う変数名で受け取りたいときは : (コロン) でリネームできます。コロン構文は key: newName の順で書きます。
JavaScript
const user = { name: "Alice" };
const { name: userName } = user;
console.log(userName); // "Alice"存在しないキーには = でデフォルト値を指定できます。値が undefined のときだけデフォルトが使われる点が重要です。null のときはデフォルトが使われず null のままです。
JavaScript
const { role = "guest" } = {};
console.log(role); // "guest"リネームとデフォルト値は組み合わせ可能です。
JavaScript
const { name: userName = "Anonymous" } = {};
console.log(userName); // "Anonymous"動きを追ってみる
評価の流れを箇条書きで言い換えると、次のとおりです。
- 左辺の
{ ... }を見て、各キーをオブジェクトから探す - 値があればその値を変数に束縛
- なければ
= defaultのデフォルト値、それもなければundefined key: newNameの形なら変数名を別名にリネーム- 元のオブジェクトは変更されない (新しい変数が増えるだけ)
ネストと rest
ネストしたオブジェクトも、左辺に同じ形を書けば取り出せます。たとえば { profile: { name } } のように書くと、profile.name を直接取り出せます。
JavaScript
const data = { profile: { name: "Bob", age: 30 } };
const { profile: { name } } = data;
console.log(name); // "Bob"オブジェクトにも ...rest 記法が使えます。指定したキー以外の残りを rest オブジェクトにまとめます。
JavaScript
const user = { id: 1, name: "Alice", email: "a@x.com" };
const { id, ...others } = user;
console.log(others); // { name: "Alice", email: "a@x.com" }
...restは 不要なキーを除外する用途で重宝する。idを抜いた残りをAPIに渡す、といったケースで使う。
よくある間違い
第 1 に、関数の引数に分割代入を書いたとき、引数自体が undefined だとエラーになります。function fn({ a }) {} を fn() で呼ぶと Cannot destructure 例外が出ます。引数全体にデフォルトを与えて function fn({ a } = {}) {} と書きます。第 2 に、null はデフォルト値を発動しません。const { x = 1 } = { x: null } の x は null のままです。第 3 に、リネーム構文は : の順序を間違えやすいです。{ key: newName } であって { newName: key } ではありません。
ここまでの要点
オブジェクト分割代入はキー名でマッチング。デフォルトは undefined のときだけ発動 (null は素通り)。リネームは key: newName、残りは ...rest、関数引数では { a } = {} で安全に。
やってみよう
オブジェクト user を受け取り、{ name, age } という形のオブジェクトを返す pickNameAge 関数を書きましょう。手順は次のとおりです。
function pickNameAge(user) { ... }で関数を定義するconst { name, age = 0 } = user;で分割代入するreturn { name, age };で新しいオブジェクトを返す
age が無ければ 0 をデフォルト値とします。分割代入で const { name, age = 0 } = user の形にすれば 1 行で書けます。短いコードでも、object 操作の本質である「必要なものだけ取り出す」感覚を養えます。
よくある質問
Q. 存在しないキーを分割代入するとどうなりますか？
A. 値は undefined になります。デフォルト値を指定したい場合は const { name = 'guest' } = user; のように = で書けます。深いネストでも const { profile: { age = 0 } = {} } = user; のように途中の null/undefined を防げます。
Q. 別名で受け取ることはできますか？
A. const { name: userName } = user; のように : で別名を付けられます。コンポーネント間でプロパティ名が衝突しないようにしたいときや、短い変数名にリネームしたいときに使うと可読性が上がります。
Q. 配列の分割代入で先頭と残りを分けるには？
A. const [first, ...rest] = list; と書けば先頭が first、残りが配列 rest に入ります。スキップしたい要素はカンマで空けて const [, second] = list; とできます。タプル型と相性が良く、関数の複数戻り値を分解するときにも便利です。
次のレッスン
次は スプレッド構文で配列を連結する で、オブジェクトの分割代入で必要なキーだけ抽出し、リネーム・デフォルト値・ネストも扱う書き方を学ぶ を学びます。
事前確認 — 進む前に次の 3 つができることを確認しましょう。
- オブジェクト分割代入 の要点を自分の言葉で説明できる
- このレッスンの最小コード (または操作手順) を見ずに書ける
- 練習問題やクイズで間違えた箇所を読み直して理解した
理解度チェック (30 秒)
Q. オブジェクト分割代入 とは何か、1 文で説明してください。
A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。
関連レッスン
要件
- オブジェクトの分割代入
const { name, age = 0 } = userを使うこと - age が無いときはデフォルト値 0 を使うこと
- 返り値は name と age だけのオブジェクトにすること
入出力例
test-cases.txt
pickNameAge({"age":28,"email":"a@x.com","name":"Alice"}) → {"age":28,"name":"Alice"}
pickNameAge({"name":"Bob"}) → {"age":0,"name":"Bob"}
pickNameAge({"active":true,"age":40,"name":"Carol","role":"admin"}) → {"age":40,"name":"Carol"}