get と set キーワード

CoddyのJavaScriptジャーニー「オブジェクト指向プログラミング」セクションの一部。レッスン 43/56。

ゲッターとセッターは、プロパティのように見えますが、実際には関数である特別なメソッドです。プロパティへのアクセス方法や変更方法を制御できます。

シンプルな Person クラスを作成しましょう。

class Person {
  constructor(firstName, lastName) {
    this._firstName = firstName;
    this._lastName = lastName;
  }
  
  // fullName のゲッター
  get fullName() {
    return `${this._firstName} ${this._lastName}`;
  }
  
  // fullName のセッター
  set fullName(value) {
    const parts = value.split(' ');
    this._firstName = parts[0];
    this._lastName = parts[1];
  }
}

_firstName と _lastName のアンダースコアは命名規則です。これらのプロパティが内部用であり、直接ではなくゲッターとセッターを通じて読み取りや変更を行うべきだと、ほかの開発者に伝えます。JavaScript がこれを強制するわけではありません。

これで、これらのゲッターとセッターをプロパティのように使えます。

// 新しい Person を作成する
const person = new Person('John', 'Doe');

// ゲッターを使用する
console.log(person.fullName); // 出力: John Doe

// セッターを使用する
person.fullName = 'Jane Smith';

// セッターによって内部プロパティが更新された
console.log(person.fullName); // 出力: Jane Smith

これらのメソッドは、かっこを付けて呼び出していないことに注目してください。プロパティと同じように振る舞いますが、アクセスまたは変更されたときにコードを実行します。

チャレンジ

Userクラスにはageプロパティが用意されています。次のように、ageのゲッターとセッターを追加してください。

ゲッター get age()：保存されている年齢を返す
セッター set age(newAge)：年齢が0から120の範囲内であることを検証する
- 有効な場合（0-120）：this._ageに保存する
- 無効な場合：変更せず、"Invalid age!"を出力する

自分で試してみよう

import { User } from './user.js';

// テストコード - 変更しないでください
const user = new User("Alice", 25);
console.log(user.age);      // 25 が出力されるはず

user.age = 30;
console.log(user.age);      // 30 が出力されるはず

user.age = 150;             // "Invalid age!" が表示されるはず
console.log(user.age);      // 引き続き 30 が出力されるはず（変更なし）