Angular Signalsとは何ですか？

Question

Accepted Answer

**Signals**はAngularの反応型プリミティブ（Angular 16+で追加）で、状態を管理するためのもの—値をラップするもので、**変更されるとコンシューマーに通知し**、Zone.jsの変更検知に頼らずに細粒度で効率的な更新を実現します。 ## Signalの作成と使用 ```ts import { signal, computed, effect } from "@angular/core"; export class CounterComponent { count = signal(0); // a writable signal double = computed(() => this.count() * 2); // derived signal (auto-updates) increment() { this.count.set(this.count() + 1); // set a new value this.count.update(c => c + 1); // or update based on current } constructor() { effect(() => { console.log(`count is now ${this.count()}`); // re-runs when count changes }); } } ``` ## Signalの読み込み：関数のように呼び出す ```html ``` Signalは**呼び出して読み込む**（`count()`）ものであり、通常のプロパティではありません。テンプレート内では、Angularはビューが正確にどのSignalを読み込んでいるかを追跡するため、Signalが変更されるとき、影響を受ける部分だけが更新されます。 ## 3つのSignalタイプ ```text signal(value) → writable state, updated via .set() / .update() computed(() => ...) → derived/cached value; auto-recomputes when its deps change effect(() => ...) → runs a side effect whenever read signals change ``` `computed`はlazy評価されキャッシュされ（Vueのcomputedのように）、`effect`は副作用を反応的に実行します（watcherのように）。 ## Signalが重要な理由：細粒度の反応性 ```text Traditional Angular: a change triggers checking the WHOLE component tree (Zone.js) Signals: Angular knows EXACTLY which views depend on a changed signal → update only those → far more efficient, and enables "zoneless" Angular ``` SignalはAngularに**正確な依存関係の追跡**を提供します—Signalが変更されるとき、実際にそれを読み込んでいるビューとcomputedだけが更新されます。これはZone.jsが発動させる広いchange detectionより効率的で、Zone.jsを完全に削除する基礎です（zoneessモード）。 ## Signalベースのinputs（新しい） ```ts name = input(); // @Input as a signal name = input.required(); ``` ## なぜ重要なのか SignalはAngularの反応性における最も重要な最近の進化です—Zone.jsの暗黙的な変更検知より、シンプルで、より明示的で、はるかに効率的なモデルです。細粒度の更新を実現し、不必要なチェックを減らし、computed/effectと統合でき、zoneessなAngularへの道を切り開きます。 Angularが新しい開発をSignalをデフォルトの状態プリミティブとして目指しているため、Signalを理解することはますます必須になっています。