こんにちは。
本日は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があるのでそれを選択してください。

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

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に乗り換えるのもありかな〜っと思っています。
今後検討していきたいと思っています。