大きく進化した「Angular」バージョン9、次世代レンダリングエンジン「Ivy」を中心に機能紹介

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

Angular 9のそのほかの改善点

　Ivy関連以外でも、Angular 9では以下の改善が行われました。

「ng update」の改善

　Angular CLIの8.3.19以降では、アップデート先バージョンのCLIで「ng update」が行われるようになりました。また、アップデートの過程がより詳細に表示されるようになるとともに、「--create-commits」オプションによって、アップデートの過程ごとに変更をGitリポジトリにコミットできるようになりました。

「providedIn」のオプション追加

　サービスの依存性注入に関する「providedIn」設定に、1つのページに含まれる複数のAngularアプリケーションに対して、プラットフォームレベルで共有のサービスを依存性注入する「platform」オプションと、遅延モジュールを含め各モジュールに一意の（個別の）サービスを依存性注入する「any」オプションが追加されました。

Component harnesses

　コンポーネントの実装変更に影響を受けにくいテストが記述できる「Component harnesses」が、Angular MaterialのComponent Dev Kit（CDK）で利用できるようになりました。詳細は公式ドキュメントを参照してください。

YouTubeとGoogle Mapsを表示する新コンポーネント

　Angularの新コンポーネントとして、「Angular YouTube Player component」「Angular Google Maps component」が提供されます。

　YouTube Player componentは、AngularのWebページにYouTubeプレーヤーを表示します。

図9：YouTubeの動画をAngularのWebページに表示（p007-youtube）

　YouTube Player componentを利用するには、「npm install @angular/youtube-player」コマンドでインストール後、リスト9の通り<youtube-player>タグを記述します。

［リスト9］youtube-playerコンポーネントの記述（p007-youtube/src/app/app.component.html）

<!-- videoIdはYouTube動画のIDを指定 -->
<youtube-player videoId="PRQCAL_RMVo"></youtube-player>

　コンポーネント側では、YouTube Player APIのリファレンスに従い、リスト10の実装でAPIのJavaScriptコードを非同期ロードします。

［リスト10］Youtube APIのコードを非同期ロードする実装（p007-youtube/src/app/app.component.ts）

ngOnInit() {
  // YouTube IFrame Player APIを非同期に読み込む
  const tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  document.body.appendChild(tag);
}

　Google Maps componentは、AngularのWebページにGoogle Mapsの地図を表示します。

図10：Google MapsをAngularのWebページに表示（p008-maps）

　Google Maps componentを利用するには、「npm install @angular/google-maps」コマンドでインストール後、リスト11の通り<google-map>タグを記述します。

［リスト11］google-mapコンポーネントの記述（p008-maps/src/app/app.component.html）

<google-map
  width="640px"         ...幅
  height="400px"        ...高さ
  [center]="center"     ...中央の座標
  [zoom]="zoom">        ...ズームのレベル
</google-map>

　なお、Google Mapsを表示するには、Google Maps PlatformのWebページから取得したAPI Keyが必要です。API Keyは、index.htmlにリスト12の通り記述します（API_KEYの部分にAPI Keyを設定します）。

［リスト12］Gooel Maps API Keyの記述（p008-maps/src/index.html）

  <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>

　詳細は各サンプルコードや、各コンポーネントの公式ページを参照してください。

開発環境の改善

　Visual Studio Code用に提供されているAngularのプラグイン「Angular Language Service」が更新され、不具合修正のほか、テンプレートのシンタックスハイライトやtemplateUrl/styleUrlsの定義へのジャンプ、NgModuleや型情報のツールチップ表示といった機能追加が行われました。

TypeScript 3.7のサポート

　Angular 9はTypeScript 3.6/3.7をサポートするようになりました。また、Zone.JSやRxJSなどの依存ライブラリーもアップデートされました。

まとめ

　本記事では、2020年2月にリリースされたAngular 9の変更点や追加機能を説明しました。新レンダリングエンジンIvyが導入されたことが最大のトピックで、ファイルサイズの縮小やコンパイル速度の向上のほか、デバッグやテストを便利にする新機能など、さまざまなメリットが提供されます。Angular 9はIvyによって大幅な進歩を果たし、Angularを新たなステージに押し上げたリリースと言えるでしょう。

参考資料

• Angular
• Angular CLI