JavaScriptの分割代入(Destructuring)を完全理解する — 基本からネスト・Restプロパティまで

はじめに: なぜ分割代入が必要なのか

JavaScriptで開発をしていると、APIレスポンスや複雑な設定オブジェクトを扱う機会が非常に多いですよね。従来は、配列やオブジェクトから値を一つずつ取り出して変数に代入する、冗長なコードを書く必要がありました。

// 従来の方法: 一つずつ取り出す
const theArray = [ false, true, false ];
const firstElement = theArray[0];
const secondElement = theArray[1];
const thirdElement = theArray[2];

これでは変数宣言だけで3行、しかも配列のインデックスを毎回指定するためミスも起こりやすく、可読性も低いです。ES6(ECMAScript 2015)で導入された**分割代入(Destructuring Assignment)**は、こうした面倒を一気に解決してくれます。

// 分割代入: たった1行で完了！
const [ firstElement, secondElement, thirdElement ] = theArray;

この記事では、分割代入の基本構文から実務で役立つ高度なパターンまで、実際のコードで一つずつ解説していきます。元ネタはCSS-TricksのJavaScript for Everyoneコースからの抜粋をベースに再構成しています。

配列の分割代入: 基本を押さえる

配列を分解するときは角括弧([])を使います。各変数には配列のインデックス順に値が代入されます。

const theArray = [ false, true, false ];
const [ firstElement, secondElement, thirdElement ] = theArray;

console.log( firstElement );  // false
console.log( secondElement ); // true
console.log( thirdElement );  // false

特定の要素をスキップする

カンマだけ残して変数名を省略すると、そのインデックスの値をスキップできます。

const theArray = [ true, false, true ];
const [ firstElement, , thirdElement ] = theArray;

console.log( firstElement ); // true
console.log( thirdElement ); // true (2番目の要素はスキップ)

デフォルト値を設定する

分解対象の配列に該当インデックスの値がない、またはundefinedの場合に使われるデフォルト値を指定できます。

const theArray = [ true, undefined ];
const [ firstElement, secondElement = "デフォルト文字列", thirdElement = 100 ] = theArray;

console.log( secondElement ); // "デフォルト文字列"
console.log( thirdElement );  // 100

オブジェクトの分割代入: キー名で値を取り出す

オブジェクトを分解するときは中括弧({})を使います。変数名はオブジェクトのプロパティキーと一致している必要があります。

const theObject = {
  "theProperty" : true,
  "theOtherProperty" : false
};

const { theProperty, theOtherProperty } = theObject;

console.log( theProperty );       // true
console.log( theOtherProperty );  // false

別の変数名で代入する

プロパティキーと異なる名前の変数に代入したい場合は、キー: 新しい変数名 という構文を使います。

const theObject = {
  "theProperty" : true,
  "theOtherProperty" : false
};

const { theProperty : theIdentifier, theOtherProperty : theOtherIdentifier } = theObject;

console.log( theIdentifier );      // true
console.log( theOtherIdentifier ); // false

代入パターン vs バインディングパターン

分割代入には2つの方式があります。

バインディングパターン (Binding Pattern)

letやconstで変数を宣言しながら同時に分解する方式です。最も一般的で簡潔です。

const theArray = [ true, false ];
const [ theFirstIdentifier, theSecondIdentifier ] = theArray;

代入パターン (Assignment Pattern)

既に宣言済みの変数に値を代入する場合に使います。特に既存の配列やオブジェクトの特定の位置に値を再代入するときに便利です。

const theArray = [ true, false ];
let theFirstIdentifier;
let theSecondIdentifier;

[ theFirstIdentifier, theSecondIdentifier ] = theArray;

代入パターンの真価は配列要素の順序入れ替えのような処理で発揮されます。バインディングパターンでは重複宣言エラーになるケースも、代入パターンならスマートに解決できます。

const theArray = [ true, false ];
let theResultArray = [];

[ theResultArray[1], theResultArray[0] ] = theArray;

console.log( theResultArray ); // [ false, true ] (順序が入れ替わった)

オブジェクトで代入パターンを使う際は注意点があります。中括弧がブロック文と解釈されないよう、括弧で囲む必要があります。

const theObject = {
  "theProperty" : true,
  "theOtherProperty" : false
};

let theProperty;
let theOtherProperty;

// 括弧で囲まないと SyntaxError!
({ theProperty, theOtherProperty } = theObject );

代入パターンを使えば、オブジェクトの特定のプロパティを別のオブジェクトのプロパティに直接マッピングすることもできます。

const theObject = {
  "theProperty" : true,
  "theOtherProperty" : false
};

