スタンドアロンAPIが安定版になるなど、多数の改良が反映された「Angular v15」が公開：画像ディレクティブ、MDCコンポーネントなども安定版に

オープンソースWebアプリケーションフレームワーク「Angular」の最新版となる「Angular v15」が公開された。

[＠IT]

　オープンソースのWebアプリケーションフレームワーク「Angular」の最新版となる「Angular v15」が2022年11月17日（米国時間）、Angularチームによって公開された。

　Angular v15では、開発者体験とパフォーマンスの向上につながる多数の改良が施されている。主な改良点は次の通り。

スタンドアロンAPIが安定版に

　Angular v14で導入され、開発者プレビュー段階にあったスタンドアロンAPIが安定版となった。スタンドアロンAPIでは、NgModuleを使わずにアプリケーションを作成できる。

　NgModuleは、@NgModuleデコレーターが付与されたクラスを指す。@NgModuleデコレーターは、コンポーネントのテンプレートをコンパイルする方法と、実行時にインジェクターを作成する方法が記述されたメタデータオブジェクトを引数に取る。モジュール自身が持つコンポーネント、ディレクティブやパイプを識別し、この中の幾つかをexportsプロパティを通して公開し、外部コンポーネントから使用できるようにする。

　スタンドアロンAPIは、単一のコンポーネントを使用してアプリケーションをブートストラップすることを可能にする。

ルーターとHttpClientのツリーシェイク可能なスタンドアロンAPI

　新しいルータースタンドアロンAPIを使用して、マルチルートアプリケーションを作成できる。

　ルート（route）は、ユーザーがAngularアプリケーション内をナビゲートする方法を定義するために使用される。ルートを追加することで、ユーザーがアプリケーションのある箇所から別の箇所にナビゲートする方法を定義できる。また、予期しない動作や許可されない動作から保護するためにルートを構成することも可能だ。

　ルーター（router）は、Angularアプリケーション内の状態とビュー間のナビゲーションを、構成および実装するツールのことを指す。ページ間のナビゲーションではなく、シングルページ上のビュー間のナビゲーションを定義する。

　新しいルーターAPIはツリーシェイクが可能であり、バンドラーはビルド時に、ルーターの使われていない機能を削除できる。

ディレクティブコンポジションAPI

　ディレクティブコンポジションAPIにより、ディレクティブを使ってホスト要素を強化し、Angularのコンパイラによってのみ可能な、コードの強力な再利用ができるようになった。ディレクティブは、DOM（Document Object Model）の構造を変更したり、DOMにおける属性とコンポーネントデータモデルを変更したりできるクラスだ。

画像ディレクティブが安定版に

　Chrome Auroraチームとの共同開発により、Angular v14.2で導入された画像ディレクティブが安定版となった。画像ディレクティブは、画像の最適化によってAngularアプリケーションのパフォーマンスを向上させる。

画像ディレクティブで得られるパフォーマンスの向上を示すデモアプリケーション（提供：Angularチーム）

機能的なルーターガード

　機能的なルーターガードにより、ルーターガイドのリファクタリングを行い、冗長で定型的なコードを減らせるようになった。

ルーターが既定のエクスポートをアンラップ

　ルーターが遅延ロード時に、既定のエクスポートを自動的にアンラップするようになった。この機能は、ルーターをよりシンプルにし、冗長で定型的なコードを減らせるようにすることを目的としている。遅延ロードは、アプリケーションを複数のバンドルに分割し、オンデマンドでロードすることにより、アプリケーションのロード時間を短縮するプロセスである。

スタックトレースの改善

　毎年実施している開発者アンケートから、デバッグ時にエラーメッセージを理解するのに苦労している開発者が多いことが分かった。そこでAngularチームはChrome DevToolsチームと組み、Chromeのデベロッパーツールで表示されるスタックトレースを大きく改善した。

MDCベースのコンポーネントが安定版に

　Material Design Components for Web（MDC）に基づくAngularのマテリアルコンポーネントのリファクタリングが完了した。これにより、AngularはMaterial Designの仕様にさらに近づき、Material Designチームが開発したプリミティブのコードの再利用や、Material 3の採用が可能になった。

　Angular v15ではこれらの他、以下の項目で改良がなされている。

• 各種のコンポーネント
• CDK（Component Dev Kit）リストボックス
• 実験的なesbuildサポート
• 言語サービスでの自動インポート
• CLI