Angular入門 ~ zoneless編

概要

今回はAngular 14以降導入されたzonelessについてまとめました。zonelessはAngularのZone.jsを使用しないようにするための設定です。zonelessを有効にすると、AngularはZone.jsを使用せずにChange Detectionを実行できます。

Zone.jsとは

AngularのChange Detectionを実行するために使用されるライブラリです。Zone.jsはAngularのコンポーネントが更新されるたびにChange Detectionを実行してコンポーネントのビューを更新します。
Zone.jsの弱点として、特に大規模なアプリケーションでパフォーマンスのオーバーヘッドが問題になることがあります。

プロジェクト全体のソースコードはこちらに置いてあります。
https://github.com/ist-h-i/Angular/tree/main/v-18

環境設定

node -v

v20.17.0

ng version

Package | Version
— | ---
@angular-devkit/architect | 0.1802.6
@angular-devkit/build-angular | 18.2.6
@angular-devkit/core | 18.2.6 (cli-only)
@angular-devkit/schematics | 18.2.6
@schematics/angular | 18.2.6
rxjs | 7.8.1
typescript | 5.5.4
zone.js | 0.14.10

初期構築コマンド

Angularインストール

npm install -g @angular/cli

プロジェクト作成

ng new “アプリ名”

コンポーネント作成

ng g c components/”コンポーネント名”

node-modulesインストール

npm i

アプリ起動

npm start

実装

上記手順でsignalコンポーネントを作成しています。

signal.component.html

<input (input)="changeInput($event)">
<p>Signal: {{ signal() }}</p>

forms.component.ts

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

/**
 * SignalComponent
 *
 * @description
 *  - signalという名前のSignalを生成
 *  - inputイベントが発生した場合、Signalの値を変更
 *  - Signalの値を表示
 *
 * @remarks
 *  - NgZoneをinject
 *  - signalは、UIの更新を伴う
 */
@Component({
  selector: 'app-signal',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './signal.component.html',
  styleUrl: './signal.component.scss'
})
export class SignalComponent {
  // signal
  signal = signal('');

  // NgZone（zonelessの場合は不要）
  // private zone: NgZone;

  /**
   * inputイベント
   *
   * @description
   *  - inputイベントが発生した場合、Signalの値を変更
   *  - NgZone.runを使用して、Signalの値を変更
   * @param event inputイベント
   */
  changeInput(event: Event) {
    const inputElement = event.target as HTMLInputElement;

    // NgZone.runを使用して、Signalの値を変更（zonelessの場合は不要）
    // this.zone.run(() => {
      this.signal.set(inputElement.value);
    // })
  }

  // /**
  //  * Constructor
  //  *
  //  * @description
  //  *  - NgZoneをinject（zonelessの場合は不要）
  //  */
  // constructor(zone: NgZone) {
  //   this.zone = zone;
  // }
}

app.config.ts

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    // zoneless化設定を行う
    provideExperimentalZonelessChangeDetection(),
    provideRouter(routes),
    provideClientHydration()
  ]
};

まとめ

今回はAngular入門第二弾でzonelessへの移行についてまとめました。
zonelessはAngular 18のアップデート目玉のひとつなので使いこなすことができるよう勉強中です。
Standaloneコンポーネント、@forや@ifなどのディレクティブなど近年革新的な更新を続けているAngular、毎回いくつかのメジャーバージョンアップデートを行って苦労している身としては何としても最新バージョンについていきたいところです。