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

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

　本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回は2019年5月にリリースされたAngularのバージョン8を紹介しましたが、それから半年以上経過した2020年2月に、次バージョンとなるバージョン9がリリースされました。今回はAngularのバージョン9について、主要な変更点や新機能を紹介していきます。

はじめに

　Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS（AngularJS 1）と呼ばれていましたが、バージョン2で全面的に刷新され、以降、半年に1回ほどアップデートされています。

　2020年2月に、Angularのバージョン9がリリースされました。Angularのバージョンアップはおおむね半年ごとに行われ、バージョン8のリリースが2019年5月だったことを考えると、予定より遅れてのリリースとなります。

図1：バージョン9のリリースを告知する公式ブログ記事

　バージョン9は「過去3年間で最も大規模なアップデートの1つ」とうたわれており、バージョン8で導入された次世代レンダリングエンジン「Ivy」がデフォルト化されたほか、さまざまな改良が行われています。

　本記事では、Angularのバージョン9（以下「Angular 9」）について、主要な変更点や新機能をサンプルとともに説明していきます。

対象読者

• 常にAngularの最新動向を把握しておきたい方
• 既存のAngularソースコードを最新版に追従する必要がある方
• Angular 9の便利な新機能を見逃したくない方

必要な環境

　Angularの開発では、一般にTypeScript（変換してJavaScriptを生成する、いわゆるAltJS言語）が利用されます。本記事のサンプルコードもTypeScriptで記述しています。

　今回は以下の環境で動作を確認しています。比較用に使用したAngular 8のバージョンも以下に記載します。

• Windows 10 64bit版
  • Angular 9.0.2 / 8.2.14
  • Angular CLI 9.0.3 / 8.3.25
  • Node.js v10.16.1 64bit版
  • Microsoft Edge 44.18362.449.0

　サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「ng serve --open」コマンドを実行します。--openは、ブラウザーを自動的に起動するオプションです。

プロジェクトをAngular 9対応にアップデートする方法

　既存のAngularプロジェクトをAngular 9対応にアップデートするには、Angular CLIの「ng update」コマンドが利用できます。公式ページでは、Angular 9へのバージョンアップ前に、まずリスト1のコマンドで、Angular 8の最終バージョンにアップデートすることを推奨しています。

［リスト1］プロジェクトをAngular 8の最終バージョンへアップデートするコマンド

ng update @angular/cli@8 @angular/core@8

　その後、リスト2のコマンドでAngular 9へアップデートします。

［リスト2］プロジェクトをAngular 9へアップデートするコマンド

ng update @angular/cli @angular/core

　プロジェクトによっては追加の手順が必要になる場合があります。詳細は「Angular Update Guide」や、Angular 9の公式ページで確認できます。