第6章: 分割代入 (デストラクチャリング)

第6章: 分割代入 (デストラクチャリング)

概要

分割代入（destructuring assignment）を使うと、配列やオブジェクトから複数の値を一度に取り出して変数に代入することができます。ES6で導入されたこの構文により、従来は個別に値を取り出していた処理を簡潔に書けます。配列に対しては角括弧[]を使い、オブジェクトに対しては波括弧{}を使った構文で対応する位置やキーの値を抽出します。

配列の分割代入では、左辺で例えば[a, b]のように書くと、配列の最初の2要素がそれぞれaとbに代入されます。また[x, ...rest]のように書けば先頭の要素をxに、それ以降全てをrest（レスト要素）としてまとめて配列にできます。オブジェクトの場合は、取り出したいプロパティ名をそのまま左辺に書いて同名の変数に代入できます。別名の変数に代入したい場合は名前: 別名という書き方をします。存在しないプロパティに対してデフォルト値を設定することも可能です。

コードと解説

JavaScriptでの分割代入の例です。配列から値を取り出すケースと、オブジェクトからプロパティを取り出すケースを順に示します。

// 配列の分割代入
const scores = [80, 90, 70, 60];
const [first, second, ...others] = scores;
console.log(first);   // 80
console.log(second);  // 90
console.log(others);  // [70, 60]

// オブジェクトの分割代入
const userInfo = { id: 501, name: "Eve", age: 28 };
const { id, name, age } = userInfo;
console.log(name); // "Eve"
console.log(age);  // 28

// オブジェクト分割代入: 別名とデフォルト値
const { id: userId, name: userName, nickname = "名無し" } = userInfo;
console.log(userId);   // 501
console.log(userName); // "Eve"
console.log(nickname); // "名無し" （userInfoにnicknameプロパティが無いのでデフォルト値適用）

次にTypeScriptで同じ内容を示します。型情報として配列の要素型やオブジェクトのプロパティ型を指定しています。

const scores: number[] = [80, 90, 70, 60];
const [first, second, ...others]: [number, number, ...number[]] = scores;
console.log(first);   // 80
console.log(second);  // 90
console.log(others);  // [70, 60]

interface UserInfo { id: number; name: string; age: number; nickname?: string; }
const userInfo: UserInfo = { id: 501, name: "Eve", age: 28 };
const { id, name, age }: UserInfo = userInfo;
console.log(name); // "Eve"
console.log(age);  // 28

const { id: userId, name: userName, nickname = "名無し" }: UserInfo = userInfo;
console.log(userId);   // 501
console.log(userName); // "Eve"
console.log(nickname); // "名無し"

解説: 配列scoresに対する[first, second, ...others]という分割代入により、scores[0]がfirstに、scores[1]がsecondにそれぞれ代入され、残りの要素[70, 60]がothers配列にまとめられます。これにより、一度の代入で複数の変数に値を割り当てることができます。

オブジェクトuserInfoに対する{ id, name, age }の分割代入では、右辺オブジェクトのid, name, ageプロパティの値が同名の変数id, name, ageにそれぞれ取り出されています。次の例では、id: userIdと記述することでidプロパティの値をuserIdという変数に代入しています。同様にnameはuserNameという別名変数に、存在しないnicknameプロパティにはデフォルト値"名無し"を与えてnickname変数に代入しています。このように、分割代入を用いるとオブジェクトから必要な値を抜き出しつつ、自由に変数名を付けたり初期値を設定したりできます。

目次に戻る