第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()をカスタマイズし、下記の仕様の動作になるよう修正してみましょう。
| (現在日時 - date)の値が | 動作 |
|---|---|
| 10分未満のとき | "たった今"を表示 |
| 1時間未満のとき | "x分前"を表示 |
| 1日未満のとき | "x時間前"を表示 |
| 1日以上のとき | "x日前"を表示 |
最後に
今回はパイプを学びました。次回はバックエンドの作成に入っていきます。
今回開発したソースコードはGitHubに入っています。