目次：Webアプリ開発ロードマップ

第5回：ニュースフィードの日付フォーマットを変換する(パイプ)

今回はパイプというものを使ってニュースフィードに表示される日時を好みのフォーマットに変換します。

ニュースフィードの日付を変換する

パイプとは

「|」のことをパイプと呼びます。
左のプログラムの結果を右のプラグラムに渡す役割です。
コマンドラインで使われるパイプと同じ意味合いになります。

$ ls | grep *.ts

パイプを作成する

下記のコマンドを実行し、パイプを作成します。

$ ng g pipe pipes/date-to-string
CREATE src/app/pipes/date-to-string.pipe.spec.ts (213 bytes)
CREATE src/app/pipes/date-to-string.pipe.ts (229 bytes)
UPDATE src/app/app.module.ts (836 bytes)

モジュールの変更を確認する

app.module.tsに下記の修正が行われていることを確認します。
これにより作成したパイプとアプリが紐づけられています。

・・・
import { DateToStringPipe } from './pipes/date-to-string.pipe';
・・・
  declarations: [
・・・
    DateToStringPipe,
  ],
・・・

パイプの記載内容について

作成されたdate-to-string.pipe.tsを確認します。
@Pipeのnameに記載されている名前がhtmlに記載するときの名称になります。
transformメソッドは、パイプの左からもらった値をパラメータとして取得し、
戻り値で返した値が画面に表示されます。

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

@Pipe({
  name: 'dateToString'
})
export class DateToStringPipe implements PipeTransform {

  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }

}

コンポーネントから呼び出してみる

コンポーネントから呼び出してみます。
newsfeeds.component.htmlを下記の通り修正してください。
パイプ"|"の左から右に値が渡され、右のdateToStringの処理結果が表示されると思ってください。

    <p class="createdAt">{{newsfeed.createdAt | dateToString}}</p>

まだパイプの処理を何もカスタマイズしていないため、dateToStringは何も値を返しません。
そのためニュースフィードの日時は何も表示されなくなります。

パイプの処理をカスタマイズする

パイプの処理をカスタマイズしてみます。
date-to-string.pipe.tsの処理を下記の通り修正します。

export class DateToStringPipe implements PipeTransform {

  transform(date: Date): string {
      return date.toLocaleString();
  }

パイプの使い方をわかりやすくするため、
transform()メソッドのパラメータをvalue: unknownからdate: Dateに、
戻り値の型をuknownからstringに変更しています。
dateはパラメータの変数名、Dateはパラメータの型です。

これで元どおり日時がニュースフィードに表示されるようになりました。

課題

このままでは面白くないので、transform()をカスタマイズし、下記の仕様の動作になるよう修正してみましょう。

最後に

今回はパイプを学びました。次回はバックエンドの作成に入っていきます。
今回開発したソースコードはGitHubに入っています。