ブログのトップページに最新の記事が表示されていると、訪問者が新しい情報をすぐに見つけられて便利です。ここでは、Content Collections APIで管理しているブログ記事の中から、最新の5件をトップページ (src/pages/index.astro) に表示する手順を紹介します。

前提:

Content Collections APIを使ってブログ記事 (blog コレクション) を管理している。
各記事のMarkdownファイルのフロントマターに pubDate (公開日) が設定されている。
個別記事ページへのURL生成ロジックが確立している

トップページへの新着記事一覧表示手順

1.トップページファイル (`src/pages/index.astro`) を開く

プロジェクトの src/pages/index.astro ファイルをエディタで開きます。これがサイトのトップページに対応するファイルです。

2.記事データの取得、ソート、件数制限

ファイルの先頭にあるフロントマター部分 (--- で囲まれたエリア) に、記事データを取得し、並び替えて、件数を絞り込むコードを追加します。

---
// src/pages/index.astro
import { getCollection } from 'astro:content';
import BaseLayout from '../layouts/BaseLayout.astro'; // 適切なレイアウトを指定

// 1. 'blog'コレクションの記事をすべて取得
const allPosts = await getCollection('blog');

// 2. 公開日 (pubDate) の新しい順に記事をソート
//    new Date() を使って日付として比較する
const sortedPosts = allPosts.sort((a, b) =>
  b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
);

// 3. 最新の5件だけを取得 (sliceを使用)
const recentPosts = sortedPosts.slice(0, 5);

// 4. 個別記事ページへのURLを生成するヘルパー関数 (前の手順で作成したものを再利用または同様のロジックを記述)
function getPostUrl(post) {
  if (post.data.url) {
    // フロントマターにurlがあれば、ルートからのパスを返す
    return `/${post.data.url}/`;
  }
  // なければファイルパスに基づくデフォルトのパスを返す
  return `/blog/${post.slug}/`;
}

// 他のトップページ用データなど...
const pageTitle = "ようこそ！";
---

getCollection('blog') で全記事を取得します。
sort() メソッドで pubDate を基準に降順（新しいものが先頭）に並び替えます。valueOf() または getTime() を使って数値として比較するのが確実です。
slice(0, 5) で、ソート後の配列の先頭から5件分の記事データを取り出します。
個別記事ページへのリンク生成用に、以前の手順で src/pages/tags/[tag].astro や src/pages/blog/index.astro で使った getPostUrl 関数（または同様のロジック）をここにも記述します。

3.記事リストの表示

フロントマター部分の下にあるHTMLテンプレート部分に、取得した recentPosts を使って記事リストを表示するコードを追加します。

---
// --- 上記のフロントマターコード ---
---
<BaseLayout title={pageTitle}>
  <h1>{pageTitle}</h1>
  <p>このサイトのトップページです。</p>

  {/* ↓ ここから新着記事一覧を追加 */}
  <h2>新着記事</h2>
  <ul>
    {recentPosts.map((post) => (
      <li>
        {/* getPostUrlヘルパーでリンク先URLを生成 */}
        <a href={getPostUrl(post)}>{post.data.title}</a>
        <span style="font-size: 0.8em; margin-left: 8px;">
          ({post.data.pubDate.toLocaleDateString()})
        </span>
      </li>
    ))}
  </ul>
  {/* ↑ ここまで新着記事一覧 */}

  {/* 他のトップページのコンテンツ... */}
</BaseLayout>

recentPosts 配列を map() でループ処理します。
各記事 (post) について、タイトル (post.data.title) と公開日 (post.data.pubDate) を表示します。日付は toLocaleDateString() などで読みやすい形式に変換すると良いでしょう。
<a> タグの href 属性には、ステップ2で用意した getPostUrl(post) 関数を使って正しい記事ページのURLを設定します。
ページ全体を適切なレイアウトコンポーネント (<BaseLayout> など) で囲みます。

4.開発サーバーで確認

ターミナルで開発サーバーを起動します。

npm run dev
# または pnpm dev, yarn dev

ブラウザでサイトのトップページ (http://localhost:4321/ など) にアクセスしてください。

「新着記事」セクションが表示され、公開日の新しい順に最大5件の記事がリストアップされていれば成功です。各記事のリンクをクリックして、正しい個別記事ページに移動できるかも確認しましょう。