Nuxt/Contentで日付による範囲検索をしたい

2021-01-06T08:13:26+09:00

ハマりにハマった。

Nuxt/Content

最近、Nuxt/Contentというものをお試しで触っている。
Markdownとかでコンテンツをゴリゴリ書いていける、GitベースのヘッドレスCMSとかいうものになるらしい。「GitベースのヘッドレスCMS」とか言われてもよくわからないが、DBではなくGitで管理するということだと思う。
検索とか、なんなら全文検索もできるし結構便利そう。
ただ、公式ドキュメント以外に日本語の記事が乏しくて、ちょっと苦戦する。
ちょっと、というか、どハマりしてしまった。

ハマった環境

Nuxt: 2.14.6
nuxt/content: 1.9.0

日付でコンテンツを絞りたい

作成日でコンテンツを絞りたかったので、ドキュメントを参考にクエリを書いた。
ただ、日付の扱い方がよくわからなかったので嫌な予感はしていた。

// 例）2020/11の記事を検索したい
const monthStart = new Date("2020-11-01")
const monthEnd = new Date("2020-11-30")
const articles = await $content('articles')
    .sortBy('createdAt', 'desc')
    .limit(5)
    .where({
        createdAt: { $and: [{ $gte: monthStart }, { $lte: monthEnd }] },
    })
    .fetch()

これで11月に作成した記事の最新5件が取れるはずだった。

けど取れない

変数articlesの中身は空でした。なんで？
もしかしてDateじゃないのかなとか思って日付形式っぽい文字列にしてみてもダメ。
公式ドキュメントを探し直したけど、特に記述はなく……。
なんなら

createdAt: DateTime

とか書いてあるし、どう考えたってDateでしょ。

調べた

先述の通り、日本語の記事が乏しいうえ、公式ドキュメントに記載がないので苦戦したのだけど、調べて、見つけた。
あったよ。
ていうか、GitHubのissueだったよ！
まあ、内容としてはissueそのまんまなんだけど、

// 例）2020/11の記事を検索したい
const monthStart = new Date("2020-11-01").valueOf()
const monthEnd = new Date("2020-11-30").valueOf()
const articles = await $content('articles')
    .sortBy('createdAt', 'desc')
    .limit(5)
    .where({
        createdAt: { $and: [{ $gte: monthStart }, { $lte: monthEnd }] },
    })
    .fetch()

valueOf()なんて初めて使ったよ。てか、初めて知ったよ。
と思って調べてみたら、getTime()の方が正しい気がしてきたぞ？

このメソッドは、Date.prototype.getTime() メソッドと機能的に同等です。
このメソッドは、JavaScript によって内部的に呼ばれ、コード内で明示的に呼ばれることはありません。

// 例）2020/11の記事を検索したい
const monthStart = new Date("2020-11-01").getTime()
const monthEnd = new Date("2020-11-30").getTime()
const articles = await $content('articles')
    .sortBy('createdAt', 'desc')
    .limit(5)
    .where({
        createdAt: { $and: [{ $gte: monthStart }, { $lte: monthEnd }] },
    })
    .fetch()

うん、これでも動いた。

あー、UNIXタイムスタンプだったかー。ドキュメントに書いてて欲しいなー。

おわりに

issuesにはあったけど、日本語の記事があっても良いと思ったので書きました。
探し方が悪いだけかもしれませんが。