let resultObject = {};

({ theProperty : resultObject.resultProp, theOtherProperty : resultObject.otherResultProp } = theObject );

console.log( resultObject );
// { resultProp: true, otherResultProp: false }

ネストされたデータ構造の分割代入: 実務で最も使うパターン

実際のプロジェクトでは、オブジェクトの中にオブジェクト、配列の中にオブジェクトなど、複雑な構造のデータを頻繁に扱います。分割代入は、こうしたネスト構造も1行でスッキリと分解できます。

const theObject = {
  "theProperty" : true,
  "theNestedObject" : {
    "anotherProperty" : true,
    "stillOneMoreProp" : "A string."
  }
};

// ネストされたオブジェクトも一度に分解!
const { theProperty, theNestedObject : { anotherProperty, stillOneMoreProp } } = theObject;

console.log( stillOneMoreProp ); // "A string."

オブジェクトの配列も同様です。

const theObject = [{
  "aProperty" : true,
},{
  "anotherProperty" : "A string."
}];

const [{ aProperty }, { anotherProperty }] = theObject;

console.log( anotherProperty ); // "A string."

Restプロパティ: 残りの値をひとまとめにする

分解して残った残りの要素を1つの配列やオブジェクトにまとめたい場合は、restプロパティ(...)を使います。

const theArray = [ false, true, false, true, true, false ];
const [ firstElement, secondElement, ...remainingElements ] = theArray;

console.log( remainingElements );
// [ false, true, true, false ]

オブジェクトでも同様に動作します。実際のAPIレスポンスデータを扱う際に非常に便利です。以下はニュースレターの投稿データの例です。

const firstPost = {
  "id": "mat-update-1.md",
  "slug": "mat-update-1",
  "body": "皆さん、こんにちは。私はMatです。",
  "data": {
    "title": "Meet your Instructor",
    "pubDate": "2025-05-08T09:55:00.630Z",
    "headingSize": "large",
    "showUnsubscribeLink": true,
    "stream": "javascript-for-everyone"
  }
};

// titleだけを別途取り出し、残りのdataプロパティはmetaDataにまとめる
const { data : { title, ...metaData }, body } = firstPost;

console.log( title );    // "Meet your Instructor"
console.log( metaData );
// { pubDate: "2025-05-08T09:55:00.630Z", headingSize: "large", showUnsubscribeLink: true, stream: "javascript-for-everyone" }

こうしておけば、APIからどんな追加プロパティが返ってきても、metaDataオブジェクトにすべて入るので柔軟に対応できます。

注意点と制限

1. nullやundefinedは分解できません。 分解対象がnullやundefinedだとTypeErrorが発生するので、オプショナルチェイニング(?.)やデフォルト値と併用するのがおすすめです。

2. ネストが深すぎると可読性が下がります。 3段階以上深くなるとかえってコードが読みにくくなります。適切に分割して使いましょう。

3. パフォーマンス: 通常のプロパティアクセスと比較すると微々たる差ですが、ほとんどのアプリケーションでボトルネックになることはありません。

実務での活用ポイントとまとめ

分割代入は特に以下のような場面で真価を発揮します。

• React/Vueコンポーネントでpropsやstateを取り出すとき
• APIレスポンスデータを加工するとき
• 設定オブジェクトから必要な値だけを抽出するとき
• 関数の引数でオブジェクトを受け取るとき (引数の場所で直接分解)

// 関数のパラメータで直接分解
function printUser({ name, age, ...rest }) {
  console.log(`${name} (${age}歳)`);
  // restには他の追加プロパティが入っている
}

日本の開発現場でも分割代入は標準的に使われています。TypeScriptと組み合わせると型安全性も確保でき、さらに強力です。

次のステップとしての学習方向:

• 分割代入とセットでよく使われる**スプレッド演算子(Spread Operator)**も併せて学習しましょう。
• TypeScriptの型推論と組み合わせると、より強力なパターンを作れます。
• 実際のオープンソースプロジェクト(React, Vue, Lodashなど)のソースコードを読んで、分割代入がどう使われているか分析してみるのも良い方法です。

JavaScriptの分割代入は最初は慣れないかもしれませんが、使いこなせるとコードを格段に簡潔で表現力豊かにしてくれます。今日学んだパターンを実際のコードに適用しながら、感覚を掴んでいってください！

合わせて読みたい記事

• NVIDIAの新しいマルチモーダルモデル、Nemotron 3 Nano Omni — ドキュメント・動画・音声を一つに
• MetaのFFmpegフォーク廃止 — 大規模メディア処理のためのアップストリーム貢献戦略