Gatsbyのブログで日本時間の日付表示をする

Gatsby

Gatsby のテンプレートの gatsby-starter-blog では初期状態で英語での日付表示になっている。
これを日本語での日付表記に変更する方法をまとめた。

before

after

具体的なコードは該当の PullRequest で確認出来る。

該当箇所の確認

gatsby-starter-blogでは記事一覧ページ(index.js)、個別記事ページ(blog-post.js)にて日付けが使われている。

GraphQL では以下の様に fromtmatter でデータを取っている。

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

dateの部分を整形して英語表記にしているので削る。

dateのままだと 2022 年 2 月 23 日の場合は20220223で取得される。
これを 2022 年 2 月 23 日表記にする為ぬにmoments.jsを使って整形する。

{
  moment(post.frontmatter.date).format(`YYYY年MM月DD日`)
}

完成