分割代入
中級読み方：ぶんかつだいにゅう｜英語：Destructuring
配列やオブジェクトから値を取り出して変数に代入する構文で、const { name } = 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歳）"便利な使い方いろいろ
// 別名（エイリアス）をつける
const { name: userName } = user;
// userName → "太郎"（nameという変数は作られない）
// デフォルト値を設定する
const { email = "未設定" } = user;
// email → "未設定"（userにemailがない場合）
// ネストしたオブジェクトの分割代入
const { address: { city } } = { address: { city: "東京" } };
// city → "東京"
// 配列で一部をスキップ
const [, second, third] = [1, 2, 3];
// second → 2, third → 3React の useState の戻り値は配列なので、配列の分割代入で受け取ります。const [count, setCount] = useState(0) がその典型例です。
いつ使う？
- APIのレスポンスから必要なプロパティだけ取り出すとき
- 関数の引数でオブジェクトを受け取るとき（引数名を明示できる）
- React の
useState/useReducerなどフックの戻り値を受け取るとき - スワップ（変数の値を交換）するとき —
[a, b] = [b, a] - コンポーネントの props を受け取るとき（
function Card({ title, body })）
間違いやすいポイント
❌ 存在しないプロパティを分割代入するとundefinedになる（エラーにならない）
タイポしてもエラーが出ないため気づきにくいバグの原因になります。デフォルト値を設定する習慣をつけましょう。
const { email } = { name: "太郎" };
email; // undefined（エラーにならない！）
// ✅ デフォルト値を設定すると安全
const { email = "未設定" } = { name: "太郎" };
email; // "未設定"❌ オブジェクトの分割代入で変数名はプロパティ名と一致させる必要がある
配列の分割代入と違い、オブジェクトの分割代入では変数名がプロパティ名に対応します。別名にしたい場合は { name: userName } のようにエイリアスを使いましょう。
よくある疑問
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の場合に'名無し'が使われます。
関連用語
📖 関連レッスン
レッスンを見る →