【Angular/Firebase】Timestamp型の日付を日本語表記にする【Pipe(パイプ)使用】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
背景
UdemyのAngular講座でまたやられました・・・
Timestampクラスがfirebaseでデフォルトになっているのに、、、その説明ないですよ・・・
仕方ないので自力で解決しました。
基礎できていない、ドキュメントしっかり読み込めていない私が無理やり解決した内容なので、あまり参考にしない方が良いかもしれませんmm
(エラー出てるのに動いてます泣)
Timestamp型の日付を日本語表記にする
前提条件
今回はFirestoreにTimestamp型のデータが既に保存されていることとします。
そして、そのデータを*ngForで回して表示させようとした時に、日付が上手く表示できない状況とします。
また、パイプを使用して日付を日本語表記にしていきます。
FirestoreのDateオブジェクトについて
FirestoreのフィールドにDateオブジェクトを渡すと、取得時にはTimestampクラスで日付データを返します。
私には今までにない経験だったので手間取りました・・・
詳細は下記のリンクを参照してください。
FirestoreのTimestampクラスの使い方 – FRENPS Tech
Firestore の Timestamp の仕様変更による警告と、その対処 - Qiita
解決方法
Timestampクラスで返ってくる日付データをDate型に変換しました。
あとは通常通りdate-fnsのformatを使って日本語表記に変換しました。
app.component.html
<small class="media-date">{{ comment.date | commentDate }}</small>
firestoreからの日付データをパイプに渡します。
date.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { format } from 'date-fns';
import { ja } from 'date-fns/locale';
@Pipe({
name: 'commentDate'
})
export class CommentDatePipe implements PipeTransform {
transform(timestamp: number): string {
// console.log(timestamp);
const date = timestamp.toDate();
// console.log(date);
return format(date, 'yyyy年MM月dd日 H:mm', { locale: ja });
}
}
受け取った日付データをコンソールログで確認すると、Timestampクラスが確認できます。
そのデータをtoDateメソッドでDate型に変換します。
※toDateメソッドでエラーが発生するかもしれませんが使えます。
プロパティ 'toDate' は型 'number' に存在しません。
あとはformatで日本語表記に変換するだけです。
今後に向けて
これでおかしくないはずなのですがエラーが出ててる。。。
それに他の人の記事ともやりかたが違う。。。
基礎ができていないのが原因だと思うので、時間がある時に再度ちゃんと調べてみようと思います。
参考
素晴らしい記事に感謝いたします。
