CodeZine(コードジン)

特集ページ一覧

「Angular」の進化は止まらない――この1年で追加されたバージョン12・13の新機能は?

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

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

 本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回紹介したバージョン10・11に引き続き、今回は2021年5月リリースのバージョン12と11月リリースのバージョン13について、変更点や新機能を紹介していきます。

目次

はじめに

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

 2020年12月の前回記事ではバージョン10・11の変更点や新機能を紹介しましたが、それから約1年を経過した現在、Angularは2021年5月にバージョン12、11月にバージョン13と、順当にバージョンアップを重ねました。本記事では、Angularのバージョン12および13(以下「Angular 12」「Angular 13」と記述)について、主要な変更点や新機能を説明していきます。

対象読者

  • Angularの最新動向を定期的にチェックしておきたい方
  • 既存のAngularソースコードを最新版に追従する必要がある方
  • より便利にAngularを活用したい方

必要な環境

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

 今回は以下の環境で動作を確認しています。基本的にはAngular 13を利用しますが、比較のため一部のサンプルでAngular 12、11を利用しています。

  • Windows 10 64bit版
  • Angular 13.2.5、12.2.16、11.1.2
  • Angular CLI 13.2.5、12.2.16、11.1.2
  • Node.js v16.14.0
  • Microsoft Edge 99.0.1150.36

 サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「ng serve」コマンドを実行して、「https://localhost:4200」をWebブラウザで表示します。

実装時に便利なAngular 12の新機能

 以下では、Angular 12で導入された新機能のうち、実装時に役立つものや、開発者の対応が必要となるものを中心に説明していきます。

国際化IDの移行ツール

 Angularには国際化(internationalization、i18n)機能があります。図1のサンプルは、「ng serve」で実行すると英語で表示しますが、「ng serve --configuration=ja」とオプションを指定して実行すると、国際化機能により日本語で表示されます。国際化機能を利用する方法の詳細は、サンプルコードのREADME.mdを参照してください。

図1 国際化対応したAngularのサンプル(p001-i18n)
図1 国際化対応したAngularのサンプル(p001-i18n)

 日本語のリソースは、プロジェクト内のmessages.ja.xlfに、リスト1の通り定義されています。<trans-unit>要素のid属性に対応して、<source>要素内に文言が記述されます。

[リスト1]図1のサンプルの日本語リソースファイル(p001-i18n/messages.ja.xlf)
<trans-unit id="50a73c21c896237d8bccf25fad9cb416bbcb6764" datatype="html">
  <source>国際化サンプル</source>
(略)
</trans-unit>

 Angular 10以前ではこのIDの形式に不具合があり、Angular 11以降で新規に生成されたプロジェクトではIDの形式が変更されました。Angular 12では、このIDを旧型式から新形式に変換する手段が提供されました。まずリスト2のコマンドを実行して、新旧国際化IDの対応付けが記述されたmessages.jsonファイルを生成します。

[リスト2]新旧国際化IDの対応付けを抽出するコマンド
ng extract-i18n --format=legacy-migrate

 messages.jsonファイルを引数に指定してリスト3のコマンドを実行すると、リソースファイルのID(リスト1のid属性)を新形式に変換します。

[リスト3]国際化IDを変換するコマンド
npx localize-migrate --files=*.xlf --mapFile=messages.json

 最後に、tsconfig.jsonの「enableI18nLegacyMessageIdFormat」をfalseにして、旧型式のID利用を無効にします。

[リスト4]国際化IDの形式の指定(p001a-i18n-migration/tsconfig.json)
"angularCompilerOptions": {
  // "enableI18nLegacyMessageIdFormat": true, // 古い形式のメッセージIDを利用
  "enableI18nLegacyMessageIdFormat": false,
(略)
}

テンプレートでのNull合体演算子

 Null合体演算子(&&)は、「a && b」としたときに、aがnull以外ならばa、nullならばbを返却する演算子です。この演算子はもともとTypeScriptファイル(*.ts)内で利用できましたが、Angular 12では新たにテンプレートファイル(*.html)内でも利用できるようになりました。

 この例を、図2のサンプルで説明します。テキストボックスに入力した文字列をそのまま(空文字の場合も含めて)画面に表示しますが、ボタンを押して名前をnullにしたときは「【名前はnullです】」と表示されます。

図2 テンプレートでNull合体演算子を利用するサンプル(p002-nullish-coalescing)
図2 テンプレートでNull合体演算子を利用するサンプル(p002-nullish-coalescing)

 このサンプルのテンプレートはリスト5の通りです。Null合体演算子により、名前の変数yourNameがnullの時に「【名前はnullです】」が表示されるよう記述されています。

[リスト5]テンプレートでのNull合体演算子の利用(p002-nullish-coalescing/src/app/app.component.html)
<div>あなたの名前は: {{ yourName ?? '【名前はnullです】' }}</div>

インラインSassのサポート

 Sassは、変換してCSSを生成する、いわゆるAltCSSです。これまではSassの利用が外部スタイルファイル(*.scss)に限られていましたが、Angular 12でコンポーネント内に直接Sassを記述できるようになりました。図3のサンプルで説明します。

