ロゴ

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(),
);
---

ここがポイント

3. slice - 必要な記事だけを取り出す

最後に、slice()を使って 特定の範囲の記事だけを抽出します。

---
// 1から3番目を抽出する例
const 変数名= 変数名②.slice(1, 4)
---

2つ目のsortメソッドと組み合わせれば、最新記事だけを表示する」なんてことも簡単! また、元の配列を壊さないので、扱いやすいです。