Angular2には文字列を簡単に操作できる「Pipe（パイプ）」という機能があります。
この機能を使うことで、ものすごく実装効率が上がります。
今日はPipeについて紹介します。
Pipe
Pipeはテンプレート内での、文字列操作の仕組みです。
静的サイトジェネレータのJekyllなどを触ったことがある人はわかるかもしれませんが、
Liquid構文のパイプとほぼ同じです。
{{ }} で出力する値を | パイプで区切って、
右側に関数（以下、オペレーター）を指定します。
{{ birthday | date }} // value | operator
Pipeのメリットは、上記の birthday を整形するための処理を、アプリケーション全体で共有できるわけですね。
出力する文字を整形するためのコードは書かなくて済むので、コードを簡潔に保つことができるんです。
使い方
例えば、Dateオブジェクトをあるフォーマットで整形して表示する、といったことができます。
実際に見てみましょう。
コンポーネントで定義しておいた値をテンプレートに渡します。
let birthday = new Date(1985,3,1); // April 1, 1985
<p>ぼくの誕生日ですか？そんなの聞いて面白いですか？まぁ、 {{ birthday | date:"yy/MM/dd" }} ですけどね。プレゼント忘れないでね。</p>
すると、表示は以下のようになります。
<p>ぼくの誕生日ですか？そんなの聞いて面白いですか？まぁ、 1985/04/01 ですけどね。プレゼント忘れないでね。</p>
Pipeの種類
Angular2では最初から複数のPipeが用意されています。
- DatePipe
例で紹介した、日付を整形するためのパイプ。パラメータがたくさんあるので、一度目を通したほうがいいです。
・DatePipe - UpperCasePipe
文字列を大文字にする。 - LowerCasePipe
文字列を小文字にする。 - JsonPipe
入力値にJSON.stringfyを実行して返す。主にデバッグ用。
などなど。
詳しくは公式ドキュメントを参照してください。
オプションの指定
Pipeにはオプションの指定が可能です。
{{ birthday | date:"yy/MM/dd" }}
Pipeオペレーターの後ろに date:format のように、コロンとオプション値を指定します。
上記の誕生日の出力では、date:"yy/MM/dd/" と指定し、年月日をスラッシュ区切りで整形します。
また、複数のオプションを指定するには、slice:1:5 という書式でコロンを続けます。
他にもカスタムPipeを定義できる
独自のPipeを作成できます。
カスタムPipeについては、Angular2でカスタムPipeを定義するを参照してください。
参考
