【Angular】パイプ一覧

少し前、実務で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人だけ「いいね」がされています。 // １の場合
3人だけ「いいね」がされています。 // ３の場合

■ 構文

num: | i18nPlural: map

引数のmapには「 '=数値'： 対応するメッセージ 」というハッシュ形式で記載し、numに応じてメッセージが表示されます。0、1の場合は「=0」、「=1」となりそれ以上の数値を表現するためにはotherを使用します。 またメッセージに元の数値を含めたい場合は、「 # 」を利用します。

パイプにメゾットを登録して何らかの処理を行う

メゾットを使用して何らかの処理を行いたい場合は、引数で値を渡してやるようにします。

<p>{{ actor(value.names) }}</p>

pipeFormat(names:any): any {
    return //ここに処理を記載する。
  }

以上となります、ここまで読んでくださり、ありがとうございました。

■ 参考文献