Angular2のPipeで文字列を操作する

Angular2のPipeで文字列を操作する

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を定義するを参照してください。

参考

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.