60. linkedSignal — 連動して作り直せる書き込み可能な状態

computed は依存するシグナルから自動で計算される便利な仕組みでしたが、読み取り専用で、外から値を上書きすることはできません。ところが実務では「基本は他のシグナルから決まるが、ユーザーの操作で上書きもしたい」という状態がよく出てきます。たとえば商品リストの「選択中の商品」です。リストが切り替わったら選択は先頭に戻したい、でもユーザーがリストの中から自由に選び直せてほしい。この両立を担うのが linkedSignal です。

使い方は computed とよく似ていて、linkedSignal(() => this.items()[0]) のように計算式を渡します。依存している items が変わるたびに計算し直される点は computed と同じですが、linkedSignal が返すのは書き込み可能なシグナル(WritableSignal)なので、selected.set(item) で上書きできます。上書きした値は、次に依存が変わって計算し直されるまで保持されます。

同じことを signal と effect の組み合わせで書こうとすると、「effect の中で set する」という追いかけづらいコードになりがちです。linkedSignal は「リセット条件つきの書き込み可能な状態」という1つの概念を、1つの部品として素直に表現できます。computed(派生値・読み取り専用)と signal(独立した状態・書き込み可能)の中間がほしくなったら、linkedSignal を思い出してください。

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

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

@Component({
  selector: 'app-product-picker',
  template:
    '@for (p of products(); track p) {' +
    '  <button (click)="selected.set(p)">{{ p }}</button>' +
    '}' +
    '<p>選択中: {{ selected() }}</p>',
})
export class ProductPickerComponent {
  products = signal(['りんご', 'みかん', 'ぶどう']);

  // 基本は products の先頭。products が変われば先頭に戻る。
  // でも set() でユーザーの選択に上書きもできる。
  selected = linkedSignal(() => this.products()[0]);
}

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

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

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