Jump to the content

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

Angular2

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

    参考

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×