こんにちは、フロントエンド・スペシャリストです。今回は、JavaScriptのクラスで使える強力な武器「getter(ゲッター)」についてお話しします。
getterって一体なに?
getterは、一言で言えば「関数なのにプロパティのように呼び出せる仕組み」です。通常、クラスの中で計算処理をする場合はメソッドを作りますが、getterを使うと、まるで普通の変数にアクセスするように値を参照できます。
例を見てみましょう。
class User {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
get fullName() {
return `${this.firstName} ${this.lastName}`;
}
}
const user = new User(“田中”, “太郎”);
console.log(user.fullName); // 「田中 太郎」と表示される
なぜメソッドではなくgetterを使うのか?
初心者のうちは「メソッドで十分じゃない?」と感じるかもしれません。しかし、getterには「外部から計算ロジックを隠蔽できる」という大きなメリットがあります。
例えば、将来的に「姓名の間にスペースではなく中黒を入れたい」という仕様変更があった場合、getterを使っていれば、クラス内部のコードを修正するだけで、利用側(呼び出し元)のコードを一切変える必要がありません。
また、「読み取り専用のプロパティを作れる」という点も重要です。getterのみを定義してsetter(値を代入する仕組み)を作らなければ、外部から値を上書きされる心配がなくなります。これにより、意図しないバグの発生を防ぐ「堅牢なコード」に繋がります。
現場での活用事例:バリデーションと計算
実務では、単なる文字列の結合だけでなく、データの状態を判定するのにもよく使います。
例えば、ECサイトのカート機能で、合計金額を計算する処理を考えてみましょう。
get total() {
return this.items.reduce((sum, item) => sum + item.price, 0);
}
このように、「常に最新の状態を計算して取得する」という役割をgetterに持たせることで、コード全体が非常にスッキリします。
まとめ:使い方のコツ
getterを使うか迷ったときは、「これは単純なデータか? それとも計算が必要なデータか?」を基準にしてみてください。
「値を取得するだけなのに、わざわざ関数を呼び出すのは面倒だな」と感じたときこそ、getterの出番です。ぜひ、次回のコーディングで「get」というキーワードを思い出してみてくださいね。あなたのコードが、よりプロフェッショナルな設計に変わるはずです。