getter / setter（アクセサ） — get v() {} / set v(x) {}
JavaScript の getter / setter は「プロパティにアクセスしたときの動作」を自由に定義できる仕組みです。
初心者は「関数なのにプロパティのように使える」と覚えると理解しやすいです。
基本のコード例
class Person {
constructor(name) {
this._name = name; // 内部用の変数（慣習的に _ を付ける）
}
// getter: 値を取得するときに呼ばれる
get name() {
return this._name.toUpperCase();
}
// setter: 値を代入するときに呼ばれる
set name(newName) {
if (newName.length < 2) {
console.log("名前が短すぎます");
return;
}
this._name = newName;
}
}
const p = new Person("Aki");
console.log(p.name); // → "AKI" （getterが呼ばれる）
p.name = "M"; // setterが呼ばれる → "名前が短すぎます"
p.name = "Mika"; // setterが呼ばれる
console.log(p.name); // → "MIKA"
get name()→p.nameと書いたときに呼ばれる。set name(x)→p.name = "..."と代入したときに呼ばれる。- 内部変数は
_nameのようにして区別するのが一般的。
よく使うテンプレート集
計算結果を返す getter
class Rectangle {
constructor(w, h) {
this.w = w;
this.h = h;
}
get area() {
return this.w * this.h;
}
}
const r = new Rectangle(5, 3);
console.log(r.area); // → 15 （関数呼び出しではなくプロパティのように使える）
入力チェックをする setter
class User {
constructor(age) {
this._age = age;
}
get age() {
return this._age;
}
set age(value) {
if (value < 0) {
console.log("年齢は0以上にしてください");
return;
}
this._age = value;
}
}
const u = new User(20);
u.age = -5; // → "年齢は0以上にしてください"
console.log(u.age); // → 20
オブジェクトのラッパー
const obj = {
_val: 0,
get val() {
return this._val;
},
set val(x) {
this._val = x * 2; // 代入時に加工
}
};
obj.val = 5;
console.log(obj.val); // → 10
例題: 温度変換クラス
class Temperature {
constructor(celsius) {
this._celsius = celsius;
}
get celsius() {
return this._celsius;
}
set celsius(value) {
this._celsius = value;
}
get fahrenheit() {
return this._celsius * 9/5 + 32;
}
set fahrenheit(value) {
this._celsius = (value - 32) * 5/9;
}
}
const t = new Temperature(0);
console.log(t.fahrenheit); // → 32
t.fahrenheit = 212;
console.log(t.celsius); // → 100
- 効果:
celsiusとfahrenheitを相互変換できる。 - ポイント: getter/setter を使うと「プロパティに見えるけど裏で計算している」仕組みが作れる。
実務でのコツ
- getter: 計算結果や加工した値を返すのに便利。
- setter: 入力チェックや値の加工をするときに使う。
- 内部変数:
_nameのように区別しておくとわかりやすい。 - プロパティのように使える: 関数呼び出しではなく
obj.prop/obj.prop = ...でアクセスできる。
ありがちなハマりポイントと対策
- 無限ループ:
set name(x) { this.name = x; }と書くと setter が自分を呼び続けてしまう。- 対策: 内部変数
_nameを使う。
- getterで重い処理:
- プロパティアクセスのたびに呼ばれるので、計算が重い処理は注意。
練習問題（銀行口座）
class BankAccount {
constructor(balance) {
this._balance = balance;
}
get balance() {
return this._balance;
}
set balance(amount) {
if (amount < 0) {
console.log("残高は負の値にできません");
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
直感的な指針
- getter = 値を取得するときの動作を定義。
- setter = 値を代入するときの動作を定義。
- プロパティのように使えるが、裏では関数が動いている。
- 初心者は「カウンター」「温度変換」「銀行口座」で練習すると理解が深まる。
これを覚えれば「値を隠す」「入力チェック」「計算プロパティ」を自然に書けるようになります。