Nuxt製WEBアプリでFirestoreのServerTimeStampをyyyy年mm月dd日で表示する

NuxtアプリでFirestoreのServerTimeStampをyyyy年mm月dd日の形式で表示する

最近、チャットで受け付けた問い合わせの見落としや対応漏れが怖いということで、チャットBotを拡張して問い合わせを管理する簡単なシステムをnuxt.jsで開発しています。

その中で、今回、firestoreのserverTimeStampを利用したのですが、そのデータを日付として画面に表示するにはひと工夫必要だったのでその時との対応メモをここに残しておきたいと思います。

システム前提条件

• nuxt v2.15.8
• vue 2.6.14

システムでやること整理

• 【チャットBOT】：問い合わせを受け付け
• 【チャットBOT】：Firestoreにデータを格納
• 【nuxt製フロントエンドシステム】：問い合わせ内容を表示

上記のフロントエンドシステム内で、いつ受け付けたものか把握するために、createdDateというドキュメントフィールドを作成し、そのフィールドにはseverTimestamp()で作成したデータを格納することとしました。

↓が部分的ですがFirestoreに登録している部分です。

  try {
      const db = await getFirestore()
      await addDoc(collection(db, "requests"), {
      userID: accountId,
      content: messageText,
      status: false,
      createdDate: serverTimestamp()
    });
  } catch(e){
    console.log(e)
  }

FIrebase Server TimeStamp

登録に成功するとFirebaseの管理コンソール画面では下のようにしっかりと2022年3月3日という風に表示されます

Firebase管理コンソールでFirestoreを確認した結果

とし、これでviewでも同じように表示できるはず、、っと思っていましたがそれがどうもうまくいかないようでした。

こんな感じ

 {{ ticket.createdDate }}

serverTimeStampの表示が崩れる

これは何かしらの対応が必要なんだなと悟った瞬間でした。 サクッといかせてほしいのに。。

では、Search Consoleでデータも確認しておきましょう。

search consoleでの確認結果

ここは全然詳しくないんですが、nanosecondsとseconds があるらしい。

ただ、今回はそこを深ぼる必要はなさそうなので早速対応した方法を共有していきます。

今回はserverTimeStampをフィルターで加工して表示することとしました。

serverTimeStampをフィルターで加工して表示する手順

フィルター用のプラグインを作る

pluginsフォルダにdate-filter.jsを作成します。

※このファイル名はなんでもいいです。

ファイルは下記のようにします。 もしyyyy年mm月dd日のような表示をしたい方はこのままコピーして利用できると思うのでぜひ使ってください。

import Vue from 'vue'

const dateFilter = value => {
  return formatDate(value);
};

function formatDate(data) {
  const date = data.toDate()
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const formattedDate = `${year}年${month}月${day}日`;
  return formattedDate;
}

Vue.filter('date', dateFilter)

プラグインをnuxt.config.jsで読み込む

nuxt.config.jsでdata-filter.jsを読み込みます。

  plugins: [
    '@plugins/date-filter.js'
  ],

viewでフィルターとして利用する

ここまで設定すればあとはViewで利用するだけです。

 {{ ticket.createdDate | date }}

まとめ

今回はFiretoreに格納したservertimestampの処理方法についてメモしました。これ以外の方法もあると思うので、これ以外に何かいい方法がある方はSNSでも、このブログのコメントでも大丈夫なのでぜひご連絡ください。