TypeScriptでクラスを書いていると、
次のような構文を見かけます。
get value() {
return this._value;
}
set value(v: number) {
this._value = v;
}
「関数みたいだけど、呼び出し方はプロパティ？」
「普通に変数を直接触ればよくない？」
「正直、必要性が分からない」
私自身、JavaScriptでDOM操作や簡単なロジックを書いていた頃は、
getter・setterの存在意義が全く理解できませんでした。
結論から言うと、
getterとsetterは「値へのアクセスを制御するための仕組み」 です。
getterとsetterとは何か
getter（ゲッター）
getterは、
プロパティを取得するときに実行される関数 です。
class User {
private _name: string = "ゆうき";
get name() {
return this._name;
}
}
const user = new User();
console.log(user.name); // "ゆうき"
ポイントは、
関数なのに () を付けずにアクセスできる ことです。
setter（セッター）
setterは、
プロパティに値を代入するときに実行される関数 です。
class User {
private _age: number = 0;
set age(value: number) {
this._age = value;
}
}
const user = new User();
user.age = 20;
この代入の裏側で、
setterが呼ばれています。
なぜ直接プロパティを触らせないのか
問題例：直接変更できてしまう
class User {
age: number = 0;
}
const user = new User();
user.age = -10; // 技術的には通ってしまう
TypeScriptは型は守りますが、
値の妥当性までは保証しません。
setterで値を制御する
class User {
private _age: number = 0;
set age(value: number) {
if (value < 0) {
console.error("年齢は0以上です");
return;
}
this._age = value;
}
get age() {
return this._age;
}
}
これにより、
- 不正な値の代入を防げる
- ロジックを1箇所にまとめられる
- 外部からの使い方はシンプルなまま
というメリットがあります。
getterは「計算結果」を返すのにも使える
getterは、
単なる値取得だけでなく、計算結果を返す用途 にも使えます。
class Rectangle {
constructor(
private width: number,
private height: number
) {}
get area() {
return this.width * this.height;
}
}
const rect = new Rectangle(10, 5);
console.log(rect.area); // 50
呼び出し側は、
- 計算していることを意識しない
- 普通のプロパティとして扱える
という利点があります。
なぜgetter/setterは関数ではなくプロパティ風なのか
user.getName()
user.setName("ゆうき")
この書き方だと、
内部実装が丸見え になります。
getter/setterを使うと、
user.name
user.name = "ゆうき"
という
自然なデータアクセス表現 が可能になります。
これは、
- オブジェクトは「データの集合体」
- 実装の詳細は隠す
という オブジェクト指向の考え方 に沿っています。
DOM操作・UIロジックとの相性
例えば、状態管理クラスがある場合です。
class Counter {
private _count = 0;
get count() {
return this._count;
}
set count(value: number) {
this._count = value;
this.render();
}
render() {
document.getElementById("count")!.textContent =
String(this._count);
}
}
counter.count++;
この一行で、
- 状態更新
- UI更新
をまとめて制御できます。
UIとロジックの分離を意識し始めた人ほど、
getter/setterの便利さが実感できます。
使いすぎには注意
getter/setterは強力ですが、
- 単なる値の入れ物
- ロジックが一切ない
場合は、
無理に使う必要はありません。
判断基準としては、
- 値にルールがある
- 将来ロジックが増えそう
- 外部からの変更を制御したい
こうしたケースで使うのが適切です。
まとめ
- getterは「取得時に処理を挟める」
- setterは「代入時にルールを設けられる」
- 値へのアクセスを安全に管理できる
TypeScriptのgetter・setterは、
「ただ動くコード」から「壊れにくい設計」へ進むための道具 です。
DOM操作や状態管理で
「ここ、直接触らせたくないな」と感じたら、
getter・setterの出番です。
コメント