アクセサプロパティの定義 | getterとsetter | JavaScript 超完全入門 基本から発展までのすべて

現在作成中です。今後加筆修正してまいります。
スポンサーリンク
スポンサーリンク

アクセサプロパティとは?

JavaScriptでは、オブジェクトのプロパティには2種類のものがあります。1つは単純なデータプロパティ、もう1つはアクセサプロパティです。アクセサプロパティは、プロパティの値を取得するためのgetterと、値を設定するためのsetterの2つの関数で構成されています。

アクセサプロパティの基本的な定義

アクセサプロパティは、getsetを使って定義され、オブジェクトのプロパティにアクセスする際に追加の処理を挟むことができます。これにより、プロパティの値を取得したり設定したりする際に、特定のロジックを実行することができます。

アクセサプロパティの定義の例

const person = {
    firstName: "Taro",
    lastName: "Yamada",
    get fullName() {
        return this.firstName + " " + this.lastName;
    },
    set fullName(name) {
        const parts = name.split(" ");
        this.firstName = parts[0];
        this.lastName = parts[1];
    }
};

console.log(person.fullName);  // "Taro Yamada"

person.fullName = "Hanako Suzuki";
console.log(person.firstName);  // "Hanako"
console.log(person.lastName);   // "Suzuki"

この例では、personオブジェクトにfullNameというアクセサプロパティを定義しています。getキーワードで定義されたメソッドがfullNameを取得し、setキーワードで定義されたメソッドがfullNameに値を設定します。

getterとsetterの違い

getterは、オブジェクトのプロパティの値を取得する際に呼び出されるメソッドです。一方、setterはプロパティに新しい値を設定する際に呼び出されます。これにより、プロパティのアクセスや変更時に追加のロジックを実行することが可能になります。

getter setter
プロパティの値を取得する プロパティの値を設定する
引数を取らない 1つの引数を取る
プロパティ名で呼び出される プロパティ名で値を設定する際に呼び出される

getterとsetterを使った実例

const user = {
    ageValue: 25,
    get age() {
        return this.ageValue + "歳";
    },
    set age(value) {
        if (value > 0) {
            this.ageValue = value;
        }
    }
};

console.log(user.age);  // "25歳"
user.age = 30;
console.log(user.age);  // "30歳"

この例では、userオブジェクトにageというアクセサプロパティを定義しています。agegetterがプロパティの値に「歳」を付けて返し、setterが適切な値のみを設定します。

アクセサプロパティの利点

アクセサプロパティは、オブジェクトのプロパティに対する制御を強化し、次のような利点をもたらします:

  • データの検証: setterを使って、プロパティに設定される値を検証できます。
  • カスタムロジックの実行: getterやsetterで特定の処理を追加できます。
  • プロパティへの直接アクセスを隠す: 外部からのプロパティアクセスを制御し、内部のデータ構造を保護できます。

データ検証の例

const account = {
    _balance: 1000,
    get balance() {
        return "現在の残高は " + this._balance + " 円です";
    },
    set balance(amount) {
        if (amount >= 0) {
            this._balance = amount;
        } else {
            console.log("無効な値です");
        }
    }
};

console.log(account.balance);  // "現在の残高は 1000 円です"
account.balance = -500;        // "無効な値です"
console.log(account.balance);  // "現在の残高は 1000 円です"

この例では、accountオブジェクトにbalanceというアクセサプロパティを定義しています。setterで負の値が設定されないように検証を行い、getterで残高の値を返しています。

まとめ

アクセサプロパティは、gettersetterを使って、オブジェクトのプロパティに対するアクセスや設定時にカスタムロジックを追加できる便利な機能です。プロパティの値の取得や設定に対する制御を強化し、データの検証や保護が可能となります。適切に利用することで、オブジェクトの柔軟性と安全性を高めることができます。