Carpe Diem

備忘録

AngularのPipeでデータの表示形式を簡単に操作する

Angular

概要

元はunixtimeだったり、単純な数値データなものだったりを以下のようなフォーマットにしたいことは往々にしてあります。

  • 日付
  • 通過
  • パーセント
  • 大文字に統一

AngularではPipesという機能を使うことでテンプレート上で簡単に実現できます。

ビルトインPipe

あらかじめ用意されているPipeを使ってみます。今回はCurrencyPipeを使ってみます。

期待する挙動

説明 結果
元データ 1980
結果 ¥1,980

お金を表現する時はこのようにカンマを付けたり、¥マークを付けたりと地味に面倒ですが、AngularのCurrencyPipeを使うと、

<div>{{ money | currency:'JPY':'symbol' }}</div>
<div>{{ money | currency:'USD':'symbol' }}</div>
<div>{{ money | currency:'JPY':'' }}円</div>

と書くだけで

f:id:quoll00:20180729080833p:plain

このように色々表現できます。簡単ですね！
以下にStackBlitzでコードを用意しているので簡単に検証できます。

stackblitz.com

カスタムPipe

自分でPipeを作ることでテンプレートを柔軟に操作することができます。

例えば文字列に括弧（）を付けるPipeを作ってみます。
また引数で全角・半角を分けられるようにします。

コード

import { Pipe, PipeTransform } from '@angular/core';

/*
 * Usage:
 *   value | paren
 * Example:
 *   {{ 'foo' | paren }}
 *   formats to: '（foo）'
*/
@Pipe({
  name: 'paren'
})
export class ParenthesisPipe implements PipeTransform {
  transform(value: string, zenkaku: boolean = true): string {
    if (value === '') {
      return '';
    }
    if (zenkaku) {
      return '（' + value + '）';
    }
    return '(' + value + ')';
  }
}

こんな感じですね。全角オプションはデフォルトでtrueにしてみました。

テンプレート側は以下のように使います。

<div>{{ name | paren }}</div>
<div>{{ name | paren:false }}</div>

結果

f:id:quoll00:20180729082225p:plain

このようになります。ちゃんとオプションも使えて全角・半角がそれぞれ表現できてますね。

stackblitz.com

テストコード

テストコードは以下のように書きます。
transform()というメソッドを使います。もしテンプレートでなく、モデル内で使いたい時はこのメソッドを使います。

import { ParenthesisPipe } from './parenthesis.pipe';

describe('ParenthesisPipe', () => {
  let pipe: ParenthesisPipe;

  beforeEach(() => {
    pipe = new ParenthesisPipe();
  });

  it('should not append paren', () => {
    expect(pipe.transform('', false)).toBe('');
  });

  it('should append zenkaku paren', () => {
    expect(pipe.transform('foo', true)).toBe('（foo）');
  });

  it('should append paren', () => {
    expect(pipe.transform('foo', false)).toBe('(foo)');
  });
});

まとめ

AngularのPipeを使うことでテンプレートの表現が柔軟になりますし、べた書きが減ることで文言の統一もしやすく、変更したい〜となった時も簡単に済むので保守性も上がります。

ソース