Astro 4.0実践ガイド：アイランドアーキテクチャで高速なWebサイトを構築する【2025年版】

開発環境のセットアップとプロジェクト作成

Astroのプロジェクトは、npmコマンド一つで簡単に始められます。

# 新しいAstroプロジェクトを作成
npm create astro@latest

コマンドを実行すると、プロジェクト名、テンプレート（「Empty」や「Blog」など）、TypeScriptの使用などを対話形式で設定できます。ここでは「Empty」を選択して、ゼロから構築してみましょう。

cd my-astro-project
npm run dev

npm run devで開発サーバーが起動し、http://localhost:4321でページを確認できます。

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

作って学ぶ　Next.js/React　Webサイト構築

ステップ1：Astroコンポーネントとレイアウトの作成

AstroのUIは、.astroという拡張子を持つAstroコンポーネントで構築します。これはHTMLに似ていますが、コンポーネントスクリプトとUIテンプレートという2つの部分で構成されます。

--- 
// src/components/Header.astro
// ---で囲まれた部分がコンポーネントスクリプト（サーバーサイドで実行）
const { title } = Astro.props;
---
<header>
  <h1>{title}</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>
<style>
  h1 {
    color: red;
  }
</style>

複数のページで共通のHTML構造を再利用するために、レイアウトを作成します。

--- 
// src/layouts/BaseLayout.astro
import Header from '../components/Header.astro';
const { pageTitle } = Astro.props;
---
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>{pageTitle}</title>
</head>
<body>
  <Header title={pageTitle} />
  <main>
    <slot /> <!-- ここに各ページの内容が挿入される -->
  </main>
</body>
</html>

そして、src/pages/index.astroでこのレイアウトを使います。

--- 
// src/pages/index.astro
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout pageTitle="Home Page">
  <p>Welcome to my Astro site!</p>
</BaseLayout>

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

Astro フロントエンド開発の教科書

ステップ2：コンテンツの追加（Markdownとコンテンツコレクション）

Astroは、MarkdownやMDXを使ったコンテンツ作成を強力にサポートしています。

src/pages/posts/ディレクトリにpost-1.mdのようなMarkdownファイルを置くだけで、自動的に/posts/post-1というページが生成されます。

さらにAstro 2.0から導入されたコンテンツコレクションは、複数のMarkdownファイル（ブログ記事など）を型安全に扱うための仕組みです。

src/content/config.tsでコレクションのスキーマを定義します。

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
    author: z.string(),
  }),
});

export const collections = {
  'blog': blogCollection,
};

src/content/blog/ディレクトリにMarkdownファイルを配置します。
動的ルーティングページ（src/pages/blog/[...slug].astro）で、getCollectionを使ってコンテンツを取得し、ページを生成します。

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

Prometheus実践ガイド　クラウドネイティブな監視システムの構築

ステップ3：インタラクティブなUIの追加（Astroアイランド）

静的なコンテンツだけでは物足りない場合、ReactやSvelte、VueなどのUIフレームワークを使ってインタラクティブなコンポーネント（アイランド）を追加できます。

ここではReactを例に説明します。

Reactインテグレーションの追加:
```
npx astro add react
```

Reactコンポーネントの作成:

// src/components/Counter.jsx
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Astroコンポーネントでの利用: .astroファイル内でReactコンポーネントをインポートし、クライアントディレクティブを付けて使用します。 ```astro
// src/pages/index.astro import BaseLayout from '../layouts/BaseLayout.astro'; import Counter from '../components/Counter.jsx';

Welcome to my Astro site!

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

Ansible実践ガイド第4版［基礎編］ impress top gearシリーズ

Interactive Counter

```

client:load: このディレクティブが、このコンポーネントを「アイランド」として扱うための鍵です。ページの読み込みと同時にJavaScriptが読み込まれ、コンポーネントがインタラクティブになります。

他にも、以下のようなディレクティブがあります。

client:idle: ページの初期読み込みが完了した後にJavaScriptを読み込みます。（優先度の低いUI向け）
client:visible: コンポーネントがビューポートに入った時にJavaScriptを読み込みます。（画面下部のUI向け）

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

Next.js＋ヘッドレスCMSではじめる！かんたんモダンWebサイト制作入門高速で、安全で、運用しやすいサイトのつくりかた

ステップ4：View Transitionsによるシームレスな画面遷移

Astro 3.0から導入されたView Transitions APIのサポートにより、MPA（Multi-Page Application）でありながら、SPAのような滑らかな画面遷移を簡単に実装できます。

src/layouts/BaseLayout.astroの<head>タグ内に、ViewTransitionsコンポーネントを一行追加するだけです。

--- 
// src/layouts/BaseLayout.astro
import { ViewTransitions } from 'astro:transitions';
// ...
---
<html lang="en">
<head>
  <ViewTransitions />
  <title>{pageTitle}</title>
</head>
<body>
  // ...
</body>
</html>

これだけで、ページ間を移動する際に、デフォルトのフェードイン・フェードアウトアニメーションが適用されます。特定の要素に名前を付けて、より複雑な遷移アニメーションを定義することも可能です。

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

情報処理教科書プロジェクトマネージャ 2025年版（EXAMPRESS） [ ITのプロ46 ]

まとめ：コンテンツ主体のサイトに最適な選択肢

Astroは、そのユニークなアイランドアーキテクチャにより、他のフレームワークとは一線を画す圧倒的なパフォーマンスを実現します。

ブログ、ドキュメント、マーケティングサイトなど、パフォーマンスがSEOやユーザー体験に直結するサイトに最適です。
React, Svelte, Vueなど、好みのUIフレームワークを必要な部分だけシームレスに統合できます。
View Transitionsにより、MPAの堅牢性とSPAの滑らかなUXを両立できます。

アプリケーション全体が高度にインタラクティブである必要があるSPAにはNext.jsなどが依然として適していますが、「速さ」が最優先事項である多くのWebサイトにとって、Astroは非常に強力で魅力的な選択肢となるでしょう。

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

達人が教えるWebパフォーマンスチューニング　〜ISUCONから学ぶ高速化の実践