Navigation

📁 JavaScript

JavaScript ES6+ の分割代入（Destructuring）活用術

📅 7月 8, 2025
👤
⏱ 1 min read

トピック: JavaScript ES6+ の分割代入（Destructuring）活用術

—

概要

JavaScriptにおける分割代入（Destructuring）は、ES6以降の機能であり、オブジェクトや配列から値を取り出して変数に代入する便利な方法です。この技術はコードの可読性を向上させ、簡潔な記述が可能となります。また、複雑なオブジェクトや配列から必要なデータを簡単に取り出すことができるため、開発効率が向上します。

サンプルコード


// オブジェクトの分割代入
const person = { name: 'Alice', age: 30 };
const { name, age } = person;
console.log(name); // 'Alice'
console.log(age); // 30

// 配列の分割代入
const numbers = [1, 2, 3, 4, 5];
const [a, b, ...rest] = numbers;
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]

解説

上記のサンプルコードでは、オブジェクトと配列の分割代入を示しています。オブジェクトの場合はキーに対応する値を、配列の場合はインデックスに対応する値を取り出しています。`…rest`のように残りの値をまとめて取得することも可能です。

分割代入は、複数の変数に同時に代入する際に特に便利です。また、関数の戻り値としてオブジェクトや配列を返す際にも活用できます。

応用例・バリエーション


// 関数の引数での分割代入
function getUserInfo({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}
const user = { name: 'Bob', age: 25 };
getUserInfo(user);

// ネストしたオブジェクトの分割代入
const user = { name: 'Charlie', age: 35, address: { city: 'Tokyo', country: 'Japan' } };
const { name, age, address: { city } } = user;
console.log(city); // 'Tokyo'

ベストプラクティス

  • 分割代入を過度にネストさせないことで可読性を向上させる
  • 未使用の値を無視するために`_`などの変数名を使用する
  • 関数の引数や戻り値で活用して、関数のシグネチャを明確にする

関連技術・参考情報

  • [MDN web docs: 分割代入](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
  • [Exploring JS: Destructuring](https://exploringjs.com/es6/ch_destructuring.html)

—

この記事では、JavaScriptにおける分割代入の活用術について解説しました。分割代入はコードの可読性や開発効率を向上させるため、積極的に活用することでより効果的なコーディングが可能となります。

← Back to JavaScript