スタンドアロンコンポーネントと型付きリアクティブフォームに大注目！「Angular」バージョン14の新機能紹介

次世代Webアプリケーションフレームワーク「Angular」の活用 第26回

開発者に気の利いた指摘をしてくれるExtended diagnotics

　Angular 14では、開発者がよく陥る以下の誤りを指摘してくれるようになりました。

[(ngModel)]などの「Banana in a box」エラー

　双方向データバインディングの記述で利用する[(ngModel)]などの[()]記述を、([])、つまり、かっこと大かっこを反対に書いた場合に指摘してくれるようになりました。公式ドキュメントでは[]を箱、()をバナナに見立てて「Banana in a box」と呼んでいます。バナナ()は箱[]の中に入れるべきという意味です。

図4　「Banana in a box」エラーの指摘（p003-extend-diag）

nullになり得ない変数へのNull合体演算子（??）

　Null合体演算子（??）は、変数がnullの場合の値を指定できる演算子ですが、変数がnullになり得ない場合は意味がないことを指摘してくれるようになりました。

図5　意味のないNull合体演算子の指摘（p003-extend-diag）

Angular CLIの追加コマンド

　Angular CLIに以下のコマンドが追加されました。各コマンドに「--help」オプションを付与して実行すると、詳細なコマンドオプションを確認できます。

ngコマンドを入力補完できるng completion

　「ng completion」コマンドを実行すると、ngコマンドの入力補完が設定できます。Windowsでは、コマンドプロンプトやPowerShellでは利用できず、Git BashやWSL（Windows Subsystem for Linux）で利用できます。「ng completion」を実行して設定後、ngコマンドを途中まで入力してタブキーを押すと候補を表示します。

図6　ngコマンドの入力補完

利用状況の送信を制御できるng analytics

　Angularプロジェクトでは、利用状況を把握する目的で情報を送信する場合があります。「ng analytics」コマンドを利用すると、この利用状況送信を有効・無効に設定したり、現在の状況を確認したりできます。

図7　利用状況送信に関するコマンド

キャッシュ状況を確認するng cache

　「ng cache」は、プロジェクトで利用するキャッシュ情報の表示や、キャッシュの削除などが行えるコマンドです。

図8　キャッシュ利用状況に関するコマンド

その他の変更点

　Angular 14では、その他にもさまざまな変更が行われました。ここではいくつか抜粋して紹介します。

protectedプロパティのバインド

　protected指定されたコンポーネントのプロパティを、直接テンプレートにバインドできるようになりました。プロパティをコンポーネントの外部には公開したくないが、画面には表示したいといったケースに対応できます。

［リスト7］バインドされるprotectedプロパティ（p004-bind-protected/src/app/app.component.ts）

export class AppComponent {
  protected title = 'p008-bind-protected';
}

ページタイトルの指定がより便利に

　ルーターで表示するコンポーネントの指定に、ルーターのパスと同時にページのタイトルが指定できるようになりました。

［リスト8］ルーターでのページタイトル指定（p005-page-title-1/src/app/app-routing.module.ts）

const routes: Routes = [
  {
    path: '',
    title: '親コンポーネント1',     // ページのタイトルを指定
    component: Parent1Component,
（略）
  }
];

　リスト8の通りルーターに指定した場合、図9の通りページ（コンポーネント）の表示を切り替えたときにページのタイトルが反映されます。

図9　ルーターにおけるページタイトルの反映（p005-page-title-1）

　TitleStrategyを継承したクラスを利用すると、タイトルに共通フォーマットを適用できます。タイトルの先頭に「【Sample】」を付与する例をリスト9に示します。

［リスト9］タイトルに共通フォーマットを適用する実装（p006-page-title-2/src/app/title-strategy.ts）

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の通り指定します。

［リスト10］TitleStrategyクラスの指定（p006-page-title-2/src/app/app-routing.module.ts）

@NgModule({
（略）
  providers: [
    { provide: TitleStrategy, useClass: TemplatePageTitleStrategy }
  ]
})
export class AppRoutingModule { }

　リスト9、10の通り実装すると、図10の通りタイトルに反映されます

図10　TitleStrategyによるタイトルの更新（p006-page-title-2）

TypeScriptの更新

　サポートするTypeScriptが4.7となり、ECMAScript 2020がデフォルトターゲットとなりました。

Angular DevToolsのオフライン利用、Firefoxサポート

　Angular DevToolsは、Angularで作成されたWebページを解析して情報を表示できるブラウザー拡張機能です。Angular 14ではオフライン時の利用をサポートするとともに、Firefox向けの拡張機能が提供されるようになりました。

まとめ

　本記事では、2022年6月にリリースされたAngular 14の変更点や追加機能を説明しました。まだ開発プレビュー版とはいえ、スタンドアロンコンポーネントはコンポーネント開発をシンプルにすることが期待できます。そのほか型付きリアクティブフォームなど、開発者がよりスムーズに開発できるよう配慮されたリリースといえます。

参考資料

• Angular
• Angular CLI