学習ロードマップ
Astro で高速な静的サイト構築
MPA + 部分的ハイドレーションの Astro で、コンテンツ中心サイトを手間少なく高速に組むためのロードマップ。ブログや LP、ドキュメントサイトを想定。
SCROLL TO BEGIN
学習ロードマップ
MPA + 部分的ハイドレーションの Astro で、コンテンツ中心サイトを手間少なく高速に組むためのロードマップ。ブログや LP、ドキュメントサイトを想定。
このロードマップが扱うもの
このロードマップは、ブログ・LP・ドキュメントサイトなどコンテンツ中心の Web サイトを、軽量かつ保守しやすい形で作りたいエンジニアやテックライター寄りの人を対象にしています。学び終えたときには、Astro のアイランドアーキテクチャを理解し、Markdown / MDX ベースのサイトを SEO と配信速度を両立させながら構築・運用できる状態を目指します。
このロードマップの全体像
このロードマップは、ブログ・LP・ドキュメントサイトなどコンテンツ中心の Web サイトを、軽量かつ保守しやすい形で作りたいエンジニアやテックライター寄りの人を対象にしています。学び終えたときには、Astro のアイランドアーキテクチャを理解し、Markdown / MDX ベースのサイトを SEO と配信速度を両立させながら構築・運用できる状態を目指します。
1. Astro の考え方を掴む: サーバー中心の MPA、部分的ハイドレーション、フレームワーク非依存のコンポーネントという設計思想を整理します。 2. プロジェクト構成とルーティング: src/pages/ ベースのルーティング、レイアウト、共有コンポーネントの置き方を身につけます。 3. Content Collections で Markdown/MDX を扱う: スキーマ定義、フロントマター、型安全なコンテンツ取り回しを学び、ブログ的構造を組み立てます。 4. パーシャルハイドレーションの選び方: React / Vue / Svelte アイランドを client:* ディレクティブで適切に選び、JavaScript の配信量を最適化します。 5. SEO・画像・サイトマップ: メタタグ、<Image> コンポーネント、sitemap / RSS の自動生成を設定し、公開運用に必要な基礎を揃えます。 6. デプロイと継続運用: 静的ホスティングやエッジへのデプロイ、コンテンツ更新フロー、パフォーマンス計測を日常業務に組み込みます。
Astro は一見シンプルですが「アイランドをどこに置くか」で体験と保守性が大きく変わります。重い UI を全部アイランド化するとメリットが薄れるため、本当にクライアント側でインタラクションが必要な部分を見極める判断力が必要です。動的機能を増やすと SSR アダプタやエッジ実行の知識も求められます。周辺では Markdown/MDX、基本的な HTML/CSS と Web パフォーマンス、Core Web Vitals、SEO の基礎、ホスティング(静的 / エッジ)の仕組みを並行して理解しておくと、Astro の強みを素直に活かせます。
ロードマップ
第 1 章
Webサイト高速化のための「静的サイトジェネレーター活用入門」。SSG というジャンルの全体像と、Astro/Next/Hugo などの選定軸を最初に整理する。
動かして学ぶ！Next.js/React 開発入門。Astro と並走しがちな React/Next の基本がここで揃う。
実践 Next.js — App Router で進化する Web アプリ開発。SSG/SSR/ISR の使い分けを Next.js で深掘り、Astro の MPA 思想との対比軸を作る。
実践 TypeScript: BFF と Next.js&Nuxt.js の型定義。Astro 上のコンテンツ層を型で守る作法。
達人が教える Web パフォーマンスチューニング — ISUCON から学ぶ高速化の実践。「静的に出す」だけでは届かない領域の地力。
Cloudflare Workers 実践ガイド — エッジで実現する Web アプリ。Astro の代表的デプロイ先である CF Pages/Workers の運用観。