angular-signals

Angular Signals

バージョン： Angular 16+ (2025) タグ： リアクティビティ、状態管理、Signals API

参考資料： Angular Signals • API リファレンス

API の変更

このセクションでは、バージョン固有の API の変更について説明します。

• 新機能：Angular 19 Resource API — 読み込み中／エラー状態が組み込まれた、非同期データを扱う新しい方法です

• 新機能：linkedSignal() — ゲッター／セッターを使って、シグナルを外部ソースにリンクします ソース

• 新機能：シグナル入力 — input() と input.required() を使用して、リアクティブなコンポーネント入力を実現します

• 新機能：toSignal() と toObservable() — RxJS と Signals の間を橋渡しします

• 新機能：effect() の改善 — onCleanup コールバックによるクリーンアップが改善されました

• 新機能：ゾーンレスの変更検知 — Signals とシームレスに連携します

ベストプラクティス

• 派生状態には computed() を使用します — 値の導出に effect() は決して使用しないでください

// ✅ DO THIS - derived state
totalPrice = computed(() => {
  return this.items().reduce((sum, item) => sum + item.price, 0);
});

// ❌ DON'T - side effects in computed
badComputed = computed(() => {
  const data = this.data();
  this.logService.log(data); // Side effect - don't do this!
});

• 書き込み可能な状態には signal() を使用します

count = signal(0);

// Update with set()
count.set(5);

// Update with update()
count.update(value => value + 1);

// Update with mutate() for objects
user.update(u => ({ ...u, name: 'New Name' }));

• 副作用にのみ effect() を使用します

effect(() => {
  analytics.track('cart-updated', {
    itemCount: this.items().length
  });
});

• メモリリークを防ぐため、必ず effect をクリーンアップします

effect((onCleanup) => {
  const timer = setTimeout(() => { /* ... */ }, 300);
  onCleanup(() => clearTimeout(timer));
});

• 従来の @Input() の代わりにシグナル入力を使用します

// Modern signal inputs (Angular 17+)
userId = input<string>('');
user = input.required<User>();

// Computed based on input
greeting = computed(() => `Hello, ${this.user()?.name}`);

• RxJS から Signal への変換には toSignal() を使用します

// Convert Observable to Signal
users = toSignal(this.http.get('/api/users'), { initialValue: [] });

• effect をネストしないでください — パフォーマンスの問題を引き起こす可能性があります

• 複雑なオブジェクトの比較には等価性関数を使用します

user = signal<User | null>(null, {
  equal: (a, b) => a?.id === b?.id
});

• UI の状態には Signals、複雑な非同期処理には RxJS を使用します — Signals と RxJS は異なる目的を持っています