JavaScriptのゲッターとセッター

JavaScriptにおけるゲッター（Getter）とセッター（Setter）完全ガイド

1. はじめに

JavaScriptのオブジェクト指向プログラミング（OOP）では、ゲッター（getter） と セッター（setter） を使用して、オブジェクトのプロパティの取得や設定を制御することができます。これにより、データのカプセル化やバリデーション、処理の自動化が可能になります。

本記事では、ゲッターとセッターの基本概念から、高度な応用例まで詳しく解説します。

2. ゲッター（Getter）とは？

ゲッター は、オブジェクトのプロパティの値を取得する際に実行されるメソッドです。通常のプロパティのようにアクセスできますが、実際には関数が呼び出されています。

2.1 基本的なゲッターの使い方

javascript
CopyEdit
class User {
  constructor(name) {
    this._name = name;  // プライベートなプロパティ（慣習的に _ を付ける）
  }

  get name() {
    return this._name;
  }
}

const user = new User("太郎");
console.log(user.name); // 出力: 太郎

解説:

• get name() というメソッドを定義することで、user.name のように通常のプロパティのようにアクセス可能。

• this._name を返すことで、内部データを取得できる。

3. セッター（Setter）とは？

セッター は、オブジェクトのプロパティの値を変更する際に実行されるメソッドです。データの検証や処理を追加できるため、不正な値の設定を防ぐのに役立ちます。

3.1 基本的なセッターの使い方

javascript
CopyEdit
class User {
  constructor(name) {
    this._name = name;
  }

  get name() {
    return this._name;
  }

  set name(newName) {
    if (typeof newName !== "string" || newName.length < 2) {
      console.error("名前は2文字以上の文字列である必要があります。");
      return;
    }
    this._name = newName;
  }
}

const user = new User("太郎");
console.log(user.name); // 出力: 太郎

user.name = "一";  // 無効な値
// エラー: 名前は2文字以上の文字列である必要があります。

user.name = "次郎";  // 正しい値
console.log(user.name); // 出力: 次郎

解説:

• set name(newName) により、user.name = "次郎"; のようにプロパティを設定できる。

• newName のバリデーションを行い、不適切な値が代入されるのを防ぐ。

4. ゲッターとセッターのメリット

5. 実践的な活用例

5.1 計算プロパティを使用する

javascript
CopyEdit
class Rectangle {
  constructor(width, height) {
    this._width = width;
    this._height = height;
  }

  get area() {
    return this._width * this._height;
  }
}

const rect = new Rectangle(10, 5);
console.log(rect.area); // 出力: 50

解説:

• area は get を使って計算されるプロパティ。

• rect.area を呼び出すたびに width × height の計算が行われる。

5.2 非公開プロパティの管理

javascript
CopyEdit
class BankAccount {
  constructor(balance) {
    this._balance = balance;
  }

  get balance() {
    return `現在の残高: ${this._balance}円`;
  }

  set balance(amount) {
    if (amount < 0) {
      console.error("残高は負の値にはできません。");
      return;
    }
    this._balance = amount;
  }
}

const account = new BankAccount(1000);
console.log(account.balance); // 出力: 現在の残高: 1000円

account.balance = -500; // 無効な操作
// エラー: 残高は負の値にはできません。

account.balance = 2000;
console.log(account.balance); // 出力: 現在の残高: 2000円

解説:

• get balance() で整形された文字列を返す。

• set balance(amount) で負の値の設定を防ぐ。

6. Object.defineProperty() を使ったゲッター・セッター

クラスを使わずにオブジェクトリテラルでゲッター・セッターを定義する方法もある。

javascript
CopyEdit
const person = {
  _age: 30,

  get age() {
    return this._age;
  },

  set age(value) {
    if (value < 0) {
      console.error("年齢は0以上でなければなりません。");
      return;
    }
    this._age = value;
  }
};

console.log(person.age); // 出力: 30
person.age = -5; // エラー: 年齢は0以上でなければなりません。
person.age = 40;
console.log(person.age); // 出力: 40

解説:

• get と set をオブジェクトリテラルに直接定義可能。

7. Proxy を活用した高度な制御

Proxy を使うと、より動的なゲッター・セッターを作成できる。

javascript
CopyEdit
const handler = {
  get(target, prop) {
    if (prop in target) {
      return target[prop];
    }
    return `${prop} プロパティは存在しません`;
  },

  set(target, prop, value) {
    if (typeof value === "string") {
      target[prop] = value;
    } else {
      console.error(`${prop} は文字列である必要があります`);
    }
  }
};

const user = new Proxy({}, handler);
user.name = "太郎";
console.log(user.name); // 出力: 太郎

user.age = 25; // エラー: age は文字列である必要があります
console.log(user.unknown); // 出力: unknown プロパティは存在しません

解説:

• Proxy を使うことで、動的なプロパティ管理が可能になる。

• 存在しないプロパティを読み取ると適切なメッセージを返す。

8. まとめ

• ゲッター（getter） はプロパティの取得を制御する。

• セッター（setter） はプロパティの設定を制御する。

• バリデーションや計算プロパティを活用 すると便利。

• Proxy を使えば動的なプロパティ管理も可能。

これらの技術を