JS オブジェクトアクセサ

1. JavaScriptのGetterとSetter

Getter（ゲッター）とSetter（セッター）を使用することで、オブジェクトアクセサ（Object Accessors / 計算済みプロパティ）を定義することができます。

2. JavaScript Getter（getキーワード）

以下の例では、lang プロパティを使用して language プロパティの値を取得（get）しています。

// オブジェクトの作成:
const person = {
  firstName: "John",
  lastName: "Doe",
  language: "en",
  get lang() {
    return this.language;
  }
};

// Getterを使用してオブジェクトからデータを表示する:
document.getElementById("demo").innerHTML = person.lang;

3. JavaScript Setter（setキーワード）

以下の例では、lang プロパティを使用して language プロパティの値を**設定（set）**しています。

const person = {
  firstName: "John",
  lastName: "Doe",
  language: "",
  set lang(lang) {
    this.language = lang;
  }
};

// Setterを使用してオブジェクトのプロパティを設定する:
person.lang = "en";

// オブジェクトのデータを表示する:
document.getElementById("demo").innerHTML = person.language;

4. 関数か、それともGetterか？

次の2つの例の違いは何でしょうか？

const person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

// メソッドとしてオブジェクトからデータを表示する:
document.getElementById("demo").innerHTML = person.fullName();

const person = {
  firstName: "John",
  lastName: "Doe",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};

// Getterとしてオブジェクトからデータを表示する:
document.getElementById("demo").innerHTML = person.fullName;

5. データ品質の担保

JavaScriptにおいてGetterとSetterを使用すると、より高いデータ品質（Data Quality）を確保できます。

次の例では、lang プロパティを使用して、language プロパティの値を大文字にして返しています。

// オブジェクトの作成:
const person = {
  firstName: "John",
  lastName: "Doe",
  language: "en",
  get lang() {
    return this.language.toUpperCase();
  }
};

// Getterを使用してオブジェクトからデータを表示する:
document.getElementById("demo").innerHTML = person.lang;

また、次の例では、lang プロパティを使用して、language プロパティに大文字の値を保存しています。

const person = {
  firstName: "John",
  lastName: "Doe",
  language: "",
  set lang(lang) {
    this.language = lang.toUpperCase();
  }
};

// Setterを使用してオブジェクトのプロパティを設定する:
person.lang = "en";

// オブジェクトのデータを表示する:
document.getElementById("demo").innerHTML = person.language;

6. なぜGetterとSetterを使用するのか？

• 構文（Syntax）がシンプルになる
• プロパティとメソッドに対して等しい構文が使える
• より良いデータ品質を確保できる
• バックグラウンドで処理を行う際に有用である

単純な値を扱うだけであれば、GetterやSetterは避けましょう（使いすぎの防止）。

7. Object.defineProperty() メソッド

Object.defineProperty() メソッドを使用して、後からGetterやSetterを追加することも可能です。

7.1 カウンターの例

// オブジェクトの定義
const obj = {counter : 0};

// SetterとGetterを定義
Object.defineProperty(obj, "reset", {
  get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", {
  get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", {
  get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
  set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", {
  set : function (value) {this.counter -= value;}
});

// カウンターを操作する:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;