JavaScript 分割代入

Volardev 編集部 April 18, 2026

1. 分割代入の構文

分割代入（Destructuring Assignment）の構文を使用すると、オブジェクトをアンパック（展開）して個別の変数に代入することができます。

let {firstName, lastName} = person;

2. オブジェクトの分割代入

2.1 基本的な使い方

オブジェクトから特定のプロパティを抽出して変数に割り当てます。

// オブジェクトを作成
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// 分割代入を実行
let {firstName, lastName} = person;

2.2 プロパティの順序

分割代入において、プロパティの順序は重要ではありません。

// オブジェクトを作成
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// 順序を入れ替えても正しく抽出されます
let {lastName, firstName} = person;

2.3 非破壊的な操作

分割代入は非破壊的（Non-destructive）です。元のオブジェクトの中身を変更することはありません。

3. オブジェクトのデフォルト値

抽出するプロパティがオブジェクトに存在しない場合に備えて、デフォルト値を設定することができます。

// オブジェクトを作成
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// countryプロパティが存在しない場合のデフォルト値を "US" に設定
let {firstName, lastName, country = "US"} = person;

4. オブジェクトプロパティのエイリアス（別名）

オブジェクトのプロパティ名とは異なる名前の変数に値を代入したい場合は、エイリアスを使用します。

// オブジェクトを作成
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// lastName プロパティを name という変数名で抽出
let {lastName : name} = person;

5. 文字列の分割代入

分割代入は文字列のアンパックにも利用できます。

// 文字列を作成
let name = "Volardev";

// 1文字ずつ変数に展開
let [a1, a2, a3, a4, a5] = name;

分割代入は、あらゆるイテラブル（Iterables / 反復可能オブジェクト）に対して使用可能です。

6. 配列の分割代入

配列の要素を独自の変数としてピックアップすることができます。

// 配列を作成
const fruits = ["Banana", "Orange", "Apple", "Mango"];

// 分割代入を実行
let [fruit1, fruit2] = fruits;

7. 配列要素のスキップ

カンマを連続して記述することで、配列内の特定の要素をスキップできます。

// 配列を作成
const fruits = ["Banana", "Orange", "Apple", "Mango"];

// 1番目と4番目の要素のみを抽出
let [fruit1,,,fruit2] = fruits;

8. 配列のインデックス指定

配列の特定のインデックス位置を指定して値を抽出することも可能です。

// 配列を作成
const fruits = ["Banana", "Orange", "Apple", "Mango"];

// インデックスを指定して抽出
let {[0]:fruit1, [1]:fruit2} = fruits;

9. Restプロパティ（残余プロパティ）

分割代入の末尾にRestプロパティを使用できます。これにより、残りのすべての値を新しい配列にまとめて格納できます。

// 配列を作成
const numbers = [10, 20, 30, 40, 50, 60, 70];

// aとb以外の残りを rest 配列に格納
const [a, b, ...rest] = numbers;

10. Mapの分割代入

分割代入は Map オブジェクトのループ処理などでも非常に有効です。

// Mapオブジェクトを作成
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

// ループ内でキーと値を分割代入
let text = "";
for (const [key, value] of fruits) {
  text += key + " は " + value + " 円です。";
}

11. 変数の入れ替え（スワップ）

分割代入を利用すると、一時的な変数を使わずに2つの変数の値を簡単に入れ替えることができます。

let firstName = "John";
let lastName = "Doe";

// 値をスワップ
[firstName, lastName] = [lastName, firstName];