はじめに
Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS（AngularJS 1）と呼ばれていましたが、バージョン2で全面的に刷新され、以降、おおむね半年に1回アップデートされています。
前回記事では2020年2月リリースのバージョン9を紹介しましたが、その後2020年6月にバージョン10、11月にバージョン11がリリースされており、Angularのバージョンアップが着実に進んでいます。本記事では、Angularのバージョン10および11（以下「Angular 10」「Angular 11」と記述）について、主要な変更点や新機能を説明していきます。
対象読者
- 常にAngularの最新動向を把握しておきたい方
- 既存のAngularソースコードを最新版に追従する必要がある方
- 新機能を利用してAngularの開発をより高度化したい方
必要な環境
Angularの開発では、一般にTypeScript（変換してJavaScriptを生成する、いわゆるAltJS言語）が利用されます。本記事のサンプルコードもTypeScriptで記述しています。
今回は以下の環境で動作を確認しています。
-
Windows 10 64bit版
- Angular 11.0.3
- Angular CLI 11.0.3
- Node.js v14.15.1
- Microsoft Edge 87.0.664.55
サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「ng serve --open」コマンドを実行します。--openは、ブラウザーを自動的に起動するオプションです。
プロジェクトのAngularをアップデートする方法
既存のプロジェクトで利用しているAngularを最新バージョンにアップデートするには、Angular CLIの「ng update」コマンドをリスト1の通り実行します。
ng update @angular/cli @angular/core
プロジェクトの内容によっては追加の手順が必要です。詳細は「Angular Update Guide」で案内されています。
Angular 10の新機能
以下では、Angular 10で導入された主な新機能を紹介していきます。
Angular Materialの日付時刻範囲コントロール
Angular用のUIコンポーネント「Angular Material」に、日付範囲を設定できるDate Range Pickerコントロールが追加されました。
図1の通り表示するには、テンプレートHTMLにリスト2の通り記述します。
<mat-date-range-input [rangePicker]="picker"><!--（1）--> <input matStartDate placeholder="From"> <input matEndDate placeholder="To"> </mat-date-range-input> <mat-datepicker-toggle matSuffix [for]="picker"><!--（2）--> </mat-datepicker-toggle> <mat-date-range-picker #picker></mat-date-range-picker><!--（3）-->
（1）の<mat-date-range-input>要素が日付範囲を入力するコンポーネントで、input要素を2つ含みます。開始日のinput要素にはmatStartDate、終了日のinput要素にはmatEndDateのディレクティブをそれぞれ指定します。（2）は、カレンダーを表示するボタン（カレンダーアイコン）、（3）はカレンダー表示に対応します。
なお、Date Range Pickerはデフォルトでは英語で表示されますが、図2の通り日本語で表示させることもできます。
日本語表示を設定するモジュール定義ファイル（app.module.ts）はリスト3です。
@NgModule({
（略）
imports: [
BrowserModule,
BrowserAnimationsModule,
MatFormFieldModule,
MatDatepickerModule,
MomentDateModule // Angularで日付操作にmomentを利用するモジュール ...（1）
],
providers: [
{ provide: MAT_DATE_LOCALE, useValue: 'ja-JP' }, // ロケール指定 ...（2）
{
provide: MAT_DATE_FORMATS, // 日付フォーマット指定 ...（3）
useValue: {
parse: { // 日付文字列を解釈するときの指定 ...（4）
dateInput: 'l'
},
display: { // 日付を表示するときの指定 ...（5）
dateInput: 'l',
monthYearLabel: 'YYYY年MM月'
},
}
}
],
bootstrap: [AppComponent]
})
（1）は、Angularの日付操作にMoment.jsを利用するモジュールの指定です。（2）でロケールを日本語に指定し、（3）で日付フォーマットを指定します。（4）のparseは入力された日付文字列を解釈する際のフォーマット指定で、dateInputに指定されている「l」は「2020/1/3」といった入力を受け入れることを意味します。フォーマットの詳細はMoment.jsの公式ページを参照してください。（5）のdisplayは日付を表示する際のフォーマット指定で、dateInputのほか、monthYearLabelに日本語のフォーマットを指定しています。
リスト3の設定を行うには「moment」と「@angular/material-moment-adapter」のパッケージをインストールする必要があります。p001a-datepicker-jaサンプルでは「npm install」コマンドでこれらのパッケージがインストールされます。
型チェックを厳しく行うプロジェクト生成オプション
プロジェクト生成時に、リスト4の通り「--strict」オプションを指定すると、型チェックをより厳しく行う設定がプロジェクトに行われるようになりました。
ng new p002-strict --strict
p002-strictサンプルには、リスト5（1）〜（3）の通り、型チェックエラーになる実装を含んでいます。
// 会社名からスマートフォン名を取得
// ★vendorに型指定されていない ...（1）
getPhoneFromVendor(vendor) {
if (vendor === 'Apple') {
return 'iPhone12';
}
（略）
else if (vendor === 'Sony') {
return 'Xperia 5 II';
}
// ★値を返さないパスが存在（undefinedが返る） ...（2）
}
// ボタンクリック時の処理（vendorに会社名が入る）
onClickButton(vendor: string) {
// ★メソッド戻り値のうちundefinedはstringに代入できない ...（3）
this.phone = this.getPhoneFromVendor(vendor);
}
リスト5のコードを「ng build」コマンドでビルドすると、図3の通りエラーとなり、ビルドが完了しません。なお、リスト5とまったく同じコードを、「--strict」オプションを指定せずに生成したプロジェクト（p002a-not-strict）でビルドすると、エラーが表示されずにビルドが完了します。
