Ugo

Webエンジニアのためのプログラミング情報サイト

  • Angular 18の新機能と変更点をまとめ！ゾーンレス変更検知・イベントリプレイ

Angular 18の新機能と変更点をまとめ！ゾーンレス変更検知・イベントリプレイ

Angular 18の新機能と変更点をまとめ！ゾーンレス変更検知・イベントリプレイ

2024年3月24日、待望のAngular 18がリリースされた。

この記事ではAngular 18の新機能や変更点をわかりすくまとめてみた。

今回のAngular 18ではバージョン17までに紹介されたメジャーな新機能が安定版として供給される。Angularを使用しているプロジェクトでは、今後のコーデイングルールや既存のコードベースとの併用について話し合っているチームも多いのではなかろうか？

Angularを使用している開発者はこれからの数年間、新たなAngularのベストプラクティスを探すために試行錯誤を重ねていくことになるだろう。

この記事が今後のコーディングの指針となれば幸いだ。

Angular 18のアナウンス記事（英語）
https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe

目次

Angular 18のおもなアップデート内容

今回のアップデートの内容をまとめると以下のようになる。

  • 新機能の正式リリース（新制御フロー・遅延ロードビュー・Material 3）
  • zone.jsを使用しない変更検出
  • イベントリプレイ（Wizの機能の統合）

新機能の正式リリース（新制御フロー・遅延ロードビュー・Material 3）

Angular 18では、バージョン17で紹介された「新制御フロー」「遅延ロードビュー」といったメジャーな機能が正式版となった。

これらの機能はバージョン17から大きな変更は無く、既に使用している企業もかなり多いそうだ。

「新制御フロー」「遅延ロードビュー」について知りたい人はこちらの記事を読んでほしい。

関連記事
Angular 17の新機能と変更点を紹介。新生Angularを体感する！
Angular 17の新機能と変更点を紹介。新生Angularを体感する！
2023年11月8日に待望のAngularバージョン17がリリースされた。 今回のアップデートはAngular 2のリリース以降もっとも大きな変更を複数含んでおり、新生Angula […]

Angularの公式コンポーネントライブラリであるAngular Materialの新バージョン「Material 3」も正式リリースとなった。

なお、多くの開発者が注目する「Signal API」は安定版の供給に向けて改良が進められている。

zone.jsを使用しない変更検出

Angularは今まで変更検知システムとして、”zone.js”というフレームワークを使用してきた。

しかし、zonr.jsはパフォーマンスを始めとした様々な問題点が知られており、Angularチームはzone.jsに依存しない変更検出システムの開発を進めてきた。

今回のAngular18では初めてその「ゾーンレス」の変更検出システムをプレビューバージョンとして使用することができる。

ゾーンレスの変更検知システムには以下のような長所がある。

  • マイクロフロントエンドの構築可能性と他のフレームワークとの相互運用性の向上
  • 初期レンダリングとランタイムの高速化
  • バンドルサイズの縮小とページロードの高速化
  • スタックトレースの可読性の向上

ゾーンレスの変更検出を試してみたい人は、アプリのブートストラップに下記のコードを追加し、angular.jsonの”polyfills”プロパティから”zone.js”を取り除く。

bootstrapApplication(App, {
  providers: [
    provideExperimentalZonelessChangeDetection()
  ]
});

イベントリプレイ（Wizの機能の統合）

近年、Googleは自社フレームワークである「Wiz」のAngularへの統合を進めてきた。

生産性や使いやすさに重点を置いた開発者向けのフレームワークであるAngularと比較して、WizはYouTubeを始めとした自社アプリに使用されておりパフォーマンスを重視している。

Angular 18からはハイブリッドレンダリング使用時に”イベントリプレイ”によってイベント発信が強化される。

今までは画面のレンダリング中にユーザが行ったボタンクリックなどのイベントは失われていたが、イベントリプレイを使用するとそれらのイベントがレンダリング後に反映される。

イベントリプレイを使用する際は、例としてアプリのブートストラップに”provideClientHydration(withEventReplay())”を追加する。

bootstrapApplication(App, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

Angular 18のその他のアップデート

今回のアップデートでは、Angularユーザのリクエストに応える形で既存の機能にもアップデートが加えられた、Angular開発者はぜひチェックしてみてほしい。

ng-contentのフォールバック

今バージョンからng-contentでフォールバックの際のコンテントを指定できるようになった。

以下の例ではひとつのコンポーネントにng-contentをデフォルト指定とともに3つ使用している。ng-contentタグに挟まれている部分がフォールバックとなる。

<ng-content select=".my-header">ヘッダー<br></ng-content>
<ng-content>メインエリア<br></ng-content>
<ng-content select="footer">フッター</ng-content>

このコンポーネントを他のコンポーンとで呼び出してみる。それぞれのng-contentの中身を書き換える場合は下記の例のように記述する。

<app-fallback>
  <div class="my-header">カスタムヘッダー</div>
  独自のメインコンテント
  <footer><button>他のページへ</button></footer>
</app-fallback>

以下のようにそれぞれのng-contentの中身を指定しなかった場合はフォールバックが表示される。

<app-fallback></app-fallback>

フォーム状態変更イベントの統合

Angular Formにも新しい機能が追加された。

今回、追加されたのは”events”関数で、これによりひとつのイベントリスナーで異なる種類のイベントを受信することができるようになった。

受信できるのは”value”, “touch state”, “pristine status”, “control status”の4つだ。

コードの記述をシンプルにしたい場合やデバッグなどの際には重宝する機能だろう。

    this.userForm.events.subscribe( async event => {
      debugger;
    });

イベントの例

ルートリダイレクト関数

今回のアップデートからルート設定の”redirecTo”プロパティに関数を直接記述することが可能となった。

    path: 'home',
    component: HomeComponent,
    redirectTo: ({ queryParams }) => {
      const userId = queryParams['userId'];
      if (userId) {
        return `/user/${userId}`;
      } else {
        return `/not-found`;
      }
    },

TypeScript 5.4に対応

Angular 18では、対応するTypeScriptのバージョンが5.4にアップデートされた。

MENU