JavaScript分割代入を習得!7つの具体例で解説

JavaScript分割代入の概念図 JS
この記事は約6分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptの分割代入を使いこなすことができるようになります。

分割代入は、コードの可読性や効率性を向上させるために非常に便利な機能です。

初心者でも理解しやすいように、具体的なサンプルコードを交えて解説していきます。

●JavaScript分割代入とは

○分割代入の基本

JavaScriptの分割代入は、配列やオブジェクトの要素を一度に複数の変数に代入することができる機能です。

分割代入を使うことで、コードがスッキリとして可読性が向上し、効率的に開発が進められます。

●分割代入の使い方

ここでは、分割代入の基本的な使い方についてサンプルコードを交えて解説します。

○サンプルコード1:配列から値を取り出す

このコードでは、分割代入を使って配列から値を取り出して複数の変数に代入する方法を紹介しています。

この例では、配列colorsの要素をそれぞれcolor1color2color3に代入しています。

const colors = ['赤', '青', '緑'];
const [color1, color2, color3] = colors;
console.log(color1, color2, color3); // 出力: 赤 青 緑

○サンプルコード2:オブジェクトからプロパティを取り出す

このコードでは、分割代入を使ってオブジェクトからプロパティを取り出して複数の変数に代入する方法を紹介しています。

この例では、オブジェクトpersonのプロパティをそれぞれnameagecityに代入しています。

const person = {
  name: '山田太郎',
  age: 30,
  city: '東京'
};

const {name, age, city} = person;
console.log(name, age, city); // 出力: 山田太郎 30 東京

○サンプルコード3:関数の引数として使用する

このコードでは、分割代入を使って関数の引数としてオブジェクトのプロパティを渡す方法を紹介しています。

この例では、関数printPersonの引数に分割代入を用いて、オブジェクトのプロパティを渡しています。

function printPerson({name, age, city}) {
  console.log(`${name}さんは${age}歳で、${city}に住んでいます。`);
}

const person = {
  name: '山田太郎',
  age: 30,
  city: '東京'
};

printPerson(person); // 出力: 山田太郎さんは30歳で、東京に住んでいます。

○サンプルコード4:入れ替える

このコードでは、分割代入を使って変数の値を入れ替える方法を紹介しています。

この例では、abの値を分割代入を使って入れ替えています。

let a = 1;
let b = 2;

[a, b] = [b, a];
console.log(a, b); // 出力: 2 1

●分割代入の応用例

ここでは、分割代入の応用例として、より複雑な構造のデータから情報を取り出す方法をサンプルコードを交えて解説します。

○サンプルコード5:ネストされたオブジェクトや配列の分割代入

このコードでは、ネストされたオブジェクトや配列から値を取り出す際に分割代入を使用する方法を紹介しています。

この例では、オブジェクトdataのネストされたプロパティaddressからcitycountryを取り出し、さらにfriends配列から最初の友達の名前を取り出しています。

const data = {
  name: '山田太郎',
  address: {
    city: '東京',
    country: '日本'
  },
  friends: [
    {name: '鈴木一郎', age: 28},
    {name: '佐藤二郎', age: 31}
  ]
};

const {
  address: {city, country},
  friends: [{name: friendName}]
} = data;

console.log(city, country, friendName); // 出力: 東京 日本 鈴木一郎

○サンプルコード6:分割代入とデフォルト値の組み合わせ

このコードでは、分割代入とデフォルト値を組み合わせて、オブジェクトからプロパティを取り出す方法を紹介しています。

この例では、オブジェクトpersonからnameageを取り出し、ageにデフォルト値20を設定しています。

const person = {
  name: '山田太郎'
};

const {name, age = 20} = person;
console.log(name, age); // 出力: 山田太郎 20

○サンプルコード7:複数のオブジェクトをマージする

このコードでは、分割代入を利用して複数のオブジェクトをマージする方法を紹介しています。

この例では、オブジェクトdefaultSettingsuserSettingsをマージして新しいオブジェクトsettingsを作成しています。

const defaultSettings = {
  fontSize: '16px',
  color: 'black'
};

const userSettings = {
  fontSize: '18px'
};

const settings = {...defaultSettings, ...userSettings};
console.log(settings); // 出力: { fontSize: '18px', color: 'black' }

●注意点と対処法

分割代入を使用する際に注意すべき点や対処法をいくつか紹介します。

  1. 分割代入で取り出すプロパティが存在しない場合、変数にはundefinedが代入されます。
    これを回避するために、デフォルト値を使用することができます。
  2. 分割代入を使用してネストされたプロパティを取り出す際に、親オブジェクトが存在しない場合エラーが発生します。
    そのため、エラーを回避するために親オブジェクトの存在を事前に確認するか、オプショナルチェイニング演算子を使用することができます。
  3. 配列の分割代入では、インデックスが存在しない場合もundefinedが代入されます。
    この場合も、デフォルト値を使用することができます。

●カスタマイズ方法

分割代入をカスタマイズして使用する方法をいくつか紹介します。

  1. 分割代入を使用して、特定のプロパティや要素を無視することができます。
    例えば、配列の最初の要素を無視したい場合、次のように記述できます。
const [, secondElement] = [1, 2, 3];
console.log(secondElement); // 出力: 2
  1. 分割代入を使用して、残りのプロパティや要素を新しいオブジェクトや配列に格納することができます。
    これには、レスト構文(...)を使用します。
const [firstElement, ...restElements] = [1, 2, 3, 4];
console.log(firstElement, restElements); // 出力: 1 [2, 3, 4]

まとめ

分割代入は、オブジェクトや配列からプロパティや要素を簡潔に取り出す方法です。

注意点や対処法を把握し、カスタマイズ方法を活用することで、コードをより効率的で読みやすくすることができます。

今回紹介したサンプルコードを参考に、分割代入をうまく活用してください。