10. computed — シグナルから作る派生値

computed は、ほかのシグナルから自動で計算される読み取り専用のシグナルです。total = computed(() => price() * quantity()) と書くと、price か quantity が変わるたびに total も新しい値になります。読み方は普通のシグナルと同じで total() です。

実務では「合計金額」「絞り込み後の一覧」「フォームが送信可能かどうか」のように、元データから導ける値をすべてcomputedにします。導出ロジックが一箇所にまとまり、元の値を更新するだけで派生値の整合性が自動で保たれるのが利点です。

下のコードは、computedの仕組みを前のレッスンの簡易シグナルの上に再現したものです。「依存するシグナルの変更を購読して、計算結果を作り直す」という流れが核になっています。

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

TypeScript

// computedの仕組みをプレーンTypeScriptで簡易再現する
type Listener = () => void;

function signal<T>(initial: T) {
  let value = initial;
  const listeners: Listener[] = [];
  return {
    get: () => value,
    set: (next: T) => {
      value = next;
      listeners.forEach((fn) => fn());
    },
    onChange: (fn: Listener) => listeners.push(fn),
  };
}

// 依存シグナルの変更を購読し、計算結果を作り直す
function computed<T>(
  deps: Array<{ onChange: (fn: Listener) => void }>,
  calc: () => T,
) {
  let cache = calc();
  deps.forEach((dep) => dep.onChange(() => (cache = calc())));
  return { get: () => cache };
}

const price = signal(100);
const quantity = signal(2);
const total = computed([price, quantity], () => price.get() * quantity.get());

console.log('total =', total.get()); // 200
price.set(150);
console.log('total =', total.get()); // 300

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