React ES6 分割代入 (Destructuring)

Volardev 編集部 April 28, 2026

1. React における分割代入（Destructuring）

分割代入（Destructuring）は、オブジェクトや配列から値を取り出し、それらを個別の変数（Variables）に展開できる JavaScript の機能です。React では、プロップス（Props）、フック（Hooks）、ステート管理において非常によく使われます。

注釈： 分割代入を活用することで、オブジェクトや配列への反復的なアクセスを減らし、React のコードをよりクリーンで読みやすくすることができます。

2. 配列の分割代入 (Destructuring Arrays)

まず、配列の要素を変数に代入する従来のスタイルを見てみましょう。

2.1 以前の書き方

const vehicles = ['mustang', 'f-150', 'expedition'];

// 以前のやり方
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];

// 各変数を個別に利用可能：
document.getElementById('demo').innerHTML = truck;

次に、分割代入を使用したモダンな書き方です。

2.2 分割代入を使用した書き方

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car, truck, suv] = vehicles;

// 各変数を個別に利用可能：
document.getElementById('demo').innerHTML = truck;

配列の分割代入では、変数を宣言する順番が非常に重要です。

もし car と suv だけが必要な場合は、truck を省略しつつ、カンマ（,）を残すことで対応できます。

const vehicles = ['mustang', 'f-150', 'expedition'];
const [car,, suv] = vehicles;

分割代入は、関数が配列を返す場合に非常に便利です。

2.3 関数の戻り値での活用例

function dateInfo(dat) {
  const d = dat.getDate();
  const m = dat.getMonth() + 1;
  const y = dat.getFullYear();

  return [d, m, y];
}

const [date, month, year] = dateInfo(new Date());

3. オブジェクトの分割代入 (Destructuring Objects)

オブジェクトから値を抽出する場合も分割代入が威力を発揮します。

3.1 オブジェクトの値を取り出す

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// 分割代入
let {firstName, lastName, age} = person;

// 各変数を個別に利用可能：
document.getElementById("demo").innerHTML = firstName;

オブジェクトの場合、プロパティを記述する順番は関係ありません。

3.2 任意の順番での抽出

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// 順番を入れ替えても動作します
let {lastName, age, firstName} = person;

必要な値だけを抽出することも可能です。

3.3 特定のプロパティのみを抽出

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// firstName だけを取り出す
let {firstName} = person;

存在しない可能性があるプロパティに対しては、デフォルト値（Default values）を設定できます。

3.4 デフォルト値の設定

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// country が存在しない場合のデフォルト値を設定
let {firstName, lastName, age, country = "Norway"} = person;

また、深くネスト（入れ子）されたオブジェクトも、コロンと波括弧を使って参照することで、必要な項目を抽出できます。

3.5 ネストされたオブジェクトの分割代入

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  car: {
    brand: 'Ford',
    model: 'Mustang',
  }
};

// ネストされた car オブジェクトの中身も同時に抽出
let {firstName, car: { brand, model }} = person;

let message = `私の名前は ${firstName} です。${brand} の ${model} に乗っています。`;

4. React コンポーネントでの分割代入

React では、プロップスやフック、API レスポンスを扱う際に分割代入が特に役立ちます。これにより、コードがより簡潔になり、可読性が高まります。

4.1 プロップス（Props）の分割代入

コンポーネントがプロップスを受け取る際、必要な値を直接抽出できます。分割代入を使う場合と使わない場合の違いを比較してみましょう。

分割代入を使用する場合：

function Greeting({ name, age }) {
  return <h1>こんにちは、{name}さん！あなたは {age} 歳ですね。</h1>;
}

分割代入を使用しない場合：

function Greeting(props) {
  return <h1>こんにちは、{props.name}さん！あなたは {props.age} 歳ですね。</h1>;
}

実際の動作例は以下の通りです。

import { createRoot } from 'react-dom/client'

function Greeting({ name, age }) {
  return <h1>こんにちは、{name}さん！あなたは {age} 歳ですね。</h1>;
}

createRoot(document.getElementById('root')).render(
  <Greeting name="ジョン" age={25} />
);

4.2 useState フックでの分割代入

useState フックを使用する際、戻り値である配列を分割代入して、ステート（State）変数と更新用関数を抽出します。

import { createRoot, useState } from 'react-dom/client'

function Counter() {
  // useState が返す配列を分割代入で受け取る
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      カウント: {count}
    </button>
  );
}

createRoot(document.getElementById('root')).render(
  <Counter />
);