図3 インラインSassのサンプル(p003-inline-sass)
図3 インラインSassのサンプル(p003-inline-sass)

 図3のサンプルのコンポーネントファイル(app.component.ts)には、リスト6の通り、styles属性にSass(scss)形式でスタイルが直接記述されています。Sassでは階層構造を指定でき、ここではparentクラスが適用された<div>タグ配下に、childクラスが適用された<div>タグがある場合、文字色を赤くする指定を行っています。

[リスト6]図3のサンプルのコンポーネント(p003-inline-sass/src/app/app.component.ts)
@Component({
(略)
  styles: [`
    div.parent {
      div.child {
        color: red;
      }
    }
  `]
})
(以下略)

 対応するテンプレートはリスト7の通りです。リスト5のSass指定により、(1)にはスタイルが適用されて文字色が赤くなります。同じchildクラスが適用されていても、上位<div>タグのクラスが異なる(2)にはスタイルが適用されません。

[リスト7]図3のサンプルのテンプレート(p003-inline-sass/src/app/app.component.html)
<div class="parent">
  <div class="child">
    スタイルが適用されて赤色になる <!--(1)-->
  </div>
</div>
<div class="other-parent">
  <div class="child">
    スタイルが適用されず、赤くならない <!--(2)-->
  </div>
</div>

CSSフレームワークTailwind CSSのサポート

 Angular 11.2以降では、CSSフレームワークのTailwind CSSをサポートしました。図4はTailwind CSSの利用例です。

図4 Tailwind CSSを利用するサンプル(p004-tailwind)
図4 Tailwind CSSを利用するサンプル(p004-tailwind)

 図4のテンプレートはリスト8の通りです。(1)は<h1>タグですが、Tailwind CSSによってスタイルが削除されます。また(2)では「ml-5」で左マージンが、「text-red-500」でテキスト色が設定されます。

[リスト8]Tailwind CSSの記述例(p004-tailwind/src/app/app.component.html)
<h1>Tailwind CSSサポート(※h1タグの書式が削除)</h1><!--(1)-->
<div class="ml-5 text-red-500"><!--(2)-->
  左マージンが5(=1.25rem)、赤色(R239,G68,B68)
</div>

 AngularでTailwind CSSを利用するには、「npm install tailwindcss」でインストール後、設定ファイルtailwind.config.jsを配置し、CSSファイル(style.css)でTailwind CSSを参照します。詳細はサンプルコードのREADME.mdを参照してください。

Angular CDK/MaterialのSassモジュールシステムと「@use」対応

 Angular CDK/Angular Materialが、Sassの新しいモジュールシステムに対応しました。この変更を、Angular Materialのテーマを変更する、図5のサンプルで説明します。左のボタンが「primary」、右のボタンが「accent」の色で指定されています。

図5 Angular Materialのテーマを変更するサンプル(p005-material-use、p006-material-include)
図5 Angular Materialのテーマを変更するサンプル(p005-material-use、p006-material-include)

 Angular Materialのスタイルを変更するには、Angular 12ではstyles.scssファイルにリスト9の通り記述します。(1)の@useでAngular Materialからスタイルを「mat」としてインポートし、「mat.core()」でベーススタイルを設定します。(2)でprimary、accentのカラーパレットを設定し、それらより(3)でテーマを$my-themeとして生成します。生成したテーマは(4)でコンポーネント共通テーマとボタンテーマに設定します。

[リスト9]Angular 12におけるAngular Materialのテーマ設定(p005-material-use/src/styles.scss)
// ベーススタイルをインポート・設定 ...(1)
@use '@angular/material' as mat;
@include mat.core();
// primary, accentに対応するパレットを設定 ...(2)
$my-primary: mat.define-palette(mat.$pink-palette);
$my-accent: mat.define-palette(mat.$blue-palette);
// パレットからテーマを生成 ...(3)
$my-theme: mat.define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent
 )
));
// 生成したテーマをコンポーネント共通テーマ、ボタンテーマに設定 ...(4)
@include mat.core-theme($my-theme);
@include mat.button-theme($my-theme);

 同様の設定を、Angular 11ではリスト10の通り記述していました。(1)の@importは古い記述で、Angular 12ではリスト9(1)の@useに置き換えられます。

[リスト10]Angular 11におけるAngular Materialのテーマ設定(p006-material-include/src/styles.scss)
// ベーススタイルをインポート・設定 ...(1)
@import '~@angular/material/theming';
@include mat-core();
// primary, accentに対応するパレットを設定 ...(2)
$my-primary: mat-palette($mat-pink);
$my-accent: mat-palette($mat-blue);
// パレットからテーマを生成 ...(3)
$my-theme: mat-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent
 )
));
// 生成したテーマを設定 ...(4)
@include angular-material-theme($my-theme);

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

バックナンバー

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

もっと読む

著者プロフィール

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

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

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

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

あなたにオススメ

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