このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

【JavaScript入門】分割代入

分割代入

　JavaScript でデータを扱うとき、配列やオブジェクトから特定の要素やプロパティを取り出して別々の変数に代入するのはよくある作業です。しかし、1つひとつ代入しているとコードが長くなりがちです。そこで登場するのが分割代入（Destructuring Assignment）です。分割代入を使うと、短い記述で配列やオブジェクトの要素やプロパティを取り出せるようになります。

１．配列の分割代入

1.1. 基本的な書き方

　配列の分割代入は、左辺に [ ] を書き、右辺に分割する元の配列を置きます。左辺の各変数の位置と右辺の配列要素が対応して、変数に値が代入されます。

// サンプル配列
const arr = ['プリン', 'パンナコッタ', 'ゼリー', 'シフォンケーキ'];

// 分割代入
const [dessert1, dessert2, dessert3] = arr;
console.log(dessert1, dessert2, dessert3);
// 例の出力: "プリン パンナコッタ ゼリー"

1.2. 要素のスキップ・残余を取得

分割代入では、不要な要素を飛ばしたり、残りの要素をまとめて取得することもできます。

const arr2 = ['抹茶アイス', 'コーヒーフロート', 'キャラメルラテ', 'ソーダ', '紅茶'];

// 1番目の要素は使わず、残りを1つ取り出し、それ以降を配列として取得
const [iceCream, , coffee, ...otherDrinks] = arr2;
console.log(iceCream);       // '抹茶アイス'
console.log(coffee);         // 'キャラメルラテ'
console.log(otherDrinks);    // ['ソーダ', '紅茶']

1.3. 規定値の設定

　要素が存在しないときは undefined が入りますが、あらかじめ規定値を用意しておくことも可能です。

const arr3 = ['ココア'];

// 存在しない2番目、3番目の要素には規定値を入れる
const [chocoDrink = 'コーヒー', juice = 'みかんジュース', latte = '抹茶ラテ'] = arr3;
console.log(chocoDrink); // 'ココア'
console.log(juice);      // 'みかんジュース'
console.log(latte);      // '抹茶ラテ'

２．オブジェクトの分割代入

2.1. 基本的な書き方

　オブジェクトの場合は { } を使い、プロパティ名に対応した変数を配置します。右辺のオブジェクトに同じ名前のプロパティがあれば、その値が変数に代入されます。

// サンプルオブジェクト
const menu = {
  sweet: 'ティラミス',
  drink: 'コーヒー',
  side: 'サラダ'
};

// 分割代入
const {sweet, drink, side} = menu;
console.log(sweet, drink, side);
// 例の出力: "ティラミス コーヒー サラダ"

2.2. 変数名を変える分割代入

プロパティ名と異なる変数名を使いたいときは、コロン : のあとに新しい変数名を書きます。

const menu2 = {
  mainDish: 'オムライス',
  soup: 'コンソメ',
  dessert: 'ショートケーキ'
};

// プロパティ名: 変数名 という形
const {mainDish: dish, soup: soupType, dessert: sweetItem} = menu2;
console.log(dish, soupType, sweetItem);
// 例の出力: "オムライス コンソメ ショートケーキ"

2.3. 残りのプロパティをまとめる

　... を使って、指定しなかったプロパティを1つのオブジェクトにまとめて取得することもできます。

const product = {name: 'カステラ', price: 450, tag: 'sweets'};

// 指定したプロパティ以外は restObj にまとめる
const {name, ...restObj} = product;
console.log(name);      // 'カステラ'
console.log(restObj);   // { price: 450, tag: 'sweets' }

2.4. 規定値の設定

もし対象のプロパティが存在しなければ、あらかじめ用意した既定値を代入することができます。

const product2 = {name: 'プリン', brand: 'スイーツブランド'};

// 存在しないプロパティ flavor に規定値を設定
const {name: dessertName, flavor = 'チョコ'} = product2;
console.log(dessertName, flavor);
// 例の出力: "プリン チョコ"

３．サンプルコード（HTML + JavaScript）

　次の例を「myDestructuringExample.html」というファイル名で保存し、ブラウザで開いて開発者ツール（コンソール）を確認してください。

【myDestructuringExample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myDestructuringExample.html</title>
</head>
<body>
  <h1>分割代入のサンプル</h1>
  <p>ブラウザの開発者ツールを開き、コンソールに注目してください。</p>

  <script>
    // 1. 配列の分割代入
    const arr = ['チーズケーキ', 'アイスコーヒー', 'アップルティー', 'オレンジジュース'];
    const [cake, iceCoffee, , orangeJuice] = arr;
    console.log('配列の分割代入:', cake, iceCoffee, orangeJuice);

    // 2. 残り要素の取得
    const [dessert, ...otherDrinks] = arr;
    console.log('最初の要素:', dessert);
    console.log('残り:', otherDrinks);

    // 3. オブジェクトの分割代入
    const obj1 = { menuA: 'チャーハン', menuB: 'ラーメン', menuC: '餃子' };
    const {menuA, menuB, menuC} = obj1;
    console.log('オブジェクトの分割代入:', menuA, menuB, menuC);

    // 4. 変数名を変更して受け取る
    const {menuA: dishA, menuC: dishC} = obj1;
    console.log('変数名を変えて:', dishA, dishC);

    // 5. 規定値の設定
    const [item1 = 'コーラ', item2 = 'ミルク'] = ['紅茶'];
    console.log('規定値が適用:', item1, item2);

    // 6. 残りのプロパティをまとめて取得
    const obj2 = { listA: 'ハンバーガー', listB: 'フライドポテト', listC: 'チキンナゲット' };
    const {listA, ...restMenu} = obj2;
    console.log('残りのプロパティ:', restMenu);
  </script>
</body>
</html>

実行結果

デバッグコンソールの出力

配列の分割代入: チーズケーキ アイスコーヒー オレンジジュース
最初の要素: チーズケーキ
残り: (3) ["アイスコーヒー", "アップルティー", "オレンジジュース"]
オブジェクトの分割代入: チャーハン ラーメン 餃子
変数名を変えて: チャーハン 餃子
規定値が適用: 紅茶 ミルク
残りのプロパティ: {listB: 'フライドポテト', listC: 'チキンナゲット'}

まとめ

  • 配列の分割代入： [ ] を使って順番通りに要素を変数に取り出せる。スキップや残りの要素を配列化、既定値を設定するなどの柔軟な書き方が可能。
  • オブジェクトの分割代入： { } の中にプロパティ名を並べると、同名のプロパティの値が取得できる。変数名を変えたり、余ったプロパティをまとめて取得したりできる。
  • 分割代入は書き方自体が配列リテラルやオブジェクトリテラルに似ており、取得したい要素やプロパティを簡潔に記述できる。

　分割代入を活用すると、コードがシンプルになり、同じ処理を短くわかりやすく表せます。特に関数の引数や戻り値が複雑になる場合にも便利ですので、積極的に使ってみてください。