はじめに
ES5以前では、配列やオブジェクトの各データにアクセスするためには、それぞれのプロパティやインデックスに対して明示的な参照が必要でした。ES6では「分割代入」という機能が追加され、この手間を省いて簡潔なコードを記述できるようになりました。
分割代入を使用することで、配列やオブジェクトなどのデータを分解し、個々の要素を取り出して変数に代入することができます。これにより、コードの可読性を高め、複雑な構造を持つデータを効率的に操作することが可能になります。
分割代入は現在のJavaScript開発では広く利用されており、JavaScriptの基本として必須の知識といえるでしょう。この記事では、分割代入の基本をはじめ、関数と組み合わせた応用的な使い方について解説していきます。
この記事の対象者
- JavaScript初学者の方
- 「const { prop1, prop2 }」のような記述が分からない方
- 可読性を意識したい方
この記事で学べること
- 分割代入のメリット
- 分割代入の基本
- 配列での分割代入について
- オブジェクトでの分割代入について
- 関数での分割代入の活用方法
分割代入を使う理由
分割代入は配列やオブジェクトなどのデータ構造から要素を取り出す際に便利な機能です。分割代入を使用するメリットを理解するために、まずは分割代入を使用しない場合の例を見てみましょう。
例として、配列から要素を取得する場合は以下の方法で行います。
const numbers = [1, 2, 3];
const a = numbers[0];
const b = numbers[1];
const c = numbers[2];また、オブジェクトからプロパティを取得する場合は以下です。
const person = {
name: 'Taro',
age: 20
};
const name = person.name;
const age = person.age;上記の二つの例は特に問題のないコードです。配列やオブジェクトからデータを取得するという処理はシンプルであり、プログラミングの基本的な部分なので初学者の方でも比較的簡単に理解できるかと思います。
しかし、このような簡単な処理を長々と記述することはコーディングにおいて退屈な作業です。分割代入を使用することで、この手間を省くことができます。
上記の二つの例を分割代入で記述すると以下のようになります。
// 配列の分割代入
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
// オブジェクトの分割代入
const person = {
name: 'Taro',
age: 20
};
const { name, age } = person;上記のように、分割代入を使用するとデータ構造からの値の取得が一行の記述で済みます。コードの記述量を減らし、効率的なコーディングを行うことができます。
分割代入の基本
分割代入の機能は基本的にはシンプルであり、初学者の方でも簡単に使用することができます。しかし、配列から要素を取得する場合とオブジェクトからプロパティを取得する場合では多少異なる部分もあるので、これらについて解説します。
配列の分割代入
配列の要素を分割代入する際は「[]」を使用します。
// 配列の分割代入
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a);
// 結果：1
console.log(b);
// 結果：2
console.log(c);
// 結果：3また、配列の分割代入では、配列のインデックスと対応した位置に値が代入されます。配列から2番目以外の要素を変数に代入する際は以下のように行うことができます。
const numbers = [1, 2, 3];
// 2番目には変数名を書かない
const [a, , b] = numbers;
console.log(a);
// 結果：1
console.log(b);
// 結果：3オブジェクトの分割代入
オブジェクトのプロパティを分割代入する際は「{}」を使用します。
// オブジェクトの分割代入
const person = {
name: 'Taro',
age: 20
};
const { name, age } = person;
console.log(name);
// 結果：Taro
console.log(age);
// 結果：20オブジェクトの分割代入では、オブジェクトのプロパティ名と一致する変数に値が代入されます。配列の場合と違って順序は関係ありません。
const person = {
name: 'Taro',
age: 20
};
// 順番を変更
const { age, name } = person;
console.log(age);
// 結果：20
console.log(name);
// 結果：Taroプロパティ名と違う名前の変数名を使用したい場合は以下のように行うことができます。
const person = {
name: 'Taro',
age: 20
};
// 以下を変更（一行だと読みにくいので改行しています）
const {
age: originalAge,
name: originalName
} = person;
console.log(originalAge);
// 結果：20
console.log(originalName);
// 結果：Taroネストしたデータの分割代入
分割代入はネストした配列やオブジェクトの中からも値を取り出すことができます。この場合、ネストしたデータ構造に合わせて「[]」や「{}」を使い分ける必要があります。
// ネストしたオブジェクト
const person = {
name: 'Taro',
age: 20,
address: {
city: 'Tokyo',
country: 'Japan'
}
};
const {
name,
age,
address: {
city,
country
}
} = person;
console.log(name);
// 結果：'Taro'
console.log(age);
// 結果：20
console.log(city);
// 結果：'Tokyo'
console.log(country);
// 結果：'Japan'
ネストした配列やオブジェクトから分割代入を行う際は、ネストの深さに応じて分割代入の記述も複雑になります。ネストが深いとコードの可読性が損なわれる可能性があるので注意が必要です。
デフォルト値を設定する
分割代入を行う際、元データの範囲を超えていたりプロパティが未定義だったりするとundefinedが格納されます。
const numbers = [1, 2, 3];
// d変数はnumbersの範囲を超えています
const [a, b, c, d] = numbers;
console.log(d);
// 結果：undefined
const person = {
name: 'Taro',
age: 20
};
// addressは未定義のプロパティです
const { name, age, address } = person;
console.log(address);
// 結果：undefined分割代入では、値がundefinedだった場合にデフォルト値を設定することができます。
const numbers = [1, 2, 3];
// dのデフォルト値を999に設定
const [a, b, c, d = 999] = numbers;
console.log(d);
// 結果：999デフォルト値はundefinedのときのみ有効です。値がnullの場合は適用されません。
const numbers = [1, 2, 3, null];
const [a, b, c, d = 999] = numbers;
console.log(d);
// 結果：null分割代入の基本は以上です。続いて、応用的な分割代入の使い方について見ていきます。
分割代入の応用
分割代入は単純な値の取得だけでなく、関数の引数や戻り値としての活用や、レスト演算子と組み合わせて使用することができます。これらの方法について解説します。
関数の戻り値を分割代入する
関数やメソッドは配列やオブジェクトを戻り値として返す場合があります。分割代入は関数の戻り値に対しても使用することができます。簡単な例を挙げます。
const numbers = [1, 2, 3];
const [
doubled1,
doubled2,
doubled3
] = numbers.map(num => num * 2);
console.log(doubled1);
// 結果：2
console.log(doubled2);
// 結果：4
console.log(doubled3);
// 結果：6上記の例では、map()メソッドを使用してnumbers配列の値を2倍にした配列を生成しています。map()メソッドは戻り値として配列を返すので、これに対して分割代入を使用することも出来ます。
独自で定義した関数に対しても分割代入は使用できます。以下を見てみましょう。
// オブジェクトを返す関数
function getPerson() {
return { name: 'Taro', age: 20 };
}
const { name, age } = getPerson();
console.log(name);
// 結果：Taro
console.log(age);
// 結果：20上記の例では、分割代入の宣言時にgetPerson()というオブジェクトを返す関数を呼び出すことでname変数とage変数を定義しています。値が正しく取得していることが確認できます。
関数の引数に分割代入を使用する
関数の引数として配列やオブジェクトを受け取る場合、分割代入を使用することで必要な値を抽出することができます。直接的に構造化されたデータを受け取るよりも処理がシンプルになるメリットがあります。
// 引数に分割代入を使用
function greet({ name, age }) {
console.log(`Hello, ${name}! You are ${age} years old.`);
}
const person = {
name: 'Taro',
age: 20
};
greet(person);
// 結果: Hello, Taro! You are 20 years old.上記の例では、greet()関数の引数に分割代入を使用しています。greet()関数に渡す値はpersonオブジェクトですが、分割代入の働きによってnameプロパティとageプロパティの値を関数内で使用することができます。ちなみに、分割代入を使用しない場合は以下のようになります。
// 分割代入を使用しない場合
function greet(person) {
const name = person.name;
const age = person.age;
console.log(`Hello, ${name}! You are ${age} years old.`);
}
const person = {
name: 'Taro',
age: 20
};
greet(person);
// 結果: Hello, Taro! You are 20 years old.レスト演算子との組み合わせ
分割代入とレスト演算子を組み合わせることで、残りの値をまとめて取得することもできます。レスト演算子は複数のデータを配列やオブジェクトにまとめる機能を提供します。
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」の部分がレスト演算子になります。numbers配列の一番目の要素と二番目の要素はそれぞれ変数a、bに格納され、それ以外の値が配列としてrestに格納されます。ちなみに、配列において分割代入で取得を無視した要素はレスト演算子にも格納されません。
const numbers = [1, 2, 3, 4, 5];
// 2番目の要素を無視
const [a, , b, ...rest] = numbers;
console.log(rest);
// 結果：[4, 5]レスト演算子については以下の記事で詳しく解説しています。興味のある方は参考にしてください。
最後に
この記事では、分割代入の基本をはじめ、関数と組み合わせた応用的な使い方について解説しました。
分割代入は、外部APIからのレスポンスの受け取りや、Reactなどのライブラリにおいてのコンポーネントの定義、構造化されたフォームデータの処理など、実際の開発においてさまざまな場面で活用されます。
分割代入を効果的に活用することで、コードの可読性の向上や効率化が期待されます。分割代入は初学者の方でも簡単に活用できる機能なので、積極的に利用することをオススメします。