【JS応用|初心者向け】JavaScriptのgetterでプロパティ操作をスマートに!「計算の裏側」を隠すテクニック

こんにちは、フロントエンド・スペシャリストです。今回は、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」というキーワードを思い出してみてくださいね。あなたのコードが、よりプロフェッショナルな設計に変わるはずです。

タイトルとURLをコピーしました