渡邊 賢二
株式会社メンバーズの渡邊です。
この記事は、こちらのAstroを使ったチュートリアル記事をアップデートし、Astro 5以降で利用できるコンテンツローダー（Content Loader）に対応したものです。
Astroとは？
Astroは、高速なウェブサイトを構築できるモダンなフレームワークです。
もともとは静的サイト生成（SSG）に対応したフレームワークとして人気を集めましたが、現在ではサーバーサイドレンダリング（SSR）など※1にも対応し、より高機能なWebフレームワークへと進化しています。 2025年9月時点で、GitHubのスター数は53,000を超え、世界中の開発者から注目を集めています。
Astroは、「可能な限りブラウザへのJavaScriptの送信を抑え、サーバー側でHTMLを生成する」という思想があり、これにより高速なページ読み込みが実現できます。
Astroの最大の特徴は、アイランドアーキテクチャです。 ページの大部分を高速な静的HTMLとして出力し、必要な部分だけを独立した島（アイランド）のように個別に制御できます。 React、Preact、Vue、Svelte、Solid、Alpine.js など、人気のUIフレームワークが利用可能であり、個々にインタラクティブにするタイミングを調整できます※2。 サーバーアイランドを利用すると、静的ページの一部分だけをSSRし、遅延読み込みさせることもできます。
Astroは、ブログサイトやコーポレートサイトといった静的コンテンツ中心の、比較的インタラクティブ処理が少ないWebサイトに最適なフレームワークです。 一方で、インタラクティブ要素が多いWebアプリケーションを構築する場合は、Next.jsなど他のフレームワークの利用を検討してみてください。
※1: Vercelなどのアダプターを利用するとISR（増分静的再生成）にも対応できます。こちらの記事に、AstroでISRを使用する手順があります。
※2: クライアントアイランドの特徴です。クライアントアイランドでは複数のUIフレームワークを混在して利用することも可能です。
準備
ソフトウェアバージョン
下記のバージョンで開発を行っています。バージョンの差異によって若干機能が異なる可能性があります。
- Astro 5.13.2
- microcms-js-sdk 3.2.0
Astroプロジェクトのセットアップ
それでは、さっそくAstroプロジェクトを作成しましょう。ターミナルを開き、以下のコマンドを実行してください。
npm create astro@latestコマンドを実行すると、対話形式でいくつかの質問が表示されます。今回はこのように選択しました。
ローカル環境でサイトを確認してみる
プロジェクトの準備ができたので、開発サーバーを起動してみましょう。
cd astro-microcms-blog
npm run devサーバーが起動すると、ターミナルに以下のように表示されます。
http://localhost:4321/ にブラウザでアクセスすると、Astroのウェルカムページが表示されるはずです。
これでAstroプロジェクトの基本的なセットアップは完了です。
microCMSアクセスへの準備をする
microCMSからブログのコンテンツを取得するための準備を行います。
環境変数の設定
まず、microCMSのAPIキーなどを安全に管理するために、環境変数を設定します。プロジェクトのルートディレクトリに .env ファイルを新規作成し、下記の情報を入力してください。
MICROCMS_API_KEY=<YOUR_KEY_VALUE>
MICROCMS_SERVICE_DOMAIN=<YOUR_SERVICE> # .microcms.io は含まない値- MICROCMS_API_KEY： microCMS 管理画面の「サービス設定 > API キー」から確認することができます。
- MICROCMS_SERVICE_DOMAIN： microCMS 管理画面の URL（https://xxxxxxxx.microcms.io）の xxxxxxxx の部分です。
microCMS JavaScript SDKのインストール
次に、microCMSのデータを取得するためのmicroCMS JavaScript SDKをインストールします。
npm install microcms-js-sdkコンテンツローダーの準備
Astroには、Markdownなどのローカルファイルを、コンテンツとして型安全に管理できる コンテンツコレクション（Content Collections）という機能があります。Astro 5.0では、コンテンツコレクションが強化され、外部データも汎用的に扱えるようになりました。
外部データをコンテンツコレクションに対応させるには、専用のローダーを導入する必要があります。 本手順では、microCMSで管理するコンテンツを読み込むためのローダーを追加していきます。
まず、src/content.config.ts を作成し、microCMSのデータを読み込むための、Content Loaderの実装を追加します。
import { defineCollection, z } from "astro:content";
import { createClient } from "microcms-js-sdk";
const client = createClient({
serviceDomain: import.meta.env.MICROCMS_SERVICE_DOMAIN,
apiKey: import.meta.env.MICROCMS_API_KEY,
});
// microCMSのコンテンツローダー
const microCMSLoader = (endpoint: string) => {
return async () => {
try {
console.log(`microCMSから${endpoint}データを取得中...`);
const response = await client.getAllContents({
endpoint
});
console.log(`${response.length}件の${endpoint}を取得しました`);
return response;
} catch (error) {
console.error(`microCMSからの${endpoint}取得に失敗:`, error);
return [];
}
};
};
// 共通のフィールド
const microCMSDateFields = {
createdAt: z.string(),
updatedAt: z.string(),
publishedAt: z.string(),
revisedAt: z.string(),
};
// コレクションの定義
const blogs = defineCollection({
loader: microCMSLoader('blogs'),
schema: z.object({
title: z.string(),
content: z.string(),
...microCMSDateFields,
}),
});
// コレクションのエクスポート
export const collections = {
blogs,
};これで、どこからでも型安全にmicroCMSのコンテンツを呼び出せる準備が整いました。
ブログ記事一覧を作成する
microCMSの管理画面でブログ記事を作成していきます。
まずはmicroCMSにブログ（blogs）というAPIを用意します。
APIの型の選択ではリスト形式を選択してください。
フィールドは以下のように指定します。
この部分は画面上部のAPIスキーマのインポート機能を使って簡単に設定することも可能です。その場合はastro-blog-schema.jsonを利用してください。
APIが作成できたら記事も2つほど作成しておきます。
ここまで準備ができたらAstroのソースコードの記述を進めていきましょう。今回はトップページにブログ一覧が並んでいるサイトを想定します。
まずは src/pages/index.astro の内容を以下のように書き換えます。このファイルがルートパス（http://localhost:4321/）にアクセスした際に呼び出されます。
---
import Layout from "../layouts/Layout.astro";
import { getCollection } from "astro:content";
const blogs = await getCollection("blogs");
---
<Layout title="My first blog with Astro">
<main>
<ul>
{
blogs.map((blog) => (
<li>
<a href={blog.id}>{blog.data.title}</a>
</li>
))
}
</ul>
</main>
</Layout>
<style>
main {
margin: auto;
padding: 1em;
max-width: 60ch;
}
</style>先頭の --- はコードフェンスと言い、コードフェンスに囲まれた部分ではJavaScriptの処理を記述することができます。デフォルトではビルド時にサーバサイドで呼び出され、ビルド後のサイトにはJavaScriptコードは残りません。
この部分でmicroCMSの記事一覧を呼び出し、リスト要素として画面表示しています。
この状態でブラウザでの表示は以下のようになります。microCMSから取得した記事の一覧を表示できました。
ブログ記事詳細を作成する
ここまでの作業では詳細ページを作成していないので、リンクを押下して遷移すると以下のような404画面が表示されているはずです。
404とならないように詳細画面を作成していきましょう。
ルーティング設定をする
Astroでは基本的に src/pages 以下のファイル名がウェブサイトのパスと対応しますが、今回のようにパスの値が動的に変わる場合には動的ルーティングを設定する必要があります。
参考：ルーティング 🚀 Astroドキュメント
今回は http://localhost:4321/記事id といったパスでアクセスできるように src/pages/[blogId].astro ファイルを作成し、以下のように記述します。
---
import Layout from "../layouts/Layout.astro";
import { getCollection } from "astro:content";
// 詳細記事ページの全パスを取得
export async function getStaticPaths() {
const blogs = await getCollection("blogs");
return blogs.map((blog) => ({
params: {
blogId: blog.id,
},
props: {
blog,
},
}));
}
// 記事の詳細情報を取得
const { blog } = Astro.props;
---
<Layout title="My first blog with Astro">
<main>
<h1 class="title">{blog.data.title}</h1>
<p class="publishedAt">公開日時：{blog.data.publishedAt}</p>
<div class="post" set:html={blog.data.content}></div>
</main>
</Layout>
<style>
main {
margin: auto;
padding: 1em;
max-width: 60ch;
}
</style>getStaticPaths はこの動的なパスがどういった値を取り得るかを指定するために用意します。
またmicroCMSのリッチエディタではHTML文字列がそのまま返却されるため、set:html を使ってHTMLを画面にそのまま表示しています。<div class="post">{blog.data.content}</div> ではHTML部分がエスケープされてしまい画面上にそのまま表示されてしまうためご注意ください。
上記の説明に関連したドキュメントは以下の通りです。
ここまでの記述が完了すると以下のように詳細画面も表示されます。
microCMSの入稿内容を変更すると記事表示も変わることをご確認ください。
ホスティングしてサイト公開する
ブログサイトの一覧と詳細を表示できるようになったため、サイト公開に進みます。
まずはAstroで作ったサイトのビルドとプレビューについて理解しましょう。
ウェブサイトのビルドは1コマンドを実行するのみと非常に簡単です。
npm run build
ビルドが成功した場合は ./dist にサイトが出力されます。
出力されたサイトの確認は以下のコマンドです。
npm run preview
概要を理解できたためホスティングサービスを利用して作成したサイトを公開します。
ビルド後のファイルは単純なHTML/CSS等ですのであらゆる箇所にホスティングができますが、いくつかのサービスは公式ドキュメントでその手順が詳しく説明されています。
デプロイ 🚀 Astroドキュメント
その中でもNetlifyを使う方法は特に簡単です。 ここまでで作成したプロジェクトをGitHubリポジトリとして登録しNetlifyと連携させましょう。
この部分の詳しい手順はNuxt.jsのチュートリアル記事内にも記載があるのでご参照ください（環境変数の設定をお忘れなく）。
サイトが公開できたら本記事の内容は完了です！おめでとうございます🎉
このチュートリアルを終えた後のステップ
この記事では、AstroとmicroCMSを組み合わせてつくるブログサイトについて、コンテンツローダーに対応した最新のバージョンで解説してきました。
今後のステップアップとして、microCMSブログ内で紹介している以下の機能の構築にチャレンジしてみるのもおすすめです。いずれもAstroをベースにした解説記事ですので、ぜひ参考にしてください。
- 記事詳細ページに目次機能を実装する
- 記事一覧ページでページネーションを実装する
- 検索機能を実装する
- 画面プレビューを実装する
- PV数ランキングを実装する
- 記事の動的ルーティング（[id].astro）にISRとプレビューを実装する
- ISR対応のサイトにVercelのDraft Modeで画面プレビューを実装する
- キャッシュを活用し、ビルドの最適化をおこなう
本記事は以上です。ここまでお読みいただき誠にありがとうございました。
