Webアプリ等の制作の際、大活躍してくれるプラットフォーム、Cloud Firestore。
Firestore には Timestamp クラスというものが用意されていまして、
柔軟に日時に関する情報を取得して扱うことができます。

たとえば、以前書いた以下の記事のように、startAt() と endAt() を使用して、
「開始の日時 〜 期限の日時」
にあてはまるフィールドを持つ情報を取得したりすることができます。

今日は、そんな Firestore の Timestamp クラスの
いろいろなメソッドの中のひとつ、
「その瞬間の日時を取得してきて、それを整形する方法」
について、書いていきたいと思います。

※なお、この例では、 Vue.js と Firestore を組み合わせて使用している想定で書きます。
他のフロントエンドフレームワークを使用している場合は適宜、置き換えてください。

コードをご紹介

const myTimestamp = firebase.firestore.Timestamp.now();
const myToDated = myTimestamp.toDate();

上のセクションで書いた
「その瞬間の時間を取得してきて、それを整形する方法」ですが、
例えば、上記のような形になります。
※そもそも firestore をどうやって使うのとか、firebase が何者なのかとか、そういう部分については
全く別の話題になるので、この記事では割愛します。

firebase.firestore.Timestamp.now()
を使用、
変数 myTimestamp に
firestoreから取得したその瞬間の時間の情報がミリ秒で格納されることになります。

firebase.firestore.Timestamp.now(); についてはFirestore公式の以下ページに解説があります。
Static now — Timestamp | JavaScript SDK | Firebase

それを、
toDate()
を使用して、javascriptで扱いやすいよう、Date型に変換しているというわけです。

toDate(); についてのFirestore公式の解説は、以下になります。
toDate — Timestamp | JavaScript SDK | Firebase

実際の制作のケースでは、取得した日時に関する情報を
なんらかの方法で整形して、
それをいろいろな形で利用する事が考えられると思います。
（例えば、投稿の時間を記録するフィールドの値として
利用したり。いろいろなケースが考えられそうです）

次のセクションでは、その
「なんらかの方法で整形する」
の部分について、書いていきます。

使いやすい形に整形する

上のセクションで書いたように、単純に
firebase.firestore.Timestamp.now()
で取得したばかりの値はミリ秒で返ってきます。
(※厳密には、返ってくる、というか
「ミリ秒の精度で、現在の日付で新しいタイムスタンプを作成」
していると、firebase.firestore.Timestamp.now() の公式リファレンスページには記載がありました。
リンク先の、Creates a new timestamp with the current date, with millisecond precision.
の部分です。)

toDate()
でDate型に変換したデータも、そのままだと
Mon May 31 2021 18:15:50 GMT+0900 (日本標準時)
のような値が返ってきます。
これだと、想定している用途によっては、
少し使いづらいかと思います。

ということで続いては、それを扱いやすくするために
値を整形、フォーマットする方法について書いていきたいと思います。

Date型のオブジェクトを扱うのが得意なライブラリを使ってみる

こういったDate型の値の整形、フォーマットには、
時間制御系のライブラリを使用するケースが多いかと思います。

少し前までは、
Moment.js
というライブラリが有名だったかと思うのですが、このライブラリは実際に使ってみると
とても容量が大きく、Webアプリに含めるような形でバンドルすると、
重くなる事でも知られています（というか、実際なりました）。

そして現在では、 Moment.js の開発元自体が
後継ライブラリの使用を勧めているそうでして、

今回は推奨されている4つの後継ライブラリの中から
date-fns
というライブラリを使用して、時間情報のフォーマットをしてみたいと思います。

ちなみに、推奨されている4つの後継のライブラリについては、
Moment.js 公式サイトの
以下のページに記載があります。（Recommendations の項を参照）
Moment.js | Docs

date-fns の使い方

では、date-fns の使い方についてです。

npm install date-fns

↑まずは、普通に date-fns をインストールします。

<script>
import { format } from 'date-fns'
...(中略)

↑date-fns から、使用する機能「だけ」をインポートします。
今回は整形、フォーマットをしたいだけなので、
文字通り format を import します。
この、使用する機能「だけ」を取り出せる点が、
date-fns に対して好感が持てた理由のひとつです。

あとは、使用したい形式に応じて、フォーマットを行います。

 const myShaped = format(todated, 'yyyyMMddHHmmss');

これで、myShaped には、次のような値が入ることになります。
20210531181550
↑この形なら( yyyyMMddHHmmss のフォーマットなら)
後々ソートすることなども比較的簡単にできそうですし、
目的に応じて使いやすそうな形になったかと思います。

Timestampクラスについての、Firestore公式ページなど

TimestampクラスについてのFirestore公式ページは以下になります。
今回の記事の冒頭でご紹介した firebase.firestore.Timestamp.now() と
toDate() の他にも、日時に関する値を取得するいろいろなメソッドがあることが確認できます。
Timestamp | JavaScript SDK | Firebase

date-fns公式ページなど

Moment.js の後継として推奨されている4つのライブラリのうちのひとつ、
date-fns
の公式サイトは以下になります。
今回ご紹介したような形でのフォーマットの他にも、こちらの公式サイトを見ると、いろいろできる事がわかります。
date-fns - modern JavaScript date utility library

この記事のまとめ

今回は、Firestore から Timestamp() を使用して日時の情報を取得、
それを date-fns を使用して
使いやすくフォーマットする方法について、ご紹介しました。

Webアプリ等の制作において大活躍してくれる Cloud Firestore 。
また何か面白い制作例やTipsを思いついたら、随時記事を書いていきたいと思っています。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。