Angular の最新化: Angular 19 の新機能

Angular 19 が正式に登場しました。これには、開発者のエクスペリエンス、パフォーマンス、適応性の向上を目的としたさまざまな機能が満載されています。

この記事では、主要なハイライトと、Angular 19 が最新の Web 開発にとって重要な前進となる理由について説明します。

1. 増分水分補給: SSR のゲームチェンジャー

Angular 19 での 増分ハイドレーション の導入により、サーバーサイド レンダリング (SSR) が新たな高みに引き上げられました。従来の完全なハイドレーション アプローチとは異なり、増分ハイドレーションでは、サーバーでレンダリングされたコンポーネントがビューポートに入ったとき、またはインタラクティブになったときにのみハイドレーションできます。

これにより、読み込み時間が短縮され、ユーザー エクスペリエンスが向上します。この機能は現在開発者プレビューの段階ですが、初期負荷の最適化と Lighthouse スコアの向上に大きな期待が寄せられています。

これを達成するために、Angular は Chrome Aurora と協力して、怠惰な水分補給 に焦点を当て、現実世界の使用に適応できる、よりシームレスな SSR エクスペリエンスを提供しました。開発者は @defer などのディレクティブを使用して、コンポーネントをいつハイドレートするかを正確に制御できるようになり、プロセスが非常に効率的になります。

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration())
  ]
});

@defer (hydrate on viewport) {
  <shopping-cart></shopping-cart>
}

2. イベント リプレイ: スムーズなユーザー インタラクションの確保

サーバー側でレンダリングされるアプリでよくある問題は、ユーザー インタラクションと、そのインタラクションの処理を担当する JavaScript のロードとの間の遅延です。

イベントリプレイ は、Angular 19 でデフォルトで有効になり、初期ロード中にユーザー イベントをキャプチャし、必要な JavaScript が利用可能になったときにそれらをリプレイします。これにより、アプリがまだハイドレート処理中であっても、スムーズなユーザー エクスペリエンスが保証されます。

イベント ディスパッチは、Google 検索 (Wiz) で使用されているものと同じライブラリを利用しており、何十億ものユーザーによってテストされています。

イベントの再生を有効にするために、Angular はハイドレーション プロバイダーで次の設定を使用します。

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

これにより、JavaScript が完全に読み込まれる前に発生したユーザー操作が失われず、シームレスなエクスペリエンスが提供されます。

3. ルートレベルのレンダリング モード: レンダリングのきめ細かい制御

Angular 19 では、ルートレベルのレンダリング モードが導入されています。これにより、開発者はアプリケーション内の個々のルートをサーバー上、クライアント上で、またはビルド プロセス中に事前レンダリングする方法でレンダリングする方法を指定できます。

これにより、レンダリング戦略をきめ細かく制御できるため、開発者は各ルートの特定のニーズに基づいてパフォーマンスと SEO を最適化できます。

例: ログイン ルートは初期読み込み時間を短縮するためにサーバー側でレンダリングでき、ダッシュボード ルートはクライアント側でレンダリングして対話性を強化できます。この柔軟性により、アプリケーションの各部分が意図した使用例に合わせて最適化されるようになります。

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration())
  ]
});

Angular は、プリレンダリング中にルート パラメーターを解決する簡単な方法も提供し、高度にカスタマイズ可能なプリレンダリング ページを可能にします。

@defer (hydrate on viewport) {
  <shopping-cart></shopping-cart>
}

この新しいインターフェース ServerRoute により、開発者はコンテンツの配信方法をより詳細に制御できるようになり、ユーザー エクスペリエンスと SEO の両方が向上します。

4. ホットモジュール交換 (HMR) がすぐに実現

Angular 19 では インスタント HMR が導入され、アプリ全体をリロードせずにスタイルとテンプレートを更新できるようになります。これは、開発者が変更の効果をすぐに確認できることを意味し、開発サイクルがよりスムーズかつ迅速になります。 v19 では、スタイルのホット モジュール置換がデフォルトで有効になっています。テンプレートの HMR を試すには、以下を使用します:

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

この機能を無効にするには、開発サーバー オプションとして「hmr」: false を指定するか、代わりに以下を使用します:

export const serverRouteConfig: ServerRoute[] = [
  { path: '/login', renderMode: RenderMode.Server },
  { path: '/dashboard', renderMode: RenderMode.Client },
  { path: '/**', renderMode: RenderMode.Prerender },
];

5. ゾーンレスサポート: 継続的な進化

6 か月前、Angular は実験的な ゾーンレス サポートを導入しました。それ以来、Angular は API を反復して拡張し、サーバー側レンダリングのサポートを追加し、テスト エクスペリエンスを改善してきました。

