分割代入
中級読み方：ぶんかつだいにゅう｜英語：Destructuring
配列やオブジェクトから値を取り出して変数に代入する構文で、const { name } = obj; の形だよ。いつ使う？ APIレスポンスから必要なデータだけ取り出したい、関数の引数でオブジェクトの一部だけ使いたいときに使うよ。間違いやすいポイント: オブジェクトの分割代入は変数名がキー名と一致する必要があるよ。別名を付けたいなら const { name: userName } = obj; と書くよ。
やさしい説明
分割代入は、配列やオブジェクトから値を取り出して変数に入れる便利な書き方です。1行で複数の変数に値を代入できます。
プレゼントの箱を開けて中身を取り出すイメージです。オブジェクトなら { name, age } = user、配列なら [a, b] = arr と書きます。
関数の引数でも使えます。React のコンポーネントで props を受け取るときの定番パターンです。
具体例・使い方
// オブジェクトの分割代入
const user = { name: "太郎", age: 15, city: "東京" };
const { name, age } = user;
// name → "太郎", age → 15
// 配列の分割代入
const [first, second] = ["りんご", "みかん"];
// first → "りんご", second → "みかん"
// 関数の引数で使う
function greet({ name, age }) {
return `${name}さん（${age}歳）`;
}
greet(user); // "太郎さん（15歳）"いつ使う？
APIのレスポンスから必要なデータだけ取り出すとき、関数の引数でオブジェクトを受け取るとき、React の useState の戻り値を受け取るときに使います。
間違いやすいポイント
❌ 存在しないプロパティを分割代入するとundefined
const { email } = { name: "太郎" };
email; // undefined（エラーにならない！）
// デフォルト値を設定すると安全
const { email = "未設定" } = { name: "太郎" };
email; // "未設定"よくある疑問
Q: オブジェクトの分割代入の書き方は？
A: const { name, age } = user; でuser.nameとuser.ageを一度に取り出せます。ネストも可能: const { address: { city } } = user;
Q: 配列の分割代入の書き方は？
A: const [first, second] = arr; で配列の1番目と2番目を取り出せます。const [, , third] = arr; で3番目だけも可能です。
Q: デフォルト値を設定するには？
A: const { name = '名無し' } = obj; で、nameがundefinedの場合に'名無し'が使われます。
関連用語
📖 関連レッスン
レッスンを見る →