ゾーンレスAngular
Zone.jsなしでAngularを実行します
「ゾーンレスAngular」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
Zone.jsを超えて
Zone.jsにはオーバーヘッドがあり、グローバルAPIをパッチします。最新のAngularでは、zoneのパッチではなくSignalsと明示的な通知によって変更検知を行うzonelessモードを利用できます。
Zonelessを有効にする
bootstrap設定でzoneless変更検知プロバイダーを提供します。
bootstrapApplication(AppComponent, {
providers: [
provideExperimentalZonelessChangeDetection()
]
});Zone.jsを削除する
zonelessモードでは、ビルド設定からzone.jsポリフィルも削除します。これにより、バンドルサイズと起動コストを削減できます。
// angular.json: remove "zone.js" from polyfills
// main.ts: do not import 'zone.js'現在、何が検知をトリガーするのか
zoneがない場合、次のタイミングでAngularは変更検知をスケジュールします。テンプレートで読み取ったsignalが変化したとき、asyncパイプが値を発行したとき、イベントバインディングが発火したとき、またはmarkForCheck()が呼び出されたときです。
Signalsが中心
Zonelessアプリでは、状態管理でSignalsを多用します。テンプレートでsignalを読み取ると依存関係が作成され、signalを更新するとAngularに通知されて、そのビューが更新されます。
count = signal(0);
// template: {{ count() }}
this.count.set(5); // schedules CDイベントも通知する
テンプレートのイベントバインディングはAngularに直接通知するため、zoneがなくてもユーザー操作によってUIが更新されます。
<button (click)="count.update(c => c + 1)">+</button>zoneなしの非同期処理
通常のsetTimeoutやsignalではない非同期処理では、検知が自動的にトリガーされなくなります。そのような状態はSignalsでラップするか、markForCheck()を呼び出してください。
setTimeout(() => this.ready.set(true), 1000);asyncパイプの互換性
asyncパイプは、発行のたびにビューを明示的にチェック対象としてマークするため、zonelessモードでも引き続き機能します。
<p>{{ data$ | async }}</p>サードパーティライブラリ
一部のライブラリは、Zone.jsによる自動検知を前提としています。zonelessモードでは、コールバックをラップしてsignalを更新するか、手動でmarkForCheck()を呼び出す必要がある場合があります。
メリット
Zonelessモードでは、バンドルが小さくなり、起動が速くなり、予期しない余分なティックが減ります。また、追跡対象の状態が実際に変化したときだけUIが更新されるため、より明確に動作を理解できます。
実験的なステータス
プロバイダーの名前がprovideExperimentalZonelessChangeDetectionとなっているのは、APIが安定化の途上にあるためです。新しくSignalsを中心とするアプリで採用し、十分にテストしてください。
クイックチェック
zoneless Angularについての理解度を確認しましょう。
まとめ
provideExperimentalZonelessChangeDetection()によってZone.jsが不要になり、Signals、イベント、asyncパイプ、markForCheck()を通じて更新を行えるため、より小さく、高速で、予測しやすいアプリを構築できることを学びました。
よくある質問
「ゾーンレスAngular」レッスンは無料ですか？
はい。「ゾーンレスAngular」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「ゾーンレスAngular」で何を学びますか？
Zone.jsなしでAngularを実行します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「ゾーンレスAngular」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 変更検知の仕組み
- OnPush変更検知
- ゾーンレスAngular
- リストとレンダリングの最適化