Angular Signals と Effects

Angular はリアクティビティの処理方法を変更しました。あらゆる小さな変更を検出するために Zone.js を使用する必要はもうありません。Signals を使用することで、Angular は変更された UI の特定の部分のみを更新できるようになります。これにより、アプリの高速化が可能になり、zoneless モードが利用可能になります。

Signals とは何ですか？

Signal はリアクティブな値のコンテナです。値が変化すると、Angular はテンプレートのどの部分を更新すべきかを正確に把握します。

• signal(): 新しい signal を作成します。値を置き換えるには .set() を、現在の値に基づいて値を変更するには .update() を使用します。
• computed(): 読み取り専用の signal を作成します。他の signal から値を派生させます。Angular は、値が読み取られたときにのみこれを計算し、結果をキャッシュします。
• effect(): signal が変化したときにコードを実行します。ロギングや手動の DOM 操作などのサイドエフェクトに使用します。

Signals と RxJS の使い分け

一方を選択する必要はありません。異なるタスクに対して両方を使い分けるべきです。

Signals の使用場面:

• UI ステートの保持。
• テンプレートレンダリングの制御。
• @Input() と @Output() の置き換え。
• zoneless アプリでの開発。

RxJS の使用場面:

• HTTP や WebSocket などの非同期ストリームの処理。
• デバウンスやストリームの切り替えなどの複雑なロジック。
• 複数のイベントシーケンスの結合。

rxjs-interop を使用してこれらを橋渡しできます:

• toSignal(): Observable を Signal に変換します。
• toObservable(): Signal を Observable に変換します。

新しいデコレータ不要の API

Angular 17 以降では、デコレータを使用せずにデータフローを処理する新しい方法が導入されました。

• input(): 親から渡されるデータのための読み取り専用 signal。
• model(): 双方向バインディングのための書き込み可能な signal。従来の @Input() と @Output() のパターンに代わるものです。
• output(): 子から親へイベントを放出する方法。これは signal ではありませんが、コードを簡素化します。

なぜ React よりも優れているのか

React を知っている場合、概念は似ていますが、実行方法は異なります。

• 自動追跡: React では、依存関係を配列にリストする必要があります。Angular では、システムが使用されている signal を自動的に追跡します。依存関係を忘れることはありません。
• 精密な更新: React はコンポーネント全体を再レンダリングすることがよくあります。Angular signals は、その値に依存する特定の DOM ノードのみを更新します。
• Stale Closures（古いクロージャ）が発生しない: Signal を呼び出すと、常に現在の値が提供されます。

出典: https://dev.to/atilla_baspinar_c5c68ec63/angular-signals-and-effects-35mn