Tech2024-03-17

【Gatsby】時間を指定したのにsortに反映されないときの対処法

Gatsbyでは、GraphQLクエリのsortの中に「frontmatter: { date: DESC }」と入れても、時刻を考慮してくれず動かないことがあります。その解決策です。

Gatsby

フロントエンド

GraphQL

この記事でも触れましたが、Gatsbyはどうやらfrontmatterにおいて日付の書き方を間違えると、時間ソートがうまく働いてくれないようです。

注意：この記事はAIの情報を基にして、人の手で書いています。裏取りはしましたが、不正確な情報があったらお知らせください。

【Gatsby/Markdownブログ初心者向け】そもそも「frontmatter」とは？

frontmatterとは、Markdownの上に書いてあるコレのことをいいます。

Copy

---
title: ブログのタイトル
desc: ブログの説明らしきもの
thumbnail: "path/to/thumbnali.png"
---

<!--↑コイツがfrontmatter-->

ブログ本文ブログ本文ブログ本文ブログ本文ブログ本文ブログ本文ブログ本文ブログ本文…

この記法はyaml（yml）というデータ記法に準じています。どことなくJSONに似ていますが、波括弧はなくインデントで階層を管理します。

見て分かる通り、左に項目名を書き、右に値を入れます。左の項目名は、Gatsbyであれば自分で作成・定義することもできます。

このとき、右の値はダブルクォートで囲うのが適切ですが、場面により必須ではありません。

なお、改行したいときや複数項目を書きたいときは以下のように書きます。ただし、このfrontmatterを読み込むスクリプトが想定していないような値を入れれば当然エラーが起きますので、注意して記入してください。

Copy

desc: |
  こんな感じにすると
  2行書けてしまうんですねえ

日付を表す形式

AIに聞いてみた

検索とコード生成が優秀なBing AIに聞いてみました。なお、文脈を読むのは苦手らしく、会話ははっきり言って支離滅裂だったので全文は割愛します。

どうやら、日付を表す文字列の形式が複数あるらしいです。

スペース入りの形式

2024-03-14 14:30:00 +09:00のような書き方は、特に名前がついていません。

この+09:00というのは、国際標準時UTCからの時差を表し、これをつけることでその左の時間が日本時間であることを表します。

このサイトのテンプレートは、この形式で時刻を表現していました。ところが、これは誤りでした。

ISO8601形式

上の表記法に対し、2020-03-17T12:00:00.000Zのような書き方は、ISO8601形式というようです。表現方法が異なっています。

UTCであれば上のように末尾にZを付け、時差を付ける場合は2020-03-17T12:00:00+09:00のように書きます。この時スペースを開けたり、-を/に書き換えてはいけません。

そして、Gatsbyではこちらの記法を用いなければならないようです。特にエラーは出ませんが、GraphiQLでソートするときに時刻を認識してくれなくなり、無視した結果が出てきます。

基本形式と拡張形式

2020-03-17T12:00:00.000Zや2020-03-17T12:00:00+09:00は拡張形式といい、人間様にとって読みやすいスタイルです。

これに対し基本形式では、ハイフンもコロンも省きます。ハイフンだけ付けたり、コロンだけ残すことはできません。

例えば、20200317T120000Zや、20200317T120000+0900のように書きます。

時差を表現するには

スペースを開けずに+09:00と付け加えればOKです。

ソートができたか確認する

手っ取り早く検証するためには、やはりhttps://localhost:8000/___graphqlにアクセスして、クエリを突っ込むのが楽です。

この時、返ってくるデータの「date」に時刻は入っていないはずですが、しっかり時間順でソートできていることが確認できるはずです。

ちなみに

よく見ると日付がずれていることに気が付きました。

GatsbyはどうやらUTCで時間帯を固定しており、これを修正するには結構面倒な手間がいりそうです。「+09:00」の部分は本来必要ですが、計算が面倒であったり、日付がずれてしまうことが嫌であればなかったことにしてしまうのもありかもしれません。

余談（宣伝）

普通、私にとって1日に2本記事を更新することすらごくごく珍しいのですが、昨日何故か7件も記事を同時更新してしまい、このような検証をする機会ができてしまいました。

良ければ、その時更新した他の記事も読んでやってください。（身内向け記事が1件あるため、それらは省いています）

参考文献

ISO 8601 - Wikipedia

ja.m.wikipedia.org