なぜAstroなのか

#本書の到達目標

本書を終えると、次の知識と実装力が身につきます。

• Astroの設計思想を理解し、プロジェクトに適したフレームワークかどうかを判断できる
• ブログサイトをゼロから構築し、公開できる
• ドキュメントサイトを構築し、公開できる
• パフォーマンスを意識したWebサイト設計ができる

#コンテンツ配信に特化するAstroの設計思想

Astro は、コンテンツ重視のWebサイトを構築するために設計されたWebフレームワークです。

ブログ、ドキュメントサイト、ポートフォリオ、コーポレートサイトなど、「コンテンツを読んでもらうこと」が主目的のサイトに特化しています。

Astroの最大の特徴は、デフォルトではJavaScriptをクライアントに一切送らないことです。ページはビルド時にHTMLとして生成され、必要な箇所だけを「アイランド（島）」としてインタラクティブにできます。

#「コンテンツ重視」と「アプリ重視」の違い

Webフレームワークは大きく2つの方向性に分かれます。

2020年代前半、多くのWebサイトが React（Next.js）や Vue（Nuxt）で構築されるようになりました。これらはアプリケーション構築には最適ですが、ブログやドキュメントのような「読むだけ」のサイトでも大量のJavaScriptがクライアントに送られるという問題がありました。

Astroは「読者にとってほぼ静的なページなのに、なぜ数百KBのJavaScriptが必要なのか？」という問いに正面から向き合ったフレームワークです。

#プロジェクト適性の見極め

#Astroが最適なケース ✅

• ブログ・メディアサイト — 記事コンテンツが中心で、リアルタイム更新は不要
• ドキュメントサイト — 技術ドキュメント、マニュアル、ガイド
• ポートフォリオ・LP — デザイン重視で、複雑な状態管理は不要
• コーポレートサイト — 会社概要、サービス紹介ページ
• EC商品カタログ — 商品ページが中心（カート機能は別途必要）

#Astroが向いていないケース ❌

• ダッシュボード・管理画面 — ログイン後にリアルタイムでデータが変わるUI
• チャットアプリ・SNS — WebSocket等を使ったリアルタイム通信が中心
• フォーム中心のSaaS — 複雑な状態管理と入力バリデーションが多い
• ゲーム・高度なインタラクション — Canvas/WebGLを多用するアプリ

#フレームワーク選定の判断フロー

#主要フレームワークとの比較

フレームワーク選定で見るべき基準は優劣ではなく、プロジェクトの性質との適合度です。コンテンツサイトにNext.jsを使うこともできますが、不必要な複雑さを持ち込むことになります。同様に、AstroでSaaSアプリを作ろうとすれば、本来の強みを活かせません。

#開発を支える主要機能

• ゼロJS、デフォルト — 必要な箇所だけJSを送るため、表示速度が速い
• コンポーネントベース — .astroファイルでHTMLとロジックを直感的に記述
• マルチフレームワーク対応 — React・Vue・Svelte・SolidJS などを同一プロジェクト内で併用可能
• Markdown / MDXサポート — コンテンツをMarkdownで手軽に管理
• ビルド時レンダリング（SSG）+ SSR対応 — 用途に応じて柔軟に選択可能
• Content Collections — 型安全なコンテンツ管理システムを標準搭載

#動作環境と前提知識

本書では次の環境・知識を前提とします。

• Node.js v22.12.0以上（LTS推奨）
• テキストエディタ（VS Code推奨）
• HTML / CSS / JavaScriptの基礎知識

次章では、AstroがブラウザへJavaScriptを送らずに高速な描画を実現する仕組みを掘り下げます。