普段はフロントエンドエンジニアとしてJavaScript/TypeScript/Aangular/GraphQLを
メインに開発業務を行なっています。
少し前、実務でAngularのパイプ構文を使用してテンプレートのデータを加工する機会があったので、備忘録的な意味をこめて記事にしていきたいと思います。
Angularにおけるパイプは標準で装備されており、テンプレートに表示されているデータを加工することが出来ます。
例えば下記の通りテンプレートに記載した場合、変数priceに対してcurrencyパイプが適用され、変数priceに格納された数値がJPYの通貨コード「¥」付きの文字列となります。「 | 」を記載する事によりパイプを適用させます。
<h2>{{ price | currency: 'JPY' }}</h2>
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-data', templateUrl: './data.component.html', styleUrls: ['./data.component.scss'] }) export class DataComponent implements OnInit { public readonly price: number = 1750; }
■ 表示結果
¥1,750
公式ドキュメントにもパイプに関する内容が記載されてます。(日本語ドキュメンテーションとなっていますが、何故か英語です。)
一読すると、パイプの仕組みについてより理解が深まると思います。
数値以外にも、大文字&小文字に変換、日付を整形、パーセンテージ表示など様々な方法があり一つ一つ見ていきたいと思います。
大文字/小文字の変換
データを大文字小文字に変換する場合は、UpperCasePipe と LowerCasePipeを使用します。
<p>{{ data | uppercase }}</p> <p>{{ data | lowercase }}</p>
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-data', templateUrl: './data.component.html', styleUrls: ['./data.component.scss'] }) export class DataComponent implements OnInit { public readonly data: string = "Test Booking"; }
■ 出力結果
TEST BOOKING // 大文字 test booking // 小文字
オブジェクトをJSON形式に変換する
オブジェクトをJSON文字列に変換する場合は、JsonPipeを使用します。
<p>{{ data | json }}</p>
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-data', templateUrl: './data.component.html', styleUrls: ['./data.component.scss'] }) export class DataComponent implements OnInit { public readonly data: {[ket: string]: string} = { username: "user" password: "password" } }
■ 表示結果
{ username: "user", password: "password" }
この状態でJsonパイプを使用しなかった場合、画面上では[ Object Object ]と表示されてしまいます。またJsonパイプはプロパティの値がメゾットやundefinedであった場合、無視するため注意が必要です。
日付や時刻を整形する
DatePipeを使用することで、日付や時刻を指定したフォーマットに整形することができます。Dateパイプの場合、デフォルトでは年月日で整形されますが、「 : 」で繋げることでフォーマットを指定することができます。
■ 構文
datatime | date[ :format ] // datatime: 任意の日付、時刻 // format: 整形したい書式
<p>{{ birthday | date }}</p> <p>{{ birthday | date:"medium" }}</p> <p>{{ birthday | date:"MM/dd/yy" }}</p>
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-data', templateUrl: './data.component.html', styleUrls: ['./data.component.scss'] }) export class DataComponent implements OnInit { public readonly birthday: Date = new Date(); }
■ 表示結果
2022年2月26日 // デフォルトの日付 2022年2月26日 14:00:24 // mediumを指定した場合の日付 02月26日2022年 // MM/dd/yy
数値をパーセント形式に変換する
数値をパーセント形式に変換してくれるPercentPipeもあります。数字を100で除算した結果を整形して、「%」を表示してくれます。
<p>{{ data | percent }}</p>
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-data', templateUrl: './data.component.html', styleUrls: ['./data.component.scss'] }) export class DataComponent implements OnInit { public readonly data: number = 60; }
■ 表示結果
60%
数字によって表示文字列を変化させる
渡される数字によって文字列を変化させるようにする場合は、i18nPluralPipeを使用します。単数形か複数形によって、表示を切り替えることができます。
例えば、表示件数によって、「いいね」の表示を変更させたいと思います。
<p>{{ names.length | i18nPlural: message }}</p>
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-data', templateUrl: './data.component.html', styleUrls: ['./data.component.scss'] }) export class DataComponent implements OnInit { names: stirng[] = ['田中', '高橋', '佐藤']; massage: {[ket: string]: string} = { '=0': '「いいね」がされていません。', '=1': '1人だけ「いいね」がされています。', 'other': '#人だけ「いいね」がされています。', }; }
■ 表示結果
「いいね」がされていません。 // 0の場合 1人だけ「いいね」がされています。 // 1の場合 3人だけ「いいね」がされています。 // 3の場合
■ 構文
num: | i18nPlural: map
引数のmapには「 '=数値': 対応するメッセージ 」というハッシュ形式で記載し、numに応じてメッセージが表示されます。0、1の場合は「=0」、「=1」となりそれ以上の数値を表現するためにはotherを使用します。 またメッセージに元の数値を含めたい場合は、「 # 」を利用します。
パイプにメゾットを登録して何らかの処理を行う
メゾットを使用して何らかの処理を行いたい場合は、引数で値を渡してやるようにします。
<p>{{ actor(value.names) }}</p>
pipeFormat(names:any): any { return //ここに処理を記載する。 }
以上となります、ここまで読んでくださり、ありがとうございました。
■ 参考文献