OnPush変更検知
OnPush戦略でチェックを減らします
「OnPush変更検知」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
パフォーマンスの問題
デフォルトの戦略では、すべてのティックで各コンポーネントをチェックします。大規模なアプリでは、この処理が積み重なります。OnPushを使うと、関連する変更がない限り、Angularはコンポーネントをスキップします。
OnPushを有効にする
コンポーネントのchangeDetectionオプションを設定します。
@Component({
selector: 'app-user',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '{{ user().name }}'
})
export class UserComponent {}OnPushが再チェックされるタイミング
OnPushコンポーネントがチェックされるのは、次の場合だけです。@Inputの参照が変わったとき、テンプレートからイベントが発生したとき、asyncでバインドされたobservableが値を発行したとき、またはmarkForCheck()を呼び出したときです。
Inputの参照の等価性
OnPushはObject.isで入力の参照を比較します。オブジェクトをその場で変更しても再チェックは発生しません。新しい参照を渡す必要があります。
// Mutation: ignored by OnPush
this.user.name = 'New';
// New reference: detected
this.user = { ...this.user, name: 'New' };不変性が役立つ理由
OnPushは不変データと自然に組み合わせられます。参照チェックで変更を確実に検出できるよう、データを変更するのではなく、常に新しいオブジェクトや配列を作成してください。
this.items = [...this.items, newItem];イベントは引き続き機能する
コンポーネント自身のテンプレートから発生したイベント（クリックや入力など）は、自動的にそのコンポーネントをチェック対象としてマークします。そのため、追加のコードなしでローカルなインタラクションが機能します。
<button (click)="count.set(count() + 1)">+</button>asyncパイプ
asyncパイプはobservableが値を発行したときにmarkForCheck()を呼び出すため、OnPushでもストリームをシームレスに扱えます。
<p>{{ data$ | async }}</p>markForCheck
通常のトリガー以外で状態を更新した場合は、markForCheck()を呼び出して、次のティックでコンポーネント（およびその祖先）をチェックするようスケジュールします。
private cdr = inject(ChangeDetectorRef);
this.cdr.markForCheck();SignalsとOnPush
SignalsはOnPushと統合されています。テンプレートでsignalを読み取ると依存関係が登録され、signalを更新するとコンポーネントが自動的にチェック対象としてマークされるため、手動で呼び出す必要はありません。
count = signal(0);
increment() { this.count.update(c => c + 1); }OnPushの伝播
コンポーネントがマークされると、そのコンポーネントとルートまでのすべての祖先にフラグが設定され、その経路がチェックされます。その配下の子コンポーネントは通常どおりチェックされます。
ベストプラクティス
新しいコンポーネントではOnPushをデフォルトにしてください。Signalsや不変の入力と組み合わせることで、不要な処理を大幅に削減できます。
クイックチェック
OnPushについての理解度を確認しましょう。
まとめ
ChangeDetectionStrategy.OnPushでは、入力の参照が変わったとき、テンプレートイベントが発生したとき、asyncパイプが値を発行したとき、またはmarkForCheck()を呼び出したとき以外はチェックをスキップすることを学びました。不変データやSignalsとの組み合わせが最適です。
よくある質問
「OnPush変更検知」レッスンは無料ですか？
はい。「OnPush変更検知」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「OnPush変更検知」で何を学びますか？
OnPush戦略でチェックを減らします ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「OnPush変更検知」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 変更検知の仕組み
- OnPush変更検知
- ゾーンレスAngular
- リストとレンダリングの最適化