Astro あすとろ

---

Astroとは

Astroは、2021年に登場したオープンソースの静的サイトジェネレーター（SSG: Static Site Generator）兼Webフレームワークです。ブログ・ドキュメントサイト・マーケティングサイトなど、コンテンツ中心のWebサイトを高速に配信することを最大の目標として設計されています。

最大の特徴は「デフォルトでJavaScriptをほぼ出力しない」点です。従来のReactやVueベースのフレームワークは、ページを表示するために大量のJavaScriptをブラウザに送り込みますが、Astroはビルド時にHTMLを生成し、インタラクション（動き）が必要な部分だけにJavaScriptを限定的に適用します。これにより、ページの読み込みが劇的に速くなります。

また、AstroはReact・Vue・Svelte・SolidJSなど複数のUIフレームワークを1つのプロジェクト内で混在させて使える珍しい設計を採用しています。既存の資産を活かしつつ移行できる柔軟性も、エンジニアから支持を集める理由のひとつです。

---

アイランドアーキテクチャという核心的な考え方

Astroの心臓部にあるのが「アイランドアーキテクチャ（Islands Architecture）」という概念です。

ページ全体を「静かな海」と見立て、インタラクティブな部品だけを「島（アイランド）」として浮かべるイメージです。島の外はただのHTMLなのでJSのコストがゼロ、島の中だけ必要なJSが動きます。

エリア	内容	JavaScript
海（静的部分）	ヘッダー・本文テキスト・フッターなど	なし
島（動的部分）	検索フォーム・カルーセル・ショッピングカートなど	必要な分だけ

ハイドレーションの制御（client:* ディレクティブ）

Astroではコンポーネントに「いつJSを読み込むか」を指示できます。

ディレクティブ	タイミング
client:load	ページ読み込み直後
client:idle	ブラウザが暇になったとき
client:visible	画面に見えたとき
client:media	メディアクエリが一致したとき
client:only	サーバーレンダリングなし（CSRのみ）

Astroファイル構文（.astro）

Astro独自の .astro ファイルは、上部にJavaScriptロジック、下部にHTMLテンプレートを書く形式です。

---
// ここはサーバー側で実行される（ビルド時 or リクエスト時）
const title = "こんにちは、Astro！";
const posts = await fetch("/api/posts").then(r => r.json());
---

<!-- ここがHTMLテンプレート -->
<h1>{title}</h1>
<ul>
  {posts.map(p => <li>{p.title}</li>)}
</ul>

---

歴史と背景

• 2021年6月：Fred K. Schottらが開発、ベータ版を公開。「コンテンツサイトに特化したSSGが欲しい」という声に応えて誕生
• 2022年8月：Astro v1.0 正式リリース。安定版として企業採用が増加
• 2022年末〜2023年：コンテンツコレクション機能・SSR（サーバーサイドレンダリング）対応を強化。SSGだけでなくダイナミックなサイトにも使えるように進化
• 2023年9月：Astro v3.0 リリース。ビューtransitions APIのネイティブサポートなどでSPA風のページ遷移を実現
• 2024年：Astro v4.x 系でAstro DBやServer Actionsなどを追加、フルスタック志向の機能も強化
• 背景として、Core Web Vitals（Googleの表示速度指標）の重要性が増したことで、「JSを減らして速いサイトを作る」需要が急増したことが普及を後押し

---

他フレームワークとの比較

Astroは何でもできる万能ツールではなく、コンテンツ重視サイトに特化した選択肢です。用途によって使い分けましょう。

フレームワーク	主な用途	デフォルトJS出力	ルーティング
Astro	ブログ・ドキュメント・LP	最小（ゼロ近く）	ファイルベース
Next.js	Webアプリ全般・ECサイト	多め	ファイルベース
Nuxt.js	VueベースのWebアプリ	多め	ファイルベース
SvelteKit	軽量Webアプリ	少なめ	ファイルベース
Remix	データ中心のWebアプリ	多め	ファイルベース
Gatsby	コンテンツサイト（旧来）	多め	ファイルベース

AstroのレンダリングモードをSVGで整理

---

関連用語

• 静的サイトジェネレーター — ビルド時にHTMLを生成してサイトを作るツールの総称
• Next.js — ReactベースのフルスタックWebフレームワーク。Astroと比較されることが多い
• React — Meta製UIライブラリ。Astroのコンポーネントとして組み込んで利用できる
• Vite — Astroのビルドツールとしてベースになっているフロントエンドビルドツール
• Core Web Vitals — Googleが定めるページ表示品質の指標。Astroが高スコアを取りやすい
• SSG（Static Site Generation） — ビルド時にHTMLを生成するレンダリング方式
• SSR（Server Side Rendering） — リクエストのたびにサーバーでHTMLを生成するレンダリング方式
• Markdown — Astroでコンテンツを記述する際によく使われる軽量マークアップ言語