Astroで記事を並べ替えて表示する基本テクニック3選
投稿日:2026-2-22
Astro では、ブログづくりに欠かせない
記事の取得・並び替え・抽出がとてもシンプルに書けます。
今回は、私が実際に使っている3つのメソッドを紹介します。
🍀前提条件 : Content Collectionを使っている方向けです。
※公式サイトの初めてのAstroブログで作成している方は使えません。
1. getcollection - 記事をまるごと集める
これは、指定したコレクションの記事をすべて取得してくれるメソッドです。
---// フロントマターconst 変数名① = await getcollection("タグ名");---Content Collectionを使っていれば、タイトルや日付といった記事のメタデータも一緒に取得できます。
こんな時に便利
- ホームに「特定のタグの記事一覧」を表示したい
- カテゴリごとに記事をまとめたい
2. sort - 日付順に並べ替える
取得した記事はそのままだと順番がバラバラです。
ファイル名に順番になるように名付けるのもいいですがそれだと不便です。
そこでsort()を使って、新しい順に並べ替えます。
---const 変数名② = 変数名①.sort( (a, b) => b.data.メタデータ.valueOf() - a.data.メタデータ.valueOf(), );---ここがポイント
- a-bにすると**昇順(古い順)**にもできる
- ランキングや人気順にも応用できる(以下参照)
3. slice - 必要な記事だけを取り出す
最後に、slice()を使って 特定の範囲の記事だけを抽出します。
---// 1から3番目を抽出する例const 変数名③ = 変数名②.slice(1, 4)---2つ目のsortメソッドと組み合わせれば、最新記事だけを表示する」なんてことも簡単! また、元の配列を壊さないので、扱いやすいです。