Angular は Google Fonts チームと提携して、アプリケーションをゾーンレスにし、開発者のエクスペリエンスを評価しました。結果は予想を上回りましたが、この API を開発者プレビューに移行する前に、さらにいくつかの磨きをかける必要があります。

Angular 19 は、ゾーンレス操作がデフォルトとなり、変更検出が大幅に簡素化され、アプリケーションがスリムになる未来に向けて前進し続けています。

ゾーンレスを実験するには、次のセットアップを使用します:

export const routeConfig: ServerRoute = [{
  path: '/product/:id',
  mode: 'prerender',
  async getPrerenderPaths() {
    const dataService = inject(ProductService);
    const ids = await dataService.getIds();
    return ids.map(id => ({ id }));
  },
}];

6. リンクされたシグナル: コンテキスト認識を備えた反応状態

新しく追加された最もクールな機能の 1 つは、リンクされた信号です。この機能を使用すると、データが更新されても、結合された信号の関係が維持されます。これは、複数のデータ ポイントを動的に同期しておく必要があるシナリオで特に役立ちます。たとえば、別のリアクティブ ソースから派生したドロップダウンまたは選択の状態を維持することがより簡単になり、必要な定型文が少なくなりました。

NG_HMR_TEMPLATES=1 ng serve

linkedSignal API は、エフェクトに頼らずにステートフル要素間の依存関係を表現する簡単な方法を提供します。新しい API には 2 つの形式があります。簡易バージョン (ここに表示) と、開発者がリンク信号とソース信号の両方の以前の値にアクセスできる高度なバージョンです。

7. Angular マテリアルのアップグレード

Angular マテリアルも Angular 19 で大幅にアップグレードされました。新しく、よりカスタマイズ可能な テーマ API が追加され、開発者はスタイルを簡単にオーバーライドし、Angular マテリアル コンポーネントの外観と操作性を、深く掘り下げることなく調整できるようになりました。入れ子になったCSS。各コンポーネントのドキュメントには、これらの変更を行う方法を簡単に参照できる [スタイル] タブも含まれています。

待望の ドラッグ アンド ドロップ コンポーネントがついに Angular マテリアルにネイティブに追加され、開発者はサードパーティのライブラリに依存せずに高度なドラッグ アンド ドロップ インタラクションを実装できるようになりました。

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration())
  ]
});

個々のコンポーネントをカスタマイズするには:

@defer (hydrate on viewport) {
  <shopping-cart></shopping-cart>
}

8. シグナルの移行スクリプト

組み込みの移行スクリプトのおかげで、アプリを新しいシグナルベースの反応性モデルに移行することがより簡単になりました。これらのスクリプトは、古い Angular デコレータの代わりにシグナルを使用するように既存の入力、出力、クエリを移行するのに役立ち、最小限の労力でアプリを最新の状態に保つことができます。

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

9. 強化されたコンテンツセキュリティポリシー

セキュリティは、このリリースのもう 1 つの重要な焦点です。 Angular 19 では、自動 CSP (コンテンツ セキュリティ ポリシー) のサポートが導入されています。これは、デフォルトで XSS 攻撃やその他の脆弱性を防ぐために、安全な CSP 構成をアプリケーションに自動的に追加します。これは、手動構成を減らしてセキュリティを向上させるための重要な一歩です。

export const serverRouteConfig: ServerRoute[] = [
  { path: '/login', renderMode: RenderMode.Server },
  { path: '/dashboard', renderMode: RenderMode.Client },
  { path: '/**', renderMode: RenderMode.Prerender },
];

10. Angular でのテストの将来

最後に、テストに関する重要な注意事項です。Karma は、Jest や Web Test Runner などのより新しいツールを優先して非推奨になります。 2025 年半ばまでに Karma はサポートされなくなるため、開発者は他の最新の Angular エコシステムとスムーズに統合される、より信頼性の高いテスト設定に移行する十分な時間が与えられます。

まとめ

Angular 19 は単なるアップデートではありません。これは、開発者とユーザーの両方のエクスペリエンスを最適化する先進的なバージョンです。このバージョンでは、増分ハイドレーション、イベント リプレイ、ルート レベルのレンダリング モード、インスタント HMR、ゾーンレスへの移行、生産性の多数の機能強化などの機能を備え、Angular を理想の、最新の高性能で開発者に優しいフレームワークに近づけます。 .

移行または新しいプロジェクトの開始を検討している場合、Angular 19 は最先端の機能と進化するベスト プラクティスをサポートする強固な基盤を提供します。最も楽しみにしている機能、またはプロジェクトでの Angular 19 の導入について質問がある場合は、お知らせください。

以上がAngular の最新化: Angular 19 の新機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。