こんにちは、かつコーチです。
前回はテンプレートリテラルで文字列を扱う方法を解説しました。
今回は「分割代入（Destructuring）」を取り上げます。
オブジェクトや配列から値を取り出すコードは、慣れないうちは同じような記述が何行も続きがちです。
分割代入を覚えると、この取り出し処理が1行でスッキリ書けるようになります。
分割代入とは？
オブジェクト・配列から値を取り出す書き方
分割代入とは、オブジェクトや配列の中身を、まとめて複数の変数に取り出せる書き方のことです。
英語では「Destructuring（デストラクチャリング）」と呼ばれ、ES2015（ES6）から使えるようになりました。
これまでの書き方では、オブジェクトのプロパティを取り出すたびに .プロパティ名 を書く必要がありました。
const user = {
name: "かつコーチ",
age: 35,
role: "エンジニア",
};
// 従来の書き方：1つずつ取り出す
const name = user.name;
const age = user.age;
const role = user.role;
console.log(name, age, role);
// 出力: かつコーチ 35 エンジニア
同じ処理を分割代入で書くと、次のように1行にまとめられます。
const user = {
name: "かつコーチ",
age: 35,
role: "エンジニア",
};
const { name, age, role } = user;
console.log(name, age, role);
// 出力: かつコーチ 35 エンジニア
{ } の中にオブジェクトのプロパティ名と同じ名前を並べるだけで、対応する値がそれぞれの変数に代入されます。
なぜ必要なのか
APIから取得したデータや関数の引数など、実務では「オブジェクトの一部だけ使いたい」という場面が頻繁にあります。
そのたびに .プロパティ名 を繰り返し書くのは冗長ですし、必要なプロパティが増えるほどコードが縦に長くなります。
分割代入を使うと、「このオブジェクトから何を取り出して使うのか」が1行で見渡せるようになり、コードの意図が読み取りやすくなります。
基本の書き方
オブジェクトの分割代入
オブジェクトの分割代入は { } を使います。
const product = {
id: 101,
name: "ノートPC",
price: 98000,
};
const { name, price } = product;
console.log(`${name}は${price}円です。`);
// 出力: ノートPCは98000円です。
一部のプロパティだけを取り出したい場合は、必要な名前だけを { } の中に書けば大丈夫です。
別名をつけて取り出す
プロパティ名をそのまま変数名にすると名前が重複してしまう場合は、: を使って別名をつけられます。
const user = {
name: "かつコーチ",
};
// プロパティ名 name を userName という変数名で受け取る
const { name: userName } = user;
console.log(userName);
// 出力: かつコーチ
デフォルト値を設定する
プロパティが存在しない場合に備えて、デフォルト値を設定することもできます。
const user = {
name: "かつコーチ",
};
// role プロパティが存在しない場合は "ゲスト" を使う
const { name, role = "ゲスト" } = user;
console.log(`${name}さんの役職は${role}です。`);
// 出力: かつコーチさんの役職はゲストです。
配列の分割代入
配列の場合は { } の代わりに [ ] を使います。
オブジェクトと違い、配列は名前ではなく「並び順」で値が対応する点がポイントです。
const colors = ["赤", "青", "緑"];
const [first, second, third] = colors;
console.log(first, second, third);
// 出力: 赤 青 緑
途中の要素を飛ばしたい場合は、カンマだけを空けておくこともできます。
const colors = ["赤", "青", "緑"];
const [first, , third] = colors;
console.log(first, third);
// 出力: 赤 緑
つまずきやすいポイント：関数の引数での分割代入
プロパティの順番と誤解してしまう
私が実際につまずいたのは、関数の引数に分割代入を使ったときです。
オブジェクトの分割代入は「名前」で対応するのに、配列の感覚で「順番」を意識してプロパティを並べてしまい、意図した値が取れずに悩んだことがあります。
❌ Before：オブジェクトなのに順番を気にして書いてしまう
function showUser({ age, name }) {
console.log(`${name}さんは${age}歳です。`);
}
// 呼び出し側ではオブジェクトのプロパティの順番を気にして書いていた
showUser({ name: "かつコーチ", age: 35 });
// 出力: かつコーチさんは35歳です。（実はこれで問題なく動く）
このコード自体は実は正しく動きます。
しかし私は「関数側の引数の並び順（age, name）と、呼び出し側のプロパティの並び順（name, age）を揃えないといけない」と勘違いしていた時期があり、無駄に順番を合わせようとして時間を使ってしまいました。
✅ After：オブジェクトの分割代入は名前で対応することを理解して書く
function showUser({ name, age }) {
console.log(`${name}さんは${age}歳です。`);
}
// プロパティの順番はどちらでも構わない
showUser({ age: 35, name: "かつコーチ" });
// 出力: かつコーチさんは35歳です。
オブジェクトの分割代入は、あくまで「プロパティ名」で値を紐づけているだけなので、書く順番はどちらでも結果が変わりません。
配列の分割代入は「順番」、オブジェクトの分割代入は「名前」で対応するという違いを意識しておくと、こうした勘違いを防げます。
引数がオブジェクトでない場合にエラーになる
分割代入を関数の引数に使う場合、渡された値が undefined だとエラーになる点にも注意が必要です。
function showUser({ name, age } = {}) {
console.log(name, age);
}
showUser();
// 出力: undefined undefined（エラーにならない）
引数部分に = {} というデフォルト値を用意しておくと、引数なしで呼び出されてもエラーになりません。
応用：ネストしたオブジェクトの分割代入
入れ子になった構造から値を取り出す
オブジェクトの中にオブジェクトが入っている、いわゆる「ネストした構造」からも分割代入で値を取り出せます。
const user = {
name: "かつコーチ",
address: {
city: "東京都",
zip: "100-0001",
},
};
const {
name,
address: { city, zip },
} = user;
console.log(`${name}さんの住所：${city} ${zip}`);
// 出力: かつコーチさんの住所：東京都 100-0001
address: { city, zip } のように書くと、address の中身をさらに分割代入できます。
APIのレスポンスなど、階層の深いデータを扱うときに特に活躍する書き方です。
まとめ
この記事のポイント
- 分割代入は、オブジェクトや配列から値をまとめて取り出せる書き方
- オブジェクトは
{ }、配列は[ ]を使う - オブジェクトの分割代入は「名前」、配列の分割代入は「順番」で値が対応する
:で別名をつけたり、=でデフォルト値を設定したりできる- ネストしたオブジェクトからも一気に値を取り出せる
次に読むべき記事
次回は「スプレッド構文・残余引数の使い方」を解説します。
分割代入と組み合わせるとさらに便利になる書き方なので、続けて読んでおくのがおすすめです。
→ 次の記事：スプレッド構文・残余引数の使い方