Astroで下書き投稿を除外して投稿記事一覧を取得する

いきなりですが、このブログは SSG(静的サイトジェネレーター)として Astro を利用しています。

この Astro、静的コンテンツのために色々と考えられて作られていて、当然かもしれませんが以下のように下書きページを扱う設定もあります。

Markdown の下書き | Markdown 🚀 Astro ドキュメント

上記のページを見た方は気づいたかもしれませんが、以下のように書いてるんですよね。

投稿アーカイブや最新投稿リストに、下書き投稿のデータ（タイトル、リンク、説明文など）が含まれないようにするには、Astro.glob()関数で下書き投稿を除外するフィルターを設定してください。

はい。というわけで今回は上記の引用部分を行うだけの記事です。

いや、分かる人はなんやねんと思ってるかもしれませんが、JavaScript の業界になれてない私のような生モノには、思いのほか気付くまで大変だったのです許して…()

結論

結論ですが、filter メソッドを使えばいいだけですね。

とまぁ流石にこれで終わらすのはどうかと思うので、少し解説をしてみましょう。

Astro には、Astro.glob()というメソッドがあります。 こちら、以下のようにしてやることで、Record<string, any>型に変換された記事の一覧を取得することができます。

// Record<string, any>[]
const posts = await Astro.glob("./post/*.{md,mdx}");

取得したデータは配列なので、filter メソッドでdraft: falseになっている要素のみを収集してあげると、下書き記事を除外した記事一覧を取得することができます。 ちなみに、Markdown のフロントマターのデータはpost.frontmatterに全て格納されています。

// 下書き記事の除外
const posts = (await Astro.glob("./post/*.{md,mdx}")).filter(
  (post) => !post.frontmatter.draft
);

// 下書き記事の除外と日時降順ソート
const posts = (await Astro.glob("./post/*.{md,mdx}"))
  .filter((post) => !post.frontmatter.draft)
  .sort(
    (a, b) =>
      new Date(b.frontmatter.pubDate).valueOf() -
      new Date(a.frontmatter.pubDate).valueOf()
  );

Array.prototype.filter() - JavaScript | MDN

あとがたり

というわけで至極単純な方法でした。 JavaScript の世界に慣れていないので、こんなことにもつまづいてしまうのです。

今まで、C♯や Java や、最近だと Rust なんかしかやっていなかったので、JavaScript/TypeScript の感覚がなんだか上手くなじまないんですよね…。JavaScript が悪いというわけじゃなく、具体的にどこがと言われると困るのですが…。

とまぁそんなこんなで、次があればまたお会いしましょう！