Astro Content Collections の使い方
// 記事のポイント
- Content Collectionsは、同じ形式のコンテンツをスキーマでチェックしながら管理する仕組み
- glob()ローダーで記事を集め、スキーマで必須項目・型を定義する
- getCollection('blog')で記事データを取得し、並び順は自分で指定する
- astro checkとビルドで、公開前にスキーマ違反や入力ミスを検出できる
りょんた今日は、このブログでも使っているAstroの「Content Collections」を紹介するよ〜。
Markdownの記事が増えてくると、タイトルや公開日、カテゴリの書き忘れが気になる。Content Collectionsを使うと、記事をひとまとまりのデータとして管理しながら、決めた形式に沿っているかチェックできる。
おこめこれくしょんって、こめのおやつコレクションみたいなもの？
種類ごとにきれいに並べるの？
りょんたかなり近い（笑）
Content Collectionsは、同じ形を持つコンテンツの集まり。ブログ記事なら、どの記事にもタイトル・説明文・公開日・カテゴリがある、という共通ルールを作れる。ローカルのMarkdownだけでなく、JSONやYAML、CMSやAPIなどから取得したデータも扱える。
めい記事ごとに書き方がばらばらになるのを防げるんだね〜。
こめちゃんのおやつも、名前と個数をそろえて管理したら分かりやすそう
りょんたこのブログでは、`src/content.config.ts`に`blog`コレクションを定義しているよ。
`glob()`ローダーで`src/content/blog`にあるMarkdownを読み込み、スキーマにはタイトル、説明文、日付、カテゴリ、タグ、サムネイル、3人の会話など、記事に必要な項目を並べている。ローダーは「どこから記事を集めるか」、スキーマは「記事がどんな形か」を決めるもの、と考えると分かりやすい。
おこめカテゴリを「おやつ」って書いてもいいの？
こめ、そのカテゴリがいちばん大事だと思う！
りょんた残念ながら、このブログのカテゴリ一覧に「おやつ」はないんだよね〜。
カテゴリは決められた候補だけを受け付けるようにしているため、スペルを間違えたり、存在しない値を書いたりするとチェックで気づける。公開日も日付として扱うので、形式が違っていれば同じように見つけやすい。
めい間違ったまま公開される前に教えてくれるなら安心だね〜。
こめちゃん、おやつはカテゴリじゃなくてタグにしてもらおうか
りょんた記事を表示するときは、Astroの`getCollection('blog')`でブログ記事をまとめて取得できるよ。
返ってくる各記事には、ファイル名から作られるIDと、スキーマに沿ったデータが入っている。このブログでは一覧ページで公開日の新しい順に並べ、`/blog/<記事ID>/`のページを生成している。コレクションの取得順は保証されないので、日付順に見せたい場合は自分で並べ替える必要がある。
おこめじゃあ、こめの記事をいちばん新しくしたら、いちばん上に出るってこと？
めいも一緒に載せてあげる！
めいこめちゃんったら、もう。しょうがないなぁ、一緒に載ってあげる〜。
りょんた、あたちたちの記事もちゃんとチェックしてから公開してね
りょんたもちろん！
記事を書いたら、まず`astro check`でスキーマやコードの問題を確認し、そのあと本番ビルドでページが生成されるところまで見るのがおすすめ。Content Collectionsを使えば、記事を増やしやすくしながら、入力ミスも早い段階で見つけられる。
りょんた最初は「ローダーで集める」「スキーマで形を決める」「getCollectionで取り出す」の3つから覚えればOK。詳しい設定はAstro公式のContent Collectionsガイドも確認してみてね〜！
おこめこめの記事もスキーマにちゃんと沿ってるか、りょんたチェックしてね！
// 記事のまとめ
- スキーマで型を決めておくと、記事が増えても「タイトルが無い」のような抜け漏れに早く気づける
- 「ローダーで集める」「スキーマで形を決める」「getCollectionで取り出す」の3ステップで基本は十分
- 公開前にastro checkとビルドを通す習慣が、入力ミスを見つける最後の砦になる
