AstroでMarkdown記事を一覧表示する方法

※本ブログの目的は個人の備忘録であり、コードは参考用として掲載しています。
実際に使用される際は、ご自身の環境で十分に動作確認を行ってください。
コードの利用によって生じたいかなる問題についても責任を負いかねますので、あらかじめご了承ください。

Webサイトでブログを書くとき、文章をMarkdownで管理するととても便利です。

Astroを使えば、Markdownで書いた記事を簡単に取得して、自分のブログページにきれいに表示できます。

Markdownとは

Markdownはシンプルな文章フォーマットです。

---
title: "はじめてのAstroブログ"
pubDate: "2025-08-19"
tags: ["Astro", "Markdown"]
description: "AstroでMarkdown記事を表示する方法を説明します"
---

これはブログの本文です。
  • --- で囲まれた部分はフロントマターと呼ばれ、記事のタイトルや日付、タグなどを設定します
  • その下が記事の本文です

astro:content のコンテンツコレクションについて

Astroには、MarkdownやMDXのファイルをまとめて扱える仕組みがあります。

これを コンテンツコレクション（Content Collection） と呼びます。

コレクションとは

コレクションは「同じ種類の記事やページをまとめたフォルダ」のことです。

例えばブログ記事を管理する場合は、以下のように blog フォルダを作ります。

src/content/blog/
├─ first-post.md
├─ second-post.md
└─ third-post.md

使い方

Astroでは getCollection('コレクション名') でまとめて取得できます。

blogPosts には、記事のフロントマターや本文、IDなどの情報が全部入っています。

ファイル名が自動的に記事のURL（ID）となります。

import { getCollection } from 'astro:content';

const blogPosts = await getCollection('blog');

Markdown記事の詳細ページを作成する

ファイル構成の例

まず、ブログ詳細ページ用のページコンポーネントを用意します。

[id] は「動的ルート」を意味し、各記事ファイル名（例: first-post.md）が id としてURLに対応します。

src/pages/blog/[id].astro

getStaticPaths で全記事のページを生成する

次に getStaticPaths を使って、ビルド時に全記事のページを自動生成します。

props で渡された記事データは、ページコンポーネント内でそのまま利用できます

import { getCollection } from 'astro:content';

export async function getStaticPaths() {
  // blogコレクションから全記事を取得
  const posts = await getCollection('blog');

  // 各記事ごとにページを作成するための情報を返す
  return posts.map(post => ({
    // URLパラメータとして記事IDを設定
    params: { id: post.id },
    // ページコンポーネントで使えるpropsとして記事データを渡す
    props: { post },
  }));
}

getStaticPaths とは

getStaticPaths は 「ビルド時に作るページの一覧をAstroに教える関数」 です。

  • 動的ルート（例: [id].astro）を使う場合に必要
  • ビルド時にどのURLに対してページを作るかを指定する
  • 同時に、各ページで使うデータ（props）も渡せる

[getStaticPaths] → 「このURLのページを作って」とAstroに伝える
[props] → 「このページで使うデータはこれです」と渡す

記事の内容を表示する

ページコンポーネント内では、渡された props を使って記事を表示します。

---
const { post } = Astro.props;
---

<article class="blog-detail">
  <h1>{post.data.title}</h1>
  <time datetime={post.data.pubDate}>
    {new Date(post.data.pubDate).toLocaleDateString('ja-JP')}
  </time>
  
  <div class="blog-tags">
    {post.data.tags.map(tag => (
      <span class="tag">{tag}</span>
    ))}
  </div>
  
  <div class="blog-body" set:html={post.body}></div>
</article>

Markdown記事の一覧を表示する

Markdown記事を取得して表示する

先程の例の blog コレクションから記事を取得します。

import { getCollection } from 'astro:content';

// Markdown記事を取得
const blogPosts = await getCollection('blog');

新しい順に並べる

最新記事を上に表示したい場合は、日付順に並べ替えます。

.sort() は「配列を並べ替えるメソッド」です。

new Date(...).getTime() は日付を数字に変えて比較しています。

const sortedPosts = blogPosts.sort(
  (a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime()
);

.sort() とは

Array.prototype.sort() は 配列を並べ替えるためのJavaScriptの組み込み関数です。

基本の使い方

  • 配列の要素を 文字列として順番に並べ替え ます
  • そのままだと数字も文字列として比較されるため、思った順番にならないことがあります
const numbers = [3, 1, 4, 2];
numbers.sort();
console.log(numbers); // ["1", "2", "3", "4"]

文字列ではなく数値や日付で並べたいときは 比較関数 を渡します。

比較関数 (a, b) => a - b

  • 0より小さい → aを先に
  • 0 → 並び順そのまま
  • 0より大きい → bを先に

ブログページで記事を表示する

取得した記事をループして一覧表示します。

<div class="blog-grid">
  {sortedPosts.map(post => (
    <article class="blog-card">
      <h2><a href={`/blog/${post.id}`}>{post.data.title}</a></h2>
      <p>{post.data.description}</p>
      <time datetime={post.data.pubDate}>
        {new Date(post.data.pubDate).toLocaleDateString('ja-JP')}
      </time>
    </article>
  ))}
</div>

まとめ

Astroを使って、Markdownで書いた記事を簡単に管理し、ブログ一覧ページや詳細ページに表示する方法を紹介しました。

  • 記事の管理：Markdownファイルをフロントマター付きで作成し、コンテンツコレクションにまとめることで、記事情報を効率よく管理できます。
  • 詳細ページの作成：動的ルート [id].astro と getStaticPaths を組み合わせることで、ビルド時に記事ごとのページを自動生成できます。
  • 一覧ページの表示：getCollection を使って記事を取得し、.sort() で新しい順に並べることで、最新記事から順に表示できます。

参考