9. signal — リアクティブな状態の入れ物

シグナルは「値が変わったことを周りに知らせる入れ物」です。count = signal(0) のように作り、count() と関数のように呼んで値を読み、count.set(5) で更新します。現在値をもとに更新するなら count.update((v) => v + 1) と書きます。

実務でシグナルを使う最大の理由は、値の変更をAngularが正確に検知し、画面の必要な部分だけを効率よく更新してくれることです。普通のプロパティと違って「いつ・どこで値が変わったか」をフレームワークが追跡できるため、新しいAngularでは状態をシグナルで持つのが基本方針になっています。

下のコードは、シグナルの中身を理解するためにその仕組みをプレーンなTypeScriptで簡易再現したものです。「値の読み書きを関数経由にして、変更時に購読者へ通知する」という核となるアイデアは、これだけのコードで再現できます。

▶ サンプルコードを実行してみよう(自由に書き換えてOK)

TypeScript

// Angularのsignalの仕組みをプレーンTypeScriptで簡易再現する
function signal<T>(initial: T) {
  let value = initial;
  const listeners: Array<() => void> = [];
  const get = () => value; // 読み取りは関数呼び出し
  const set = (next: T) => {
    value = next;
    listeners.forEach((fn) => fn()); // 変更を購読者に通知
  };
  const onChange = (fn: () => void) => listeners.push(fn);
  return { get, set, onChange };
}

const count = signal(1);
count.onChange(() => console.log('変更を検知! count =', count.get()));

console.log('count =', count.get()); // 1
count.set(5); // 変更を検知! count = 5
count.set(9); // 変更を検知! count = 9

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