Angularでコンポーネントの状態変化を検知する！markForCheck()とdetectChanges()を使い分ける詳細解説

2024-04-02

AngularでmarkForCheck()とdetectChanges()の違い

呼び出しタイミング

markForCheck(): コンポーネントの状態が変化した際に直接呼び出す
detectChanges(): 手動で変更検知を実行したい際に呼び出す

処理内容

detectChanges(): コンポーネントとその子コンポーネント全てに対して変更検知を実行する

影響範囲

markForCheck(): マークされたコンポーネントのみが変更検知の対象

パフォーマンス

markForCheck(): detectChanges()よりも軽量
detectChanges(): 処理コストが比較的高い

使用例

markForCheck():
- コンポーネント内のローカル変数が変更された場合
- 非同期処理の結果に基づいてコンポーネントを更新する場合
detectChanges():
- テストコードでコンポーネントの状態変化を検証する場合
- 手動でビューの更新を強制したい場合

markForCheck()とdetectChanges()は、それぞれ異なる役割を持つメソッドです。

コンポーネントの状態変化を検知する際は、markForCheck()を使用するのが一般的です。
手動で変更検知を実行したい場合は、detectChanges()を使用します。

それぞれのメソッドの特徴を理解し、状況に応じて使い分けることが重要です。

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {

  count = 0;

  constructor() {}

  ngOnInit() {
    // タイマーを使って1秒ごとにcountを更新
    setInterval(() => {
      this.count++;
      // `markForCheck()`を使用して、コンポーネントの状態変化を通知
      this.changeDetectorRef.markForCheck();
    }, 1000);
  }

  increment() {
    // ボタンクリック時にcountを増加
    this.count++;
    // `detectChanges()`を使用して、手動で変更検知を実行
    this.changeDetectorRef.detectChanges();
  }

}

<h1>{{ count }}</h1>

<button (click)="increment()">Increment</button>

このコードでは、countという変数を用意し、タイマーを使って1秒ごとに更新しています。

markForCheck()を使用した場合:
- タイマーによってcountが更新されると、markForCheck()が呼び出され、コンポーネントの状態変化が通知されます。
- その後、変更検知が実行され、ビューが更新されます。
detectChanges()を使用した場合:
- increment()ボタンをクリックすると、countが更新され、detectChanges()が呼び出されます。