AngularのNgZoneとは？役割と使い方をわかりやすく解説！

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

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ message }}</h1>
    <button (click)="incrementUseRun()">
      カウントアップ (runメソッドを使用)
    </button>
    <button (click)="increment()">
      カウントアップ (runメソッドを未使用)
    </button>
  `,
})
export class AppComponent {
  counter: number = 0; // カウントを管理する変数
  message: string = '現在のカウント: 0'; // 表示用のメッセージ

  constructor(private ngZone: NgZone) {}

  /**
   * runメソッドを使用してカウントを更新する
   * Angularの変更検知が確実にトリガーされるため、画面が更新される
   */
  incrementUseRun() {
    // runOutsideAngularメソッドを使用してAngularのZone外で非同期処理を実行する
    this.ngZone.runOutsideAngular(() => {
      setTimeout(() => {
        this.counter++; // カウントをインクリメント

        // runメソッドを使用して、AngularのZone内に戻り、変更検知をトリガーする
        // 画面の更新が行われる
        this.ngZone.run(() => {
          this.message = `現在のカウント: ${this.counter}`;
        });
      }, 100); // 0.1秒後に処理を実行
    });
  }

  /**
   * runメソッドを使用せずにカウントを更新する
   * Angularの変更検知がトリガーされないため、画面は更新されない
   */
  increment() {
    // runOutsideAngularメソッドを使用してAngularのZone外で非同期処理を実行する
    this.ngZone.runOutsideAngular(() => {
      setTimeout(() => {
        this.counter++; // カウントをインクリメント

        // runメソッドを使用しないため、変更検知がトリガーされない
        // 画面の更新が行われない
        this.message = `現在のカウント: ${this.counter}`;
        console.log(`Zone外で更新: ${this.message}`);
      }, 100); // 0.1秒後に処理を実行
    });
  }
}

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

@Component({
  selector: 'app-map',
  template: `
    <h1>{{ message }}</h1>
    <div id="map" style="width: 100%; height: 400px;"></div>
  `,
})
export class MapComponent {
  message: string = 'マーカーをクリックしてください';

  constructor(private ngZone: NgZone) {}

  ngOnInit() {
    const map = new google.maps.Map(document.getElementById('map')!, {
      center: { lat: 35.6895, lng: 139.6917 },
      zoom: 10,
    });

    const marker = new google.maps.Marker({
      position: { lat: 35.6895, lng: 139.6917 },
      map,
      title: '東京タワー',
    });

    marker.addListener('click', () => {
      this.ngZone.run(() => {
        this.message = 'マーカーがクリックされました！';
      });
    });
  }
}