変更検知の仕組み
Angularの変更検知サイクルを理解します
「変更検知の仕組み」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
変更検知とは
変更検知は、コンポーネントの状態とDOMを同期させるためにAngularが使用する仕組みです。データが変更されると、Angularはバインディングを再評価し、差分がある部分だけを更新します。
検知サイクル
Angularはルートから下方向へコンポーネントツリーをたどり、各コンポーネントのバインディングを確認します。この上から下への処理が、1回の変更検知サイクル（tick）です。
何がtickを発生させるのか
デフォルトでは、Angularは非同期イベントの後に変更検知を実行します。対象にはDOMイベント、タイマー、HTTPレスポンスがあります。これはZone.jsによって調整されます。
Zone.js
Zone.jsは非同期API（setTimeout、addEventListener、Promise、XHR）にモンキーパッチを適用し、処理が完了してtickが必要になる可能性をAngularに知らせます。
// Patched by Zone.js:
setTimeout(() => this.count++, 1000);
// After the timer, Angular runs change detection.NgZone
NgZoneはAngular向けにZone.jsをラップします。Angularのゾーン外でコードを実行すると、高頻度のループによる変更検知の発生を避けられます。
private zone = inject(NgZone);
this.zone.runOutsideAngular(() => {
// heavy work, no CD triggered
});ゾーンへの再 प्रवेश
ゾーン外からUIを更新するには、runを使ってゾーンに再 प्रवेशし、Angularにtickをスケジュールさせます。
this.zone.run(() => {
this.ready = true;
});デフォルト戦略
デフォルト戦略では、各tickで全コンポーネントがチェックされます。シンプルで安全な一方、大きなツリーでは無駄が生じる可能性があります。
バインディングの比較
AngularはObject.isを使って、各バインディングの現在値と以前の値を比較します。変更がなければDOMには触れません。
式は純粋にする
テンプレートの式はチェックのたびに実行されるため、高速で副作用のないものにする必要があります。テンプレート内でコストの高い関数を直接呼び出すことは避けてください。
<!-- Avoid: runs every tick -->
<p>{{ computeExpensiveTotal() }}</p>ExpressionChangedAfterChecked
開発モードでは、Angularは2回目の検証処理を実行します。2回の処理の間に値が変更されると、ExpressionChangedAfterItHasBeenCheckedErrorが発生します。これは、描画中に状態が変更されたことを示します。
手動制御
ChangeDetectorRefをインジェクトすると、変更検知を制御できます。markForCheck()、detectChanges()、detach()によって、きめ細かな制御が可能になります。
private cdr = inject(ChangeDetectorRef);
this.cdr.detectChanges();理解度チェック
変更検知についての理解度を確認します。
まとめ
変更検知は、状態をDOMに同期する上から下へのツリー処理であり、Zone.jsやNgZoneを介した非同期イベントによって実行され、Object.isでバインディングを比較することを学びました。ChangeDetectorRefを使うと手動で制御できます。
よくある質問
「変更検知の仕組み」レッスンは無料ですか？
はい。「変更検知の仕組み」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「変更検知の仕組み」で何を学びますか？
Angularの変更検知サイクルを理解します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「変更検知の仕組み」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。