11. effect — シグナルの変更に反応する

effect は、シグナルが変わるたびに実行したい処理を登録する仕組みです。effect(() => { ... }) と書くと、その関数の中で読んでいるシグナルが自動で追跡され、どれかが変わるたびに関数が再実行されます。コンポーネントのコンストラクタの中で登録するのが基本です。

実務での出番は、ログ出力、localStorageへの保存、外部ライブラリへの値の連携など、「画面の表示以外の場所に変更を届けたい」ときです。画面への反映はテンプレートが自動でやってくれるので、effectは脇役くらいの頻度で十分です。

つまずきやすいのは、effectの中でシグナルを更新したくなるケースです。値から値を導きたいだけならcomputedを使うのが正解で、effectは「Angularの外の世界への橋渡し」に限定すると設計が崩れません。

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

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

@Component({
  selector: 'app-theme-switcher',
  template: '<button (click)="toggle()">テーマ切り替え</button>',
})
export class ThemeSwitcherComponent {
  theme = signal('light');

  constructor() {
    // 中で読んでいるシグナルが変わるたびに再実行される
    effect(() => {
      console.log('現在のテーマ:', this.theme());
    });
  }

  toggle() {
    this.theme.update((t) => (t === 'light' ? 'dark' : 'light'));
  }
}

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