Posted inDevelopment

Angular 18: NgModuleとの別れ、SignalsとZonelessでアプリケーションを高速化

Development tutorial - IT technology blog
Development tutorial - IT technology blog

Angular 18がパフォーマンスの革命である理由とは？

以前のバージョンのAngularで苦労したことがある方なら、app.module.tsファイルが悩みの種だったはずです。コンポーネントからサービスまであらゆる設定がそこに集中し、プロジェクトが大きくなるほどファイルは肥大化し、メンテナンスが困難になりました。さらに、Zone.jsに基づく従来のChange Detection（変更検知）は、リソースを浪費しがちでした。たとえ小さなイベントが発生しただけでも、フレームワークはコンポーネントツリー全体を再スキャンせざるを得なかったからです。

Angular 18は、これらの煩わしさを解消するために誕生しました。Standalone Componentsの導入により、冗長なNgModuleは正式に廃止されました。一方、Signalsはステート管理をより明確にする強力な「アシスタント」となります。最近の5人の開発者によるプロジェクトでは、この組み合わせを適用したことで生産性が約30%向上しました。特に、あの古典的なエラーであるExpressionChangedAfterItHasBeenCheckedErrorはほぼ完全に姿を消しました。

核心となる概念：StandaloneとSignals

1. Standalone Components：軽量な構造

以前は、コンポーネントを動作させるためにモジュールへの「登録」が必要でした。今では、各コンポーネントが独立した実体となり、必要な依存関係（imports）を自ら管理します。このアプローチにより、コンポーネントの共有やLazy Loadingの実装が非常にシンプルになります。不要な中間モジュールファイルがなくなるため、コードはよりクリーンになります。

2. Signals：電光石火の反応

SignalをExcelのセルのようなものだと想像してください。セルAの値が変わると、手動で操作しなくてもセルBが自動的に更新されます. Signalsにより、Angularはどのコンポーネントを再レンダリングすべきかを正確に把握できます。以前のようにフレームワークが推測したり、アプリケーション全体をスキャンしたりする必要はありません。これこそが、即座に反応するアプリケーションを実現する鍵となります。

実践：Angular 18標準のTodoリスト作成

理論だけでは不十分です。実際にタスク管理アプリを構築して、この新しいアーキテクチャの違いを実感してみましょう。

ステップ 1：プロジェクトの初期化

まず、Angular CLIを最新バージョンにアップグレードします。ターミナルを開き、以下のコマンドを実行してください：

npm install -g @angular/cli@latest
ng new angular-18-signals --standalone --routing --style=scss
cd angular-18-signals

バージョン17以降、--standaloneフラグはデフォルトになっています。しかし、NgModuleが過去のものになったことを強調するために、あえて明記しています。

ステップ 2：Signalsによるロジックの実装

todo-list.component.tsを作成します。ここでは、タスクリストの管理を通じてSignalのパワーが最も明確に示されます：

import { Component, signal, computed, effect } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-todo-list',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './todo-list.component.html',
  styleUrl: './todo-list.component.scss'
})
export class TodoListComponent {
  // サンプルデータでSignalを初期化
  todoList = signal<{ task: string, completed: boolean }[]>([
    { task: 'Angular 18を学ぶ', completed: false },
    { task: 'アプリのパフォーマンスを最適化', completed: true }
  ]);

  newTodo = signal('');

  // Computed Signal: todoListが変更されると自動的に再計算
  completedCount = computed(() => 
    this.todoList().filter(t => t.completed).length
  );

  constructor() {
    // Effect: 内部のSignalが変更されるたびに自動的に実行
    effect(() => {
      console.log(`現在のタスク数: ${this.todoList().length}`);
    });
  }

  addTodo() {
    if (this.newTodo().trim()) {
      this.todoList.update(todos => [
        ...todos, 
        { task: this.newTodo(), completed: false }
      ]);
      this.newTodo.set('');
    }
  }

  toggleTodo(index: number) {
    this.todoList.update(todos => 
      todos.map((todo, i) => 
        i === index ? { ...todo, completed: !todo.completed } : todo
      )
    );
  }
}

ステップ 3：新しいControl Flowによるテンプレートの最適化

HTMLファイルでは、Signalを呼び出す際に括弧 () を使用することに注意してください。また、従来の冗長な *ngFor に代わり、新しい @for 構文を使用します：

<div class="container">
  <h2>マイタスク</h2>
  
  <div class="input-group">
    <input [ngModel]="newTodo()" (ngModelChange)="newTodo.set($event)" placeholder="やるべきこと...">
    <button (click)="addTodo()">追加</button>
  </div>

  <p>完了済み: {{ completedCount() }} / {{ todoList().length }}</p>

  <ul>
    @for (item of todoList(); track $index) {
      <li (click)="toggleTodo($index)" [class.done]="item.completed">
        {{ item.task }}
      </li>
    }
  </ul>
</div>

@for 構文は読みやすいだけでなく、diffingアルゴリズムが最適化されているため、大規模なリストのレンダリングが大幅に高速化されます。

究極のパフォーマンス：Zoneless Angular

Angular 18の最も「価値ある」機能は、Zone.jsなしで動作する能力です。このライブラリを排除することで、アプリケーションのバンドルサイズを約13KB（gzip圧縮時）削減できます。さらに重要なのは、ブラウザが継続的なバックグラウンド監視タスクによってブロックされなくなることです。

有効にするには、app.config.tsで以下のように設定します：

import { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideExperimentalZonelessChangeDetection()
  ]
};

このステップの後、polyfillsから zone.js を安全に削除できます。Signalsからの直接的な変更通知メカニズムのおかげで、アプリケーションは非常にスムーズに動作するようになります。

実践的なアドバイス

多くの人が「SignalsはRxJSを置き換えるのか？」という疑問を抱きます。答えは「いいえ」です。Signalsは表示状態（UI State）の管理に非常に優れています。しかし、Debounce Searchやデータストリームの処理といった複雑な非同期タスクには、依然としてRxJSが最適です。toSignal() を使って両者を組み合わせ、それぞれの利点を活かしましょう。

まとめ

Angular 18は単なる定期的なアップデートではありません. それは、よりモダンで、洗練され、高効率なプログラミングの時代への転換点です。Standalone ComponentsとSignalsをマスターすることで、メンテナンスが容易で、最高のユーザー体験を提供するプロフェッショナルなウェブアプリケーションを構築できるようになります。あなたの次のAngularプロジェクトの成功を祈っています！

Share:
Tags: