はじめに
Astroは「コンテンツ駆動型サイト」に特化したWebフレームワークですね。
GitHubで54,800スター以上、253,000以上のプロジェクトで使われているという数字を見ると、その人気がよくわかります。個人的には、ブログやドキュメントサイトを作るなら、2025年時点でAstroが最有力候補だと思います。
正直なところ、最初は「また新しいフレームワークか...」と思っていたんですよ。Next.jsで十分じゃないかと。でも実際にAstroでブログを作ってみたら、なんというか「これだよ、求めていたのは」という感覚でした。
最新バージョンはv5.16.4(2025年12月3日リリース)で、活発に開発が続いています。
Astroとは
Astroは「The web framework for content-driven websites」を掲げるフレームワークです。マーケティングサイト、ブログ、ドキュメント、ポートフォリオなど、コンテンツが主役のサイトに最適化されています。
特筆すべきは「Islands Architecture」というアプローチ。ページの大部分は静的HTMLとして配信し、必要な部分だけJavaScriptでインタラクティブにする。これ、意外とシンプルな発想なんですけど、パフォーマンスへの影響は絶大です。
特徴・メリット
1. サーバーファーストで圧倒的に軽い
Astroはコンポーネントをサーバーサイドでレンダリングして、軽量なHTMLをブラウザに送ります。不要なJavaScriptは一切送らない。
Next.jsやNuxtも素晴らしいフレームワークですが、どうしてもJavaScriptのバンドルサイズが気になる場面がある。Astroはデフォルトでゼロ JavaScript。必要な時だけ追加する方式なので、ページの読み込みが圧倒的に速い。
公式によると、Astroサイトの63%が良好なCore Web Vitalsを達成しているらしい。競合他社は24〜44%とのことなので、差は歴然ですね。
2. 好きなUIフレームワークが使える
これがAstroの強みだと思うんですよ。React、Vue、Svelte、Preact、Solid...どれでも使える。しかも同じプロジェクト内で混在できる。
既存のReactコンポーネントをそのまま持ってきて、Astroの中で使えるんです。移行コストが低いのはありがたい。
---
// Astroコンポーネント内でReactを使用
import ReactComponent from './ReactComponent.jsx';
---
<html>
<body>
<h1>Astroで作ったページ</h1>
<ReactComponent client:load />
</body>
</html>
3. コンテンツ管理が楽
ファイルシステム、外部API、CMS...様々なソースからデータを読み込めます。Markdownはもちろん、MDXもネイティブサポート。
ブログ記事をMarkdownで書いて、frontmatterでメタデータを管理して...という定番のワークフローが最初から想定されているので、設定で悩む時間が減ります。
4. TypeScriptがファーストクラス
設定不要でTypeScriptが使えます。.astroファイル内でも型チェックが効くので、型安全な開発ができる。30代になって思うのは、型があると安心感が違うということ。
5. ビルドが速い
Viteベースなので開発サーバーの起動が瞬時。HMRも高速。この辺りは最新のフレームワークなら当たり前になってきましたが、やはり快適です。
インストール方法
前提条件
Node.js 18.17.1以上、または20.3.0以上が必要です。
新規プロジェクトの作成
公式が推奨しているのはこの方法です。
# npm
npm create astro@latest
# pnpm
pnpm create astro@latest
# yarn
yarn create astro
対話形式でプロジェクト名やテンプレートを選択できます。質問に答えていくだけでセットアップ完了。時短になる。
手動インストール
既存プロジェクトに追加する場合はこちら。
npm install --save-dev astro
基本的な使い方
プロジェクト構成
新規作成すると、こんな構成になります。
my-astro-site/
├── astro.config.mjs
├── package.json
├── tsconfig.json
├── src/
│ ├── pages/
│ │ └── index.astro
│ ├── layouts/
│ │ └── Layout.astro
│ ├── components/
│ │ └── Header.astro
│ └── content/
│ └── blog/
└── public/
└── favicon.svg
.astroファイルの書き方
Astroコンポーネントは独自の.astro形式です。frontmatterっぽい部分がスクリプト領域で、その下がテンプレートになります。
---
// ここがスクリプト領域(サーバーサイドで実行)
const name = "Astro"
const items = ["ブログ", "ドキュメント", "ポートフォリオ"]
---
<!-- ここがテンプレート領域 -->
<html lang="ja">
<head>
<title>{name}で作ったサイト</title>
</head>
<body>
<h1>こんにちは、{name}!</h1>
<ul>
{items.map((item) => <li>{item}</li>)}
</ul>
</body>
</html>
<style>
h1 {
color: navy;
}
</style>
見た感じ、HTMLを書いているような感覚で書けますね。
ページルーティング
src/pages/ディレクトリにファイルを置くだけでルーティングが設定されます。
src/pages/index.astro → /
src/pages/about.astro → /about
src/pages/blog/index.astro → /blog
src/pages/blog/[slug].astro → /blog/:slug(動的ルート)
Next.jsのApp Routerを使ったことがある人なら馴染みやすいと思います。
package.json
基本的なスクリプトはこれ。
{
"scripts": {
"dev": "astro dev",
"build": "astro build",
"preview": "astro preview"
}
}
astro.config.mjs
設定ファイルはシンプルです。
import { defineConfig } from 'astro/config';
export default defineConfig({
site: 'https://example.com',
output: 'static', // 静的サイト生成(デフォルト)
});
実践的なユースケース
ブログサイトの構築
Content Collectionsを使うと、Markdown/MDXのブログ記事を型安全に管理できます。
// src/content/config.ts
import { defineCollection, z } from 'astro:content';
const blog = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
description: z.string(),
date: z.date(),
tags: z.array(z.string()),
}),
});
export const collections = { blog };
---
// src/pages/blog/[...slug].astro
import { getCollection } from 'astro:content';
export async function getStaticPaths() {
const posts = await getCollection('blog');
return posts.map((post) => ({
params: { slug: post.slug },
props: { post },
}));
}
const { post } = Astro.props;
const { Content } = await post.render();
---
<article>
<h1>{post.data.title}</h1>
<Content />
</article>
コスパ的に、このContent Collectionsの仕組みはかなり良いと思います。frontmatterの型定義ができるので、記事のメタデータにミスがあればビルド時に検出できる。
インテグレーションの追加
Tailwind CSS、React、画像最適化など、公式インテグレーションが充実しています。
# Tailwind CSSを追加
npx astro add tailwind
# Reactを追加
npx astro add react
# 複数同時に追加
npx astro add react tailwind
astro addコマンドが設定ファイルまで自動で更新してくれるので、導入が楽です。
Reactコンポーネントの部分的な使用
Islands Architectureの真骨頂。ページは静的HTML、インタラクティブな部分だけReactで動かす。
---
import Counter from './Counter.jsx';
---
<h1>静的なタイトル</h1>
<p>この部分は静的HTML</p>
<!-- この部分だけJavaScriptが読み込まれる -->
<Counter client:visible />
client:visibleはビューポートに入ったら読み込む、という指定です。他にもclient:load(即座に読み込み)、client:idle(ブラウザがアイドル時に読み込み)などがあります。
Next.jsとの比較
よく聞かれるのが「Next.jsとどっちがいいの?」という話。
| 観点 | Astro | Next.js |
|---|---|---|
| 向いている用途 | コンテンツサイト、ブログ | Webアプリ、動的サイト |
| デフォルトのJS | ゼロ | あり |
| UIフレームワーク | 自由(複数併用可) | React固定 |
| SSR | 対応 | 対応 |
| SSG | 得意 | 対応 |
個人的には、ブログやドキュメントサイトならAstro、認証があったりインタラクションが多いWebアプリならNext.jsという使い分けですね。
正直なところ、コンテンツサイトにNext.jsを使うのはオーバースペックな場面が多い。Astroはその「ちょうどいい」ところを突いています。
まとめ
Astroを使って感じた変化:
- バンドルサイズ: 劇的に削減
- Core Web Vitals: 改善しやすい
- 開発体験: シンプルで直感的
- 学習コスト: HTMLが書ければすぐ始められる
- QOL: 確実に上がった
コンテンツ駆動型のサイトを作るなら、Astro一択ですね。
特にブログ、ドキュメント、ポートフォリオ、マーケティングサイトを作る予定があるなら、ぜひ試してみてください。「なんでもっと早く使わなかったんだ」と思うはずです。
ただし、認証機能があったり、リアルタイム更新が必要だったり、インタラクションが複雑なWebアプリを作るなら、Next.jsやRemixの方が向いています。適材適所で使い分けるのが大事。