Astroを使ったら静的サイト開発の常識が変わった話

はじめに

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	得意	対応