Astroは、ブログやドキュメントサイトのように読ませることが目的のWebサイトを、速く作るためのフレームワークです。このシリーズを読み終えた時点で、公式ドキュメントを自力で読み進められる状態になることを目標にしています。
Table of contents
Open Table of contents
このシリーズのねらい
Astroにはアイランドアーキテクチャ、コンテンツコレクション、オンデマンドレンダリングと、独特の用語がいくつも出てきます。機能を1つずつ覚えていくと、どの場面でどれを使うのかが分からなくなります。
そこでこのシリーズは、Astroの開発チームが何を優先して何を捨てたのかから始めます。その判断がわかると、各機能がなぜその形なのかも読めます。狙いは、機能一覧を覚えることではなく、自分で選べるようになることです。
対象読者と前提知識
想定している読者は次のような方です。
- HTMLとCSSの基本的な書き方が分かる
- JavaScriptの基本文法（変数、関数、配列、
mapなど）が分かる - npmなどのパッケージマネージャーでライブラリを入れた経験がある
- ReactやVueは知らなくても構わない（必要な箇所で補足します）
ターミナルでコマンドを実行できることは前提としますが、フレームワーク経験は不要です。TypeScriptについても、型注釈が読める程度で十分です。
学習ゴール
このシリーズを読み終えると、次のことができるようになります。
| ゴール | 対応する章 |
|---|---|
| Astroが他のフレームワークと何が違うのか説明できる | 第1章 |
| プロジェクトを作成し、開発サーバーを起動できる | 第2章 |
.astroコンポーネントを読み書きできる | 第3章・第4章 |
| ページとURLの対応関係を設計できる | 第5章 |
| Markdown記事を型安全に管理できる | 第6章・第7章 |
| インタラクティブな部品を必要な分だけ追加できる | 第8章 |
| 静的生成とサーバーレンダリングを使い分けられる | 第9章・第10章 |
| 画像や画面遷移を最適化できる | 第11章 |
| ビルドしてデプロイできる | 第12章 |
対象範囲・対象外
対象範囲
- Astro 7系を前提とした基本機能
.astroコンポーネント、ルーティング、レイアウト、スタイリング- コンテンツコレクションとMarkdown / MDX
- アイランドアーキテクチャとUIフレームワーク統合
- 静的生成とオンデマンドレンダリング、アダプター
- エンドポイントとActions
- 画像最適化、View Transitions
- ビルドとデプロイの基本
対象外
以下は入門の範囲を超えるため、このシリーズでは扱いません。必要になった時点で公式ドキュメントを参照してください。
- 独自インテグレーションやカスタムローダーの実装
- 特定のホスティングサービスごとの詳細な設定手順
- データベース連携やCMSごとの個別の接続方法
- 高度な国際化（i18n）設計、テスト戦略、CI/CDの構築
主要情報源
いずれもAstro公式ドキュメントおよび公式ブログで、確認の基準日は2026年8月2日です。Astroは更新の速いフレームワークのため、実際に利用する際は必ず最新版のドキュメントを確認してください。
| 情報源 | 参照範囲 |
|---|---|
| Why Astro? | 設計思想と5つの原則 |
| Astro Islands | アイランドアーキテクチャ、client:*、server:defer |
| Astro Components | コンポーネント構造、Props、slot |
| Project Structure | ディレクトリ構成 |
| Routing | ルーティング規則、動的ルート、優先順位 |
| Content Collections | コレクション定義、ローダー、スキーマ |
| Markdown & MDX | Markdown処理、プロセッサ、プラグイン |
| On-demand Rendering | SSR、アダプター、prerender |
| Endpoints | 静的・サーバーエンドポイント |
| Actions | defineAction、フォーム連携、エラー処理 |
| Images | 画像最適化コンポーネント |
| View Transitions | ClientRouter、遷移ディレクティブ |
| Install and Setup | 動作要件、プロジェクト作成 |
| CLI Reference | CLIコマンドとフラグ |
| Configuration Reference | 設定オプション |
| Upgrade to Astro v7 | v7の変更点 |
| Astro 7 リリースブログ | リリース日と新機能 |
記事一覧
全12章を5つのステップに分けてあります。頭から順に読む前提で並べました。
- 01. Astroとは何か：コンテンツ中心という選択
- 02. Astroの環境構築とプロジェクト構成
- 03. .astroコンポーネントの基本
- 04. Astroのレイアウトとスタイリング
- 05. Astroのファイルベースルーティング
- 06. Astro コンテンツコレクションで記事を管理する
- 07. AstroでMarkdownとMDXを使いこなす
- 08. AstroのアイランドアーキテクチャとUIフレームワーク
- 09. Astroのレンダリングモードとアダプター
- 10. AstroのエンドポイントとActions
- 11. Astroの画像最適化とView Transitions
- 12. Astroのビルドとデプロイ
推定ボリュームと図解
1章あたりおおむね2,000〜4,000字です。通読には2〜3時間くらいかかると思います。
各章には理解を助けるためのMermaid図（SVGに変換して掲載）を用意しています。予定している図解は次のとおりです。
| 章 | 図解の内容 |
|---|---|
| 01 | MPAとSPAのリクエスト処理の違い |
| 02 | 標準的なプロジェクトのディレクトリ構成 |
| 03 | コンポーネントスクリプトとテンプレートの実行タイミング |
| 04 | レイアウトのネスト構造 |
| 05 | ルート解決の優先順位 |
| 06 | コンテンツコレクションのデータフロー |
| 07 | Markdownの処理パイプライン |
| 08 | ハイドレーションのタイミング比較 |
| 09 | 静的生成とオンデマンドレンダリングの流れ |
| 10 | フォーム送信からActions実行までの流れ |
| 11 | 画面遷移のライフサイクルイベント |
| 12 | ビルドからデプロイまでの流れ |
それでは、01. Astroとは何か：コンテンツ中心という選択から始めましょう。