CodeZine(コードジン)

特集ページ一覧

半年ごとに更新を重ねる「Angular」バージョン10・11の新機能をチェック

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回は2020年2月にリリースされたAngularのバージョン9を紹介しました。Angularはその後アップデートを重ね、2020年6月にバージョン10、11月にバージョン11がリリースされています。今回はAngularのバージョン10・11について、主要な変更点や新機能を紹介していきます。

目次

はじめに

 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の通り実行します。

[リスト1]プロジェクトのAngularをアップデートするコマンド
ng update @angular/cli @angular/core

 プロジェクトの内容によっては追加の手順が必要です。詳細は「Angular Update Guide」で案内されています。

Angular 10の新機能

 以下では、Angular 10で導入された主な新機能を紹介していきます。

Angular Materialの日付時刻範囲コントロール

 Angular用のUIコンポーネント「Angular Material」に、日付範囲を設定できるDate Range Pickerコントロールが追加されました。

図1:Date Range Pickerコントロールのサンプル(p001-datepicker)
図1:Date Range Pickerコントロールのサンプル(p001-datepicker)

 図1の通り表示するには、テンプレートHTMLにリスト2の通り記述します。

[リスト2]Date Range Pickerコントロールの記述(p001-datepicker/src/app/app.component.html)
<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の通り日本語で表示させることもできます。

図2:Date Range Pickerを日本語表示するサンプル(p001a-datepicker-ja)
図2:Date Range Pickerを日本語表示するサンプル(p001a-datepicker-ja)

 日本語表示を設定するモジュール定義ファイル(app.module.ts)はリスト3です。

[リスト3]Date Range Pickerを日本語で表示する設定(p001a-datepicker-ja/src/app/app.module.ts)
@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」オプションを指定すると、型チェックをより厳しく行う設定がプロジェクトに行われるようになりました。

[リスト4]型チェックを厳しく行うプロジェクトを生成するコマンド(p002-strict)
ng new p002-strict --strict

 p002-strictサンプルには、リスト5(1)〜(3)の通り、型チェックエラーになる実装を含んでいます。

[リスト5]型チェックエラーになる実装(p002-strict/src/app/app.component.ts)
// 会社名からスマートフォン名を取得
// ★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)でビルドすると、エラーが表示されずにビルドが完了します。

図3:リスト5のビルド時に発生する型チェックエラー(p002-strict)
図3:リスト5のビルド時に発生する型チェックエラー(p002-strict)

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

バックナンバー

連載:次世代Webアプリケーションフレームワーク「Angular」の活用

もっと読む

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5