Angular 17 の最新の改善点: 知っておくべきことすべて
公開: 2024-03-30Statista が実施した調査によると、Angular は最も使用されている Web 開発フレームワークであり、回答者の 17.46% が利用しています[i] 。 この立場を維持し、パフォーマンスを向上させ、コーディングを簡素化するために、Angular チームは 2023 年 9 月 11 日に新しいバージョンである Angular 17 をリリースしました。
新しくなった Angular フレームワークは、Google のエンジニアリング ディレクターであり Angular チームの責任者である Sarah Drashner のビジョンによって導かれています。 これにより段階的な改善がもたらされ、フロントエンド フレームワークの最新トレンドに合わせながら下位互換性が確保されます。
Angular 17 を使用すると、企業と開発者は強化された開発エクスペリエンスを思い描くことができます。 ここでは、新しい制御フロー構文、サーバーサイド レンダリング (SSR) サポートの改善、esbuild によって強化された CLI、およびその他のアップデートが、よりスムーズで動的な開発ワークフローに貢献しています。
このブログ投稿では、Angular 17 Web 開発フレームワークの新しい機能強化と更新をデコードできます。 また、コラボレーションを促進し、コードの再利用性を促進し、スケーラブルで保守可能な Web アプリケーションの作成を保証するために、開発者がこれを活用する必要がある理由も理解できます。
さぁ、始めよう！
Angular 17 の主な機能と改善点
1. 将来に向けたドキュメント
Angular 17 では、angular.dev での新しいホームの開発により、ドキュメントが大幅に強化されました。 この全面的な見直しには、構造の刷新、更新されたガイド、充実したコンテンツ、Angular および Angular コマンド ライン インターフェイス (CLI) のインタラクティブな学習を促進する最先端のプラットフォームが含まれます。
angular.dev のベータ プレビューは、新しい時代の始まりを示しており、バージョン 18 では Angular のデフォルト Web サイトにする予定です。ハイライトには WebContainers が組み込まれており、ユーザーは最新の Web ブラウザー内で Angular CLI のパワーを直接活用できます。 これにより、将来を見据えた没入型のドキュメント エクスペリエンスがさらに約束されます。
2. 組み込みの制御フロー
Angular 17 の注目すべき機能強化は、*ngIf、*ngFor、*ngSwitch などの従来の構造ディレクティブを置き換える、新しい制御ブロック構文の導入です。 この進化により、開発者はテンプレート コードの柔軟性が向上し、読みやすさが向上します。
たとえば、@if ブロックと @else ブロックは、論理式を使用して条件付きでコンテンツをレンダリングするためのよりクリーンな方法を提供します。 @for ブロックを使用すると、コレクションの反復処理が簡素化され、より表現力豊かで簡潔なコードが可能になります。 さらに、@switch、@case、および @default ブロックは効率的な制御フローを促進し、複数の条件の処理を強化します。
これらの改善を取り入れるために、開発者は提供された回路図を使用して既存のテンプレートを移行できます。 これにより、Angular 17 でのテンプレート開発に対する、より現代的で合理的なアプローチが実現します。
3. 組み込みの @for ループ
Angular 17 の組み込み @for ループ機能により、開発者のエクスペリエンスとレンダリング速度の両方が大幅に向上しました。 この構文は、効率的な変更検出のために「トラック」の使用を義務付けることで、*ngFor に依存するアプリケーションで見られる一般的なパフォーマンスのボトルネックに対処します。 また、レンダリング プロセスの高速化も保証されます。
以前のバージョンとは異なり、「トラック」機能はテンプレート内の式としてシームレスに組み込まれているため、コンポーネントのクラスに追加のメソッドが必要ありません。 特に、組み込みの @for ループは、オプションの @empty ブロックを通じて項目がゼロのコレクションを処理するための便利なショートカットも提供します。 この機能は開発を合理化するだけでなく、Angular アプリケーションのパフォーマンスを大幅に向上させ、フレームワークの進化における注目すべきマイルストーンを示します。
4. 遅延可能なビュー
Angular 17 では、コンポーネント、ディレクティブ、およびパイプを遅延ロードするための直感的なメカニズムを求める Angular コミュニティの要求に応えて、Deferrable Views と呼ばれる重要な機能強化が導入されました。
この新機能は、依存関係の遅延読み込みプロセスをより直観的かつ便利にすることを目的としています。 Deferrable View を使用すると、開発者はテンプレートの一部を必要になるまで宣言的に遅延読み込みできるため、初期バンドル サイズが最適化され、アプリケーションの初期読み込み時間が短縮されます。 これは、テンプレートで新しい「@-syntax」制御フロー構文を使用することによって実現されます。
Deferrable View は遅延読み込み用の組み込みの管理ソリューションを提供するため、開発者は詳細な動的インポート、交差点オブザーバー、またはイベント ハンドラーを管理することなく意図を表現できます。 この機能は、リソースをより速く利用できるようにするためのプリフェッチもサポートしています。
さらに、開発者は統合されたトリガーとカスタム条件を使用して、遅延読み込みをいつ、どのように実行するかを指定できます。 さらに、Deferrable View は定型コードを削減し、依存関係管理をバックグラウンドで自動的に処理します。
5. 強化されたサーバーサイドレンダリング (SSR)
Angular 17 のサーバー側レンダリング機能により、開発者はアプリケーションのパフォーマンスとユーザー エクスペリエンスを向上させることができます。 ハイドレーション ブースト機能は、クライアント側の JavaScript ハイドレーション プロセスを合理化し、ちらつきを最小限に抑え、インタラクティブな Web ページへのスムーズな移行を保証します。
Angular 17 では、SSR 用に標準化された EcmaScript Modules (ESM) 形式も採用されており、ビルドが簡素化され、一般的なツールとの互換性が強化されています。 さらに、コード分割技術を通じて SSR バンドルのサイズを削減することに重点を置き、サーバーの応答を高速化し、検索エンジンの最適化を強化します。 これらの進歩により、Angular 17 は、高性能で SEO に優しい Web アプリケーションを構築するための魅力的な選択肢として位置づけられています。
6. 安定した信号
Angular 17 では、反応性愛好家にとって極めて重要なツールである Signals の安定化を伴う画期的な開発が導入されています。 「開発者プレビュー」というラベルを脱ぎ捨て、Signals は状態を管理し、コンポーネントの更新を容易にするための堅牢なソリューションとしての地位を確立しました。
Signals と Change Detection.OnPush の統合により、あるレベルの精度がもたらされます。 これにより、コンポーネントは特定の信号が変化した場合にのみリフレッシュされ、不必要な再レンダリングを回避してパフォーマンスを最適化します。 不変更新を支持する mutate メソッドの廃止により、状態履歴の維持における予測可能性とクリーンさがさらに強化されます。 Signals が注目を集める一方で、まだ開発者プレビュー段階にある Effects は、非同期操作のための強力な機能を提供する Angular の状態管理の将来を垣間見ることができます。
基本的に、Angular 17 は、安定したシグナル、OnPush 統合、不変の更新、進化するエフェクトの可能性など、洗練されたツールセットを開発者に提供します。 これにより、最終的には、適切に構造化されたアプリケーションの作成が促進されます。
7. esbuild によるパフォーマンスの構築
Angular 17 での esbuild の採用は、Angular プロジェクトのビルド パフォーマンスの向上における大きな進歩を示しています。 Angular CLI は当初 Webpack に依存していましたが、esbuild の活用に移行しました。esbuild は、そのユーザーフレンドリーな性質と驚くべき速度で知られ、毎週 20,000 件以上のダウンロードを誇る新しいツールです。
esbuild の統合は、開発者プレビューとして Angular 16 に実装され、現在は Angular 17 で安定した実装に成熟しました。この統合は、アプリケーション ビルダーを介して新しいプロジェクトのデフォルト ビルダーになりました。 既存のプロジェクトの場合、開発者は、angular.json のビルダー エントリを更新して、esbuild への切り替えを検討することをお勧めします。
この統合により、必要な場合にのみ Vite dev サーバーを利用して効率的な npm パッケージを構築するため、ngserve と ng build の両方の操作の速度が大幅に向上します。 CLI チームによるさまざまなパフォーマンスの最適化の組み込みは、ビルド プロセスの高速化にさらに貢献し、多くの場合、ng ビルドでは 2 ～ 4 倍の速度向上が達成されます。 この移行は、ワークフローを簡素化するだけでなく、プロジェクトのビルド効率を大幅に向上させるツールを開発者に提供するという Angular の取り組みを強調しています。
8. スタンドアロンコンポーネント
「スタンドアロン コンポーネント」は、親モジュールを必要とせずにコンポーネントの作成と利用を可能にする Angular 17 の画期的な機能です。 このパラダイム シフトでは、「AppComponent」で例示されるルート コンポーネントは、コンポーネント デコレータの「standalone: true」プロパティを使用してスタンドアロンとしてマークされます。 この属性は、コンポーネントが親モジュールから独立して動作することを示します。 さらに、コンポーネントはモジュールに依存する代わりに、「imports」配列を利用して、ルーター モジュールなどの必要な依存関係を取り込みます。
次に、「bootstrapApplication」関数を使用してアプリケーションを開始します。これは、従来の NgModule 中心のアプローチからの脱却を示しています。 スタンドアロン コンポーネントの新たな柔軟性により、モジュール化されたカプセル化された開発スタイルが促進され、コンポーネント アーキテクチャの進化と強化に対する Angular の取り組みが示されています。
Angular 17 に移行するにはどうすればよいですか?
既存の Angular アプリケーションをバージョン 17 にアップグレードするには、次の手順に従います。
- まず、コマンド「npm install -g @angular/cli@17」を使用して、Angular CLI をバージョン 17 にグローバルに更新します。
- 次に、「ng update @angular/core」を実行して、Angular コア パッケージを更新します。
- 追加の Angular パッケージを使用する場合は、Angular マテリアルの「ng update @angular/material」などのコードを使用して、それらを個別に更新します。
- 次に、アプリケーションを徹底的にテストして、更新後に期待どおりに機能することを確認します。
ここで参考になるヒントには、メジャー アップデート間のマイナー バージョンへのアップグレード、アップグレード前のコードとデータベースのバックアップ、サードパーティ ライブラリの互換性の確認などがあります。 アップグレード プロセス中に問題が発生した場合は、Angular のドキュメントとコミュニティ フォーラムを参照してサポートを求めることもできます。 これらの合理化された手順により、潜在的な課題を最小限に抑えながら、最新の Angular バージョンへのスムーズな移行が保証されます。
Angular を使用して、堅牢で機能が豊富な最新のアプリケーションを作成する準備はできていますか? 当社の専門家にご相談ください。
参考文献:
[i]スタティスタ