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];
  }
}

これで、これらのゲッターとセッターをプロパティのように使用できるようになります：

// 新しい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のゲッターとセッターを追加することです：

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

チートシート

ゲッターとセッターは、プロパティのように見えますが、アクセスまたは変更されたときにコードを実行する特殊なメソッドです。

ゲッター - getキーワードを使用して、値を返すメソッドを定義します：

class Person {
  constructor(firstName, lastName) {
    this._firstName = firstName;
    this._lastName = lastName;
  }
  
  get fullName() {
    return `${this._firstName} ${this._lastName}`;
  }
}

セッター - setキーワードを使用して、値を受け取るメソッドを定義します：

class Person {
  set fullName(value) {
    const parts = value.split(' ');
    this._firstName = parts[0];
    this._lastName = parts[1];
  }
}

使用法 - プロパティのように（括弧なしで）ゲッターとセッターにアクセスします：

const person = new Person('John', 'Doe');

// ゲッターの使用
console.log(person.fullName); // John Doe

// セッターの使用
person.fullName = 'Jane Smith';
console.log(person.fullName); // Jane Smith

自分で試してみよう

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を出力するはずです（変更なし）