JavaScriptのオブジェクトのデストラクチャリング（分割代入）の基本｜初心者でもわかる使い方
生徒
「JavaScriptのオブジェクトから特定の値だけを簡単に取り出す方法ってありますか？」
先生
「ありますよ。『デストラクチャリング』という便利な書き方を使うと、オブジェクトの中身を分割して変数に取り出せます。」
生徒
「デストラクチャリングって難しそうですが、具体的にはどういうことですか？」
先生
「簡単に言うと、オブジェクトの中から欲しい情報だけを取り出して変数に分けるイメージです。具体例を見てみましょう！」
1. オブジェクトとプロパティのおさらい
JavaScriptのオブジェクトは、名前（プロパティ名）と値のセットでできています。たとえば、下のように人の情報をまとめたオブジェクトがあります。
const person = {
name: "太郎",
age: 25,
job: "エンジニア"
};
ここで、name、age、jobがプロパティ名で、それぞれ値が設定されています。
2. デストラクチャリング（分割代入）とは？
デストラクチャリングとは、オブジェクトの中のプロパティを簡単に取り出して、それぞれを別々の変数にまとめて代入する方法です。まるで箱の中身を分けるようなイメージです。
通常、オブジェクトの値を取り出すときは、次のように書きます。
const name = person.name;
const age = person.age;
これをデストラクチャリングを使うと、一行で書けます。
const { name, age } = person;
この書き方で、personオブジェクトからnameとageの値を取り出して、それぞれ同じ名前の変数に入れています。
3. なぜデストラクチャリングが便利？
たとえばオブジェクトの中にたくさんの情報がある場合、一つずつperson.name、person.ageのように書くと長くなってしまいます。デストラクチャリングを使うとスッキリ書けて、コードが読みやすくなります。
さらに、取り出す変数名を自由に変えたいときも対応できます。
const { name: userName, age: userAge } = person;
console.log(userName); // 太郎
console.log(userAge); // 25
このように、nameというプロパティの値をuserNameという変数に代入しています。
4. デフォルト値も設定できる
もしオブジェクトの中にないプロパティを取り出そうとした場合、変数にはundefined（「未定義」という意味）になります。そんな時、デフォルトの値を決めておくことも可能です。
const { hobby = "未設定" } = person;
console.log(hobby); // 未設定
この例では、personにhobbyがなかったので、hobby変数には「未設定」という値が入ります。
5. 実際に使ってみよう
それでは、実際にデストラクチャリングを使った例を見てみましょう。
const person = {
name: "太郎",
age: 25,
job: "エンジニア"
};
const { name, age, hobby = "未設定" } = person;
console.log(name); // 太郎
console.log(age); // 25
console.log(hobby); // 未設定
このように一行で必要な値を取り出せて、デフォルト値もつけられます。
6. オブジェクトのデストラクチャリングで気をつけること
- 変数名はオブジェクトのプロパティ名と同じにするのが基本です。
- プロパティが存在しない場合は
undefinedになりますが、デフォルト値を使うと防げます。 - 複雑なネスト（入れ子）構造のオブジェクトでもデストラクチャリングは使えますが、初心者はまずは簡単な使い方に慣れましょう。
これらに気をつければ、コードがすっきりしてバグも減りやすくなります。
