Angular でのゾーンレスの採用: 変更検出の新時代

2024 年 5 月 22 日にリリースされた Angular 18 では、実験的なゲームチェンジャーであるゾーンレス Angular アプリケーションが導入されました。 これにより、Zone.js への依存関係が排除され、パフォーマンスが向上し、オーバーヘッドが削減され、デバッグが簡素化されます。ゾーンレス アプリケーションとその利点、そしてこの機能の実験方法について詳しく見ていきましょう。

Angular の変更検出を理解する (ゾーンレス前)

変更検出により、DOM とコンポーネント データの同期が維持されます。 以前、Angular は Zone.js に依存していました。 変更検出は次の方法でトリガーされます:

• ユーザー インタラクション: ボタンのクリック、テキスト入力。
• 非同期操作: HTTP リクエスト、setTimeout、setInterval、Promise 解決。
• 手動トリガー: ApplicationRef.tick()、ChangeDetectorRef.detectChanges().

Zone.js はブラウザー API にパッチを適用し、Angular に変更検出を開始するよう通知しました。 これは効果的ではありましたが、オーバーヘッドが追加され、場合によっては ExpressionChangedAfterItHasBeenCheckedError.

が発生することがありました。

変更検出の例 (プレゾーンレス)

ゾーンレス変更検出の前に、Zone.js によって UI が更新されました。この StackBlitz の例は次のことを示しています。

1. イベント ハンドラー プロパティの更新: ボタンをクリックするとカウンターが更新されます。 Zone.js はインターセプトし、変更検出をスケジュールし、UI を更新します。
2. 非同期プロパティ更新: 一定の間隔でプロパティを更新します。 Zone.js は非同期操作を検出し、UI を更新します。
3. HTTP データ (配列): HTTP 経由でフェッチされたデータは配列に保存されます。 Angular のデフォルトの変更検出によりビューが更新されます。 ただし、ChangeDetectionStrategy.OnPush では、参照の変更または変更検出が手動でトリガーされない限り、配列の直接変更によってビューが更新されない可能性があります。
4. HTTP データ (非同期パイプ): AsyncPipe は、監視可能な処理を簡素化し、自動的にサブスクライブして変更検出をトリガーします。
5. HTTP データ (シグナル): Angular シグナル (最新の機能) は、依存するリーダーに直接通知し、Zone.js とは独立して更新を合理化します。

これらの例は、変更検出における Zone.js の役割を強調し、Angular の改善されたゾーンレス アーキテクチャの準備を整えます。

ゾーンレスを選択する理由

Zone.js を削除すると、次のような大きな利点があります。

• 簡素化された変更検出: ExpressionChangedAfterItHasBeenCheckedError の問題とゾーン関連の複雑さが減少します。
• オーバーヘッドの削減: フレームワークが軽量になり、パフォーマンスが向上します。
• デバッグの改善: 変更検出制御の改善、パフォーマンスのボトルネックの特定が容易になりました。

ゾーンレス Angular アプリケーションの構成

ゾーンレスに切り替えるには構成の変更が必要です:

1. ゾーンレス変更検出を有効にする: app.config.ts に、次を追加します:

<code class="language-typescript">providers: [
  provideExperimentalZonelessChangeDetection()
]</code>

provideZoneChangeDetection() が存在する場合は削除します。

2. Zone.js インポートの削除:

• アプリケーション ファイルから import '*zone.js'; を削除します。
• angular.json で、zone.js 配列から polyfills を削除します。

<code class="language-json">"polyfills": []</code>

3. Zone.js をアンインストールします:

<code class="language-bash">npm uninstall zone.js</code>

Zone.js を使用しない変更検出のテスト

この例は、Zone.js を使用しない変更検出を示します:

各シナリオを分析してみましょう:

シナリオ 1: イベント ハンドラー プロパティの更新

期待どおりに動作します。

シナリオ 2: 非同期プロパティ更新

this.changeDetectorRef.markForCheck(); が必要か、シグナルを使用します:

修正バージョン (markForCheck あり):

修正バージョン (シグナルあり):

シナリオ 3: HTTP データ (配列)

ビューは自動的に更新されません:

修正バージョン (markForCheck あり):

async パイプの使用が推奨されます。

シナリオ 4: HTTP データ (非同期パイプ)

単純明快です。 async パイプを使用します:

シナリオ 5: HTTP データ (シグナル)

toSignal() を使用してオブザーバブルをシグナルに変換します。

概要:

• イベント ハンドラー: UI はシームレスに更新されます。
• 非同期操作: markForCheck() またはシグナルが必要です。
• HTTP (Observables): async パイプを使用します。
• 信号: 信号の変化時に UI が自動更新されます。

Angular 19 アップデート (2025 年 11 月 19 日)

Angular 19 では、ゾーンレス アプリケーションのサポートがさらに洗練され、API が改善され、サーバー側のレンダリング サポートが追加され、テストが強化されました。 Angular CLI はゾーンレス プロジェクトの作成をサポートするようになりました:

<code class="language-typescript">providers: [
  provideExperimentalZonelessChangeDetection()
]</code>

以上がAngular でのゾーンレスの採用: 変更検出の新時代の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。