Angularを触ってると、ふと悩むこの問題。
「あれ、この値って get で返す？ それとも function() ？ いや、computed()使ったほうがいいのか…？」
私自身テンプレートに値を表示したいだけなのに、get・関数・computed() のどれを使えばいいのかわからずよく悩んでいました。
この記事では、それぞれの書き方の特徴・メリット・デメリットを比較しながら、実務で「どの場面でどれを選ぶのがベストか？」をゆるっとまとめていきます ☕️
1. get （getter）の使い所と注意点
💡 使いどころ
- 軽量な値の計算（例：
isAdminのようなシンプルな比較） - 定数やプロパティラップ
- テンプレートに
{{ value }}のようにスマートに書きたいとき
get isAdmin(): boolean {
return this.user.role === 'admin';
}
❌ 避けた方がいい場面
- 重たい処理や filter/map などを含む場合
- テンプレートで
{{ totalPrice }}のように何度も呼ばれると毎回再計算
get totalPrice() {
return this.cart.reduce((sum, item) => sum + item.price, 0);
}
💡 Angularのテンプレートは、Change Detectionのたびに
getを再評価します。
2. 関数の使い所と注意点
💡 使いどころ
- 明示的に1回だけ使う処理（初期化やイベント内）
calculateTotal(): number {
return this.price * this.quantity;
}
ngOnInit() {
this.total = this.calculateTotal();
}
❌ 避けた方がいい場面
- テンプレート内で繰り返し使う
<p>{{ calculateTotal() }}</p> <!-- 毎回呼ばれてしまう -->
💡
getと同様、テンプレートでの再評価によりパフォーマンスが下がる可能性があります。
3. computed() の使い所と注意点
💡 使いどころ
- Signalに依存する派生状態を定義したいとき
- 必要時だけ再評価（パフォーマンス◎）
readonly total = computed(() => this.price() * this.quantity());
<p>{{ total() }}</p>
❌ 避けた方がいい場面
- Signalを使っていないプロジェクトでは使えない
-
inject()やconsole.log()など外部依存や副作用のある処理を含めるとエラーになる（computedは純粋関数である必要がある） -
computed()の中で Signal の値を変更する（.set()や.update()）ような処理を含めたい場合は使えない
💡 Signal＋computed で構成すればテンプレートでも高速かつ最適化された再描画が可能になります！
📕 比較まとめ表
| 書き方 | 特徴 | テンプレート向き？ | 再評価のタイミング | 適した用途 |
|---|---|---|---|---|
get |
軽量な計算、読みやすい | ◎ | 毎回 | シンプルなフラグや比較 |
function() |
明示的な処理 | △（非推奨） | 毎回 | 初期化やボタンクリックなど |
computed() |
Signal依存でリアクティブ再評価 | ◎ | Signal変更時のみ | 合計計算、条件付き表示など |
🔍 実務での判断ポイント
| シチュエーション | ベストな選択 | 理由 |
|---|---|---|
| 軽いフラグや読み替え（isAdminなど） | get |
書きやすくテンプレートでも自然 |
| 合計や派生状態（Signal使ってる） | computed() |
必要なときだけ評価 |
| イベント処理や1回だけの演算 | function() |
明示的で制御しやすい |
| filterやmap、重い処理を含む表示 | computed() |
getやfunctionだと毎回評価され重くなる |
🙌 まとめ
-
getは軽い処理にだけ使う。見た目はスマートでも落とし穴あり -
function()は明示的に使いたい時だけ。テンプレートで多用はNG -
computed()はSignal設計のときに真価を発揮。これからのAngularではかなり使い所あり！
コードの可読性だけじゃなく、アプリのパフォーマンスにも直結するポイントなので、ぜひ日々の開発で意識してみてください 🙌
Discussion