Angular Academy · レッスン

linkedSignalと高度なパターン

Q: 「linkedSignalと高度なパターン」で何を学びますか？

依存するSignalをリアクティブに連携させます。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

依存するSignalをリアクティブに連携させます。

レッスン 4/413 ステップ

「linkedSignalと高度なパターン」はCoddyKit上の無料Angular Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

linkedSignalが解決する問題

あるソースが変化したときにリセットされる、書き込み可能な状態が必要になることがあります。通常のcomputedは読み取り専用で、通常のsignalは自動的にリセットされません。linkedSignal()はこのギャップを埋め、ソースから導出される書き込み可能な状態を提供します。

基本的なlinkedSignal

計算処理を渡します。戻り値は、ソースが変化すると再計算される一方で、手動でも設定できる書き込み可能なシグナルです。

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

const options = signal(['a', 'b', 'c']);
const selected = linkedSignal(() => options()[0]);

selected.set('b');        // manual override
options.set(['x', 'y']);  // resets to 'x'

通常のsignalでは不十分な理由

初期化時に一度だけ値を設定した通常のsignalは、ソースが変化しても古い値を保持します。linkedSignalは、途中で書き込みを許可しながら、ソースが変化するたびに値を再導出します。

// Plain signal: stale after options change
// const selected = signal(options()[0]);

// linkedSignal: auto-resets when options changes
const selected = linkedSignal(() => options()[0]);

sourceとcomputationを分ける形式

高度な形式ではsourceとcomputationを分離し、前回の値にもアクセスできます。選択肢の中に現在の選択が残っている場合に、それを維持するのに便利です。

const items = signal([{ id: 1 }, { id: 2 }]);

const chosen = linkedSignal({
  source: items,
  computation: (newItems, previous) => {
    const prev = previous?.value;
    const stillThere = newItems.find(i => i.id === prev?.id);
    return stillThere ?? newItems[0];
  }
});

ユーザーの選択を維持する

前回の値を使うパターンでは、リストの更新後も選択中の項目が存在する場合はユーザーの選択を維持し、存在しない場合はデフォルトに戻します。ユーザー体験を高める優れた方法です。

linkedSignalは書き込み可能

Computedとは異なり、linkedSignalでは.set()や.update()を呼び出せます。手動で設定した値は、ソースが再び変化するまで保持されます。

const base = signal(10);
const editable = linkedSignal(() => base());

editable.update(v => v + 5); // 15
base.set(100);               // resets to 100

パターン：依存するドロップダウン

国 → 都市：国が変わったら都市を最初に利用可能なものへリセットしつつ、ユーザーが別の都市を選べるようにします。

const country = signal('TR');
const cities = computed(() => citiesFor(country()));
const city = linkedSignal(() => cities()[0]);

country.set('US'); // city resets to first US city

パターン：楽観的UI状態

linkedSignalは、サーバーデータから導出した楽観的な値を保持しながら、UIから即座に上書きでき、最新データの到着時に再同期することもできます。

Effectとの組み合わせ

Effectを使ってlinkedSignalの変化に反応できます。たとえば、現在の選択を永続化できます。

const selected = linkedSignal(() => options()[0]);

effect(() => {
  localStorage.setItem('selected', selected());
});

linkedSignalを使わない場合

導出値が完全に読み取り専用であれば、computed()を使用します。ソースによるリセットが必要ない場合は、通常のsignal()を使用します。書き込み可能で、かつソースによってリセット可能な両方の性質が必要な場合にだけ、linkedSignalを選びます。

高度なリアクティブグラフ

signal → computed → linkedSignal → effectによって、完全なリアクティブパイプラインを構成できます。生の入力、純粋な導出処理、書き込み可能でリセット可能な状態、副作用を、手動のサブスクリプションなしで扱えます。

理解度チェック

linkedSignalについて理解度を確認しましょう。

対話的なレッスンで答える

まとめ：linkedSignalと応用パターン

linkedSignal()は、ソースに基づいてリセットされる書き込み可能な状態を提供します。

ユーザーの選択を保持するには、ソースまたは計算形式を使用します。
依存関係のあるドロップダウンや楽観的UIに適しています。
読み取り専用にはcomputed、リセットされない状態には通常のsignalを使用します。

Signalsコースを修了しました。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 38
レッスン: 144

無料で学習を始めるコース全体を表示

よくある質問

「linkedSignalと高度なパターン」レッスンは無料ですか？

はい。「linkedSignalと高度なパターン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「linkedSignalと高度なパターン」で何を学びますか？

依存するSignalをリアクティブに連携させます。ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「linkedSignalと高度なパターン」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Angular Academyに戻る