はじめに
Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS(AngularJS 1)と呼ばれていましたが、バージョン2で全面的に刷新され、以降、半年に1回ほどアップデートされています。
2020年2月に、Angularのバージョン9がリリースされました。Angularのバージョンアップはおおむね半年ごとに行われ、バージョン8のリリースが2019年5月だったことを考えると、予定より遅れてのリリースとなります。
![図1:バージョン9のリリースを告知する公式ブログ記事](http://cz-cdn.shoeisha.jp/static/images/article/12057/12057_001.png)
バージョン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の最終バージョンにアップデートすることを推奨しています。
ng update @angular/cli@8 @angular/core@8
その後、リスト2のコマンドでAngular 9へアップデートします。
ng update @angular/cli @angular/core
プロジェクトによっては追加の手順が必要になる場合があります。詳細は「Angular Update Guide」や、Angular 9の公式ページで確認できます。