#044　フロントサイド（9）：JavaScript入門6（分割代入）

KINO↓

2024年8月1日 07:54

ビギナーのためのオブジェクト分割代入

オブジェクトの分割代入とは？

オブジェクトの分割代入は、オブジェクトからプロパティを取り出して、別々の変数に簡単に代入する方法です。これは、大きなオブジェクトから必要な情報だけを取り出すときに特に便利です。

基本的な使い方

従来の方法

まず、従来のオブジェクトからプロパティを取り出す方法を見てみましょう

const person = {
    name: "山田太郎",
    age: 30,
    job: "エンジニア"
};

const name = person.name;
const age = person.age;

console.log(name); // 出力: 山田太郎
console.log(age);  // 出力: 30

分割代入を使う方法

同じことを分割代入を使って行うと、このようになります

const person = {
    name: "山田太郎",
    age: 30,
    job: "エンジニア"
};

const { name, age } = person;

console.log(name); // 出力: 山田太郎
console.log(age);  // 出力: 30

分割代入のメリット

コードが短くなる: 一行で複数のプロパティを取り出せます。
読みやすくなる: どのプロパティを使用するかが一目でわかります。
タイプミスを減らせる: プロパティ名を繰り返し書く必要がないので、ミスが減ります。

応用例

変数名を変更する

プロパティ名と異なる変数名を使いたい場合

const person = {
    name: "山田太郎",
    age: 30
};

const { name: fullName, age: yearsOld } = person;

console.log(fullName); // 出力: 山田太郎
console.log(yearsOld); // 出力: 30

デフォルト値を設定する

プロパティが存在しない場合のデフォルト値を設定できます

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

const { name, age = 20 } = person;

console.log(name); // 出力: 山田太郎
console.log(age);  // 出力: 20 (デフォルト値が使用される)

まとめ

オブジェクトの分割代入は：

オブジェクトからプロパティを簡単に取り出せる方法
コードを短く、読みやすくする
必要な情報だけを効率的に抽出できる

初めは少し奇妙に見えるかもしれませんが、使っていくうちにその便利さがわかるはずです。大きなオブジェクトを扱う際に特に役立つテクニックです！

終わりに

少し長くなったので、ここで一旦お話をクローズさせて頂きます。
自分自身の学習記録帳のため、乱雑な文章になっている可能性があります。
申し訳ございません。

最後までお読みいただき、ありがとうございます。
私も皆さんのnoteを拝見させて頂いて、多くの気づきを得ています。
本当に感謝🙏です。
今後ともよろしくお願いします。