CodeZine(コードジン)

特集ページ一覧

「Angular」の変数を見やすい形式に変換して表示できるPipesの活用法

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

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

Angularの組み込みPipes

 Angularは、利用頻度の高い表1のような変換処理を、組み込み(Buillt-in)Pipesとして提供しています。Angularが提供するすべての組み込みPipesは、APIリファレンスで確認できます。

表1 Angularの主な組み込みPipes
Pipesのクラス名 テンプレートに記述する名前 機能
UpperCasePipe uppercate アルファベットを大文字に変換
LowerCasePipe lowercate アルファベットを小文字に変換
DatePipe date 日時(Dateオブジェクト)を変換
DecimalPipe number 数値を変換
CurrencyPipe currency 数値を金額に変換
PercentPipe percent 数値をパーセント表示に変換

 ここからは、いくつかの組み込みPipesについて利用法を説明していきます。

日時を変換するDatePipe

 DatePipeは、JavaScriptのDateオブジェクトを変換するPipesです。図2のサンプルで記述方法を説明します。

図2 PipesでDateオブジェクトを変換して表示(002-date)
図2 PipesでDateオブジェクトを変換して表示(002-date)

 このサンプルのルートコンポーネントはリスト2です。

リスト2 DatePipeの記述(002-date/src/app/app.component.ts)
@Component({
  selector: "my-app",
  template: `
    <h1>Angular サンプル2</h1>
    <div>変換前:{{sampleValue}}</div>
    <div>変換後1:{{sampleValue | date}}</div>                  <!--(1)-->
    <div>変換後2:{{sampleValue | date:"yyyy年MM月dd日"}}</div> <!--(2)-->
    <div>変換後3:{{sampleValue | date:"HH時mm分ss秒"}}</div>   <!--(3)-->
    <div>変換後4:{{sampleValue | date:"shortTime"}}</div>      <!--(4)-->
  `
})
export class AppComponent {
  // 2017年5月6日 13時25分32秒 ...(5)
  sampleValue:Date = new Date(2017,4,6,13,25,32);
}

 画面に表示するのは(5)のDateオブジェクトsampleValueです。(1)の「| date」記述で、sampleValueがDatePipeの標準形式(この場合は「May 6, 2017」)で画面表示されます。

 Pipesには「:」の後ろにパラメーターを指定できるものがあります。DatePipeの場合、(2)や(3)のように日時のフォーマットを直接指定したり、(4)のように、DatePipeで定義されているフォーマット名を指定したりできます。フォーマット名の例を表2に示します。

表2 DatePipeのフォーマット名
名前 表示例
shortTime 1:25 PM
mediumTime 1:25:32 PM
shortDate 5/6/2017
fullDate Friday, May 6, 2017

 フォーマット指定方法の詳細は、DatePipeのAPIリファレンスを参照してください。

[補足]DatePipeの注意点

 現状では、以下のようなDatePipeの挙動に注意が必要です。

(1)ECMAScript Internationalization APIサポートとMicrosoftのブラウザー

 DatePipe(とDecimalPipe、CurrencyPipe、PercentPipe)は、内部的にJavaScriptの国際化API「ECMAScript Internationalization API」を利用しているため、このAPIをサポートしないブラウザー(Chrome、Firefox、Edge、IE11、Safari 10以外のブラウザー)では、index.htmlにリスト3の記述を加えて、互換ライブラリを読み込む必要があります。

リスト3 ECMAScript Internationalization APIの互換ライブラリ
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>

 ただし、Microsoft EdgeとIE11では、リスト2(3)で指定している時分秒のフォーマットが図3のように表示されてしまいます。リスト3の記述を追加しても解消されません。

図3 Microsoft Edgeでの日時表示(002-date)
図3 Microsoft Edgeでの日時表示(002-date)
(2)Webページのロケールとフォーマット文字列

 リスト2の(1)(4)では、英語の形式で日時が表示されます。これはWebページのロケールが英語に設定されているためで、app.modules.tsにリスト4のProviderを指定してロケールを切り替えると、日本語の形式で日時が表示されるようになります。

リスト4 ロケールを日本語に設定する記述(002a-datejp/src/app/app.module.ts)
@NgModule({
(略)
  providers: [{provide: LOCALE_ID, useValue: 'ja-JP'}]
})

 ただし日本語ロケールでは、例えばリスト2(2)の「yyyy」が「2017年」、「dd」が「06日」のように、「年」や「日」を含んだ文字列に置換されるため、フォーマット文字列を調整しないと図4のような正しくない表示になります。

図4 日本語ロケールでの日時表示(002a-datejp)
図4 日本語ロケールでの日時表示(002a-datejp)

数値を変換するDecimalPipe

 DecimalPipeは、数値の表示形式を変換するPipesです。数値を変換表示する図5のサンプルで利用方法を説明します。

図5 DecimalPipeで数値を変換(003-number)
図5 DecimalPipeで数値を変換(003-number)

 このサンプルのルートコンポーネントはリスト5です。

リスト5 DecimalPipeの記述(003-number/src/app/app.component.ts)
@Component({
  selector: "my-app",
  template: `
    <h1>Angular サンプル3</h1>
    <div>変換前:{{sampleValue}}</div>
    <div>変換後1:{{sampleValue | number}}</div>         <!--(1)-->
    <div>変換後2:{{sampleValue | number:"5.1-2"}}</div> <!--(2)-->
  `
})
export class AppComponent {
  // 表示する数値 ...(3)
  sampleValue:number = 1234.56789;
}

 画面に表示するのは(3)のsampleValueです。(1)の「| number」記述により、sampleValueの値がDecimalPipeのデフォルト形式(整数部は3桁ごとにカンマ区切り、小数点以下3位まで)で表示されます。

 (2)では「:」の後ろにパラメーターを追加して、表示形式を調整しています。パラメーターの「5.1-2」は、表3の意味を持ちます。

表3 DecimalPipeのパラメーター「5.1-2」の意味
数字 意味
5 整数部の最小桁数(足りない分はゼロ詰め)
1 少数部の最小桁数(足りない分はゼロ詰め)
2 少数部の最大桁数(超過分は四捨五入)

 この場合、整数部が5桁になるようにゼロ詰めされ、少数部は最大桁数(2桁)を超過した分が四捨五入されるので、「01,234.57」のような表示になります。

[補足]Pipesのパラメーターをコンポーネントのプロパティで設定

 ここまでのサンプルでは、「:」の後ろに設定するPipesのパラメーターに直接値を設定しましたが、コンポーネントのプロパティで設定することもできます。例えばリスト6の場合、formatプロパティに設定された文字列がPipesのパラメーターになります。

リスト6 コンポーネントのプロパティでPipesのパラメーターを設定(003a-param/src/app/app.component.ts)
{{sampleValue | number:format}}
(略)
export class AppComponent {
  // Pipesのパラメーターに設定される
  format:string = "5.1-2";
}

  • 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-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5