開発者に気の利いた指摘をしてくれるExtended diagnotics
Angular 14では、開発者がよく陥る以下の誤りを指摘してくれるようになりました。
[(ngModel)]などの「Banana in a box」エラー
双方向データバインディングの記述で利用する[(ngModel)]などの[()]記述を、([])、つまり、かっこと大かっこを反対に書いた場合に指摘してくれるようになりました。公式ドキュメントでは[]を箱、()をバナナに見立てて「Banana in a box」と呼んでいます。バナナ()は箱[]の中に入れるべきという意味です。
nullになり得ない変数へのNull合体演算子（??）
Null合体演算子（??）は、変数がnullの場合の値を指定できる演算子ですが、変数がnullになり得ない場合は意味がないことを指摘してくれるようになりました。
Angular CLIの追加コマンド
Angular CLIに以下のコマンドが追加されました。各コマンドに「--help」オプションを付与して実行すると、詳細なコマンドオプションを確認できます。
ngコマンドを入力補完できるng completion
「ng completion」コマンドを実行すると、ngコマンドの入力補完が設定できます。Windowsでは、コマンドプロンプトやPowerShellでは利用できず、Git BashやWSL（Windows Subsystem for Linux）で利用できます。「ng completion」を実行して設定後、ngコマンドを途中まで入力してタブキーを押すと候補を表示します。
利用状況の送信を制御できるng analytics
Angularプロジェクトでは、利用状況を把握する目的で情報を送信する場合があります。「ng analytics」コマンドを利用すると、この利用状況送信を有効・無効に設定したり、現在の状況を確認したりできます。
キャッシュ状況を確認するng cache
「ng cache」は、プロジェクトで利用するキャッシュ情報の表示や、キャッシュの削除などが行えるコマンドです。
その他の変更点
Angular 14では、その他にもさまざまな変更が行われました。ここではいくつか抜粋して紹介します。
protectedプロパティのバインド
protected指定されたコンポーネントのプロパティを、直接テンプレートにバインドできるようになりました。プロパティをコンポーネントの外部には公開したくないが、画面には表示したいといったケースに対応できます。
export class AppComponent {
protected title = 'p008-bind-protected';
}
ページタイトルの指定がより便利に
ルーターで表示するコンポーネントの指定に、ルーターのパスと同時にページのタイトルが指定できるようになりました。
const routes: Routes = [
{
path: '',
title: '親コンポーネント1', // ページのタイトルを指定
component: Parent1Component,
（略）
}
];
リスト8の通りルーターに指定した場合、図9の通りページ（コンポーネント）の表示を切り替えたときにページのタイトルが反映されます。
TitleStrategyを継承したクラスを利用すると、タイトルに共通フォーマットを適用できます。タイトルの先頭に「【Sample】」を付与する例をリスト9に示します。
export class TemplatePageTitleStrategy extends TitleStrategy {
// コンストラクター（Titleインスタンスを依存性注入） ...（1）
constructor(private readonly title: Title) {
super();
}
// タイトルを更新 ...（2）
override updateTitle(routerState: RouterStateSnapshot) {
// ルーターで設定されたタイトルを取得 ...（2a）
const rawTitle = this.buildTitle(routerState);
// タイトルを更新 ...（2b）
if (rawTitle !== undefined) {
this.title.setTitle(`【Sample】${rawTitle}`);
}
}
}
コンストラクター（1）で、タイトルを操作するためのTitleクラスのインスタンスtitleを依存性注入で受け取ります。タイトルを更新するupdateTitleメソッド（2）では、ルーターで設定されたタイトルを（2a）で取得し、（2b）のtitle.setTitleメソッドでページタイトルを更新します。このクラスを、ルーターのモジュールにリスト10の通り指定します。
@NgModule({
（略）
providers: [
{ provide: TitleStrategy, useClass: TemplatePageTitleStrategy }
]
})
export class AppRoutingModule { }
リスト9、10の通り実装すると、図10の通りタイトルに反映されます
TypeScriptの更新
サポートするTypeScriptが4.7となり、ECMAScript 2020がデフォルトターゲットとなりました。
Angular DevToolsのオフライン利用、Firefoxサポート
Angular DevToolsは、Angularで作成されたWebページを解析して情報を表示できるブラウザー拡張機能です。Angular 14ではオフライン時の利用をサポートするとともに、Firefox向けの拡張機能が提供されるようになりました。
まとめ
本記事では、2022年6月にリリースされたAngular 14の変更点や追加機能を説明しました。まだ開発プレビュー版とはいえ、スタンドアロンコンポーネントはコンポーネント開発をシンプルにすることが期待できます。そのほか型付きリアクティブフォームなど、開発者がよりスムーズに開発できるよう配慮されたリリースといえます。
