こんにちは。
本日はReactで簡単に日時を取り扱うことができるMoment.jsの紹介です。
ブログ開発を通して、日時の取り扱いについて考えていきたいと思います。

Moment.jsは以下のように使用が非奨励となりました。今後はアップデートがなされない場合があるので、代替ライブラリを使用してください。
https://momentjs.com/docs/
この記事は記録のために消去せずに残しておきますが、決して参考にはしないでください。

はじめに


Moment.jsはファイルのサイズが大きく、肥大化がおきるという批判があるそうです。JavaScriptで日時を取り扱うライブラリは以下のようなものがありますが、以下を参考に選定を行うと良いと思います。

  • date-fns
  • dayjs
  • luxon
  • moment

https://www.npmtrends.com/date-fns-vs-dayjs-vs-luxon-vs-moment
Statsのサイズを見ると、Moment.jsは65.9KB/day.jsは2.8KBで単純な比較でも大きな違いがあります(2020/2/28現在)

自分は実装の手軽さから、Moment.jsを今回は使ってみたいと思います(今後更新される可能性があります)。
参考: 日付時刻操作ライブラリをmomentからdayjsへ乗り換えた

Moment.jsとは


Moment.js
JavaScriptで日時を解析したり、表示したりできるライブラリです。簡単な使い方は以下のようになります。
・インストール

yarn add moment



・使用

import moment from 'moment'

//FormatDate。以下の例だと現在の時刻がリアルタイムで表示される
moment().format('MMMM Do YYYY, h:mm:ss a'); //February 28th 2020, 12:00:00 am

//日時の差分を計算する。addで足すこともできる。
moment().subtract(10, 'days').calendar(); // 02/18/2020



以上が簡単な使い方です。詳しくはドキュメントをご覧ください。

Example:microCMSでブログサービスの投稿に日時を表示する。


前提知識

以下の記事をご覧ください。
microCMSを使ってTypeScriptに入門する
使用するライブラリは以下の通りです。

  • next 9.2.1
  • react 16.12.0
  • moment 2.24.0
  • react-moment 0.9.7
  • typescript 3.7.5


microCMSでコンテンツを作成



APIの種類にDayがあるのでそれを選択してください。

と言っても使用方法は簡単です。

日時のAPIフィールド

src/posts/index.tsx
import Moment from 'react-moment';

const PostsPage: NextPage<Props> = ({ posts }) => {
  return (
    <>
      {posts.map(post => (
        //...省略
        <Moment format="YYYY/MM/DD HH:mm">{post.day}</Moment>
      )}
  </>
}

PostPage.getInitialProps = async () => {
  //...以下postsをmicroCMSから取得するコード
}


全てのコードをみたい場合はこちらをどうぞ
GitHub

今回はreact-momentというライブラリを使ってデータを扱いやすいようにしてみました。
npm react-moment
使い方は簡単で変換したい要素を<Moment>で囲んであげるだけですね。
formatを指定することによって、自由に表示内容を変えることができます。
簡単に日時を取り扱うことができました!

まとめ

Moment.js、React/Nextではreact-momentがすごい便利。
ただ、ファイルが重いので、dayjsに乗り換えるのもありかな〜っと思っています。
今後検討していきたいと思っています。