Gatsbyで日本時間の日時を表示する

2020-06-18 17:30

このサイトはGatsbyで構築しています。日時がUTCになっていることに先日気づきました。管理画面のあるCMSならタイムゾーンの変更は一瞬ですし、Jekyllでも設定項目があります。

Gatsbyの場合、一箇所で設定するような仕組みがないのか情報が少なく、しばらく詰まりました。幸い日本の方がIssueを上げてくれていて、変更方法がわかりました。

gatsby-starter-blogでは、ホームのテンプレートとなるindex.jsと、個別記事のblog-post.jsでほぼ同じ記述がGraphQL内に見つかります。

frontmatter {
  title
  date(formatString: "MMMM DD, YYYY")
  description
}

Markdownで書かれた記事のフロントマターからdateの値を取ってきて変換しています。この部分でタイムゾーンを指定するオプションを追加してよというのがIssueの内容でした。

それに対して、クエリの中でなくページの方で変換すればいいんでないのという回答でした。クエリの方ではdateを加工せずに単に返せばいいということで、先程のスニペットは以下のようになります。

frontmatter {
  title
  date
  description
}

Gatsbyはmoment.jsというパッケージを使用しているようです。ですので各ファイルの先頭付近でmoment.jsを読み込みます。

import moment from "moment"

date が使用されている箇所をindex.jsやblog-post.jsで見つけます。

{post.frontmatter.date}

これを次のように変更すれば出来上がりです。

{moment(post.frontmatter.date).format(`YYYY-MM-DD HH:mm`)}