40. @let — テンプレート内にローカル変数を作る

@let は、テンプレートの中でローカル変数を宣言する構文です(v18.1以降)。@let taxed = price() * 1.1; のように書くと、その結果に名前が付き、以降のテンプレートで {{ taxed }} と何度でも使えます。値が変われば @let の結果も自動で追従します。

実務で特に効くのは、user()?.profile?.name のような深いプロパティアクセスや長い計算式に名前を付けたいときです。同じ式をテンプレートのあちこちに繰り返し書かずに済み、「この値は何なのか」が変数名で伝わるので、テンプレートがぐっと読みやすくなります。

@let で作った変数は宣言した場所より後ろでしか使えず、@if などのブロック内で宣言したものはそのブロックの外からは見えません。また再代入はできない読み取り専用の変数なので、値を変えたいときは元のシグナルやプロパティの方を更新します。

サンプルコード(フレームワーク環境が必要なため表示のみ)

import { Component, signal } from '@angular/core';

type User = { profile?: { name: string } };

@Component({
  selector: 'app-user-greeting',
  // @let で深いアクセスに名前を付ける(v18.1以降)
  template:
    '@let userName = user()?.profile?.name ?? "ゲスト";' +
    '<h2>こんにちは、{{ userName }}さん</h2>' +
    '<p>{{ userName }}さんの設定ページです</p>',
})
export class UserGreetingComponent {
  user = signal<User | null>({ profile: { name: '鈴木' } });
}

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