Angular 15の変更点をまとめ！ディレクティブコンポジションAPIやAngular MDC
この記事では、Angularのバージョン15についておもな新機能や変更点をまとめてみた。
Angularはバージョン2のリリース以降、およそ半年に一度のペースでアップデートをおこなってきており、Angular 15は2023年11月16日に公式リリースされた。
今回もAngularの開発者であればぜひ知っておきたい重要な変更が目白押しなので、ぜひ最後までチェックしてほしい。
Angularチームの公式ブログ:: https://blog.angular.io/angular-v15-is-now-available-df7be7f2f4c8
なお、Angular 13についてこちらの記事を。
Angular 14についてはこちらの記事を読んでほしい。
Angular 15におけるアップデート
では、Angular 15におけるアップデートの内容をザックリと説明したい。
スタンドアローンコンポーネントの公式リリース
Angular14にてプレビュー版としてリリースされた「スタンドアローンコンポーネント」がAngular 15では安定版として使用できる。
Angularでは通常コンポーネントはいずれかのモジュールに属するかたちで存在するが、スタンドアローンコンポーネントとして設定したコンポーンネントはモジュールから独立したかたちで扱うことができる。
@Component({
standalone: true,
selector: 'article-overlay',
// an existing module is imported directly into a standalone component
imports: [MatButtonModule],
template: `
<h2>{{ aritcle.name }}</h2>
<div>{{ article.price }}</div>
<button mat-button>Buy</button>
`,
})
export class ArticleOverlayComponent {
// component
}ルータースタンドアローンAPI
スタンドアローンAPIの公式リリースに伴ってルーターモジュールにもアップデートが施された。
provideRouter関数を使用すれば、アプリのビルドタイムに不要なルートを廃棄することによりアプリのファイルサイズを10％ほど抑えることができる。
ng generateにstandaloneフラッグが導入された
Angular 15からはコンポーネントを生成する際にstandaloneフラッグを付ければ、作成したコンポーネントをスタンドアローンコンポーネントとして自動で設定してくれる。
ng g component --standaloneディレクティブコンポジションAPI
ディレクティブコンポジションは以前から開発者からの要望が高かった機能。
任意のコンポーネントに対して一括して複数のディレクティブを適用することができる。
ディレクティブコンポジションを使用する場合は、コンポーネントを宣言する際にhostDirectivesにディレクティブ名と値を指定する。
@Component({
selector: 'mat-menu',
hostDirectives: [HasColor, {
directive: CdkMenu,
inputs: ['cdkMenuDisabled: disabled'],
outputs: ['cdkMenuClosed: closed']
}]
})
class MatMenu {}MDC WebによるAngular Materialの強化
Angular15では、Angularの公式なコンポーネントライブラリである「Angular Meterial」がサードパーティ製の「Angular MDC Web」(https://m3.material.io/develop/web)と連携することにより機能が強化された。
MDC webの「MDC」はMaterial Design Componentの略であり、Angular Materialと同様にAngularアプリにてマテリアルデザインをコンセプトとしたコンポーネントライブラリである。
旧バージョンのAngular Materialを使用しているプロジェクトをアップデートするには以下のコマンドを実行する。
ng update @angular/material^15プロジェクト内のAngular Materialがバージョン15にアップデートされる。
さらに以前のコンポーネントをMDC Webに差し替えるために以下のコマンドを実行する。
ng generate @angular/material:mdc-migration自動アップデートに問題が生じた場合はTODOとしてコード内に表示される。
スタックトレースの強化
Angular15ではエラーログの出力内容も改善されている。
以前はコンソールに表示されるエラー内容は実装とあまり関係のない情報が多く理解しづらいという評判だったが、今回のアップデートにより出力される内容が一新された。
デフォルト設定ファイルの簡略化
Angular 15からng newで新しいプロジェクトを作成した際に同時に作られる設定ファイルが少なくなった。
設定ファイルの数が多く設定内容を把握するのが大変だったAngularだが、これにより新しい開発者への負担が若干軽減されることになるだろう。
なお、以下のファイルは作成すれば今まで通り使用できるので、既存のプロジェクトを変更する必要は無い。
polyfills.ts
polyfillsの設定はangular.jsonにて直接入力することができるようになった。
enviroment.ts
ng new でプロジェクトを新規で作成した時に以前はenvironment.tsが自動で作成されたが、バージョン15からは作成されないようになった。もちろん、ファイルを作成すれば以前と同様に使用することができる。