【2026年版】Astroの始め方 — ゼロJSで爆速Webサイトを作る完全ガイド

AstroはWebサイトを作るためのフレームワークで、最大の特徴は「デフォルトでJavaScriptをゼロにする」ことなんだ。普通のフレームワークはページ全体をJavaScriptで動かすけど、Astroは静的なHTMLを出力して、必要な部分だけJavaScriptを読み込む。だから表示速度がめちゃくちゃ速いんだよ。

もちろん！ブログやドキュメントサイト、ポートフォリオみたいなコンテンツ中心のサイトならJavaScriptがなくても十分なんだ。ボタンのクリックやフォームみたいなインタラクティブな部分だけ、あとで説明する「Islands Architecture」で部分的にJSを足せるよ。

ターミナルで「npm create astro@latest」を実行するだけだよ。対話形式でプロジェクト名やテンプレートを選べるんだ。TypeScriptの設定やGitの初期化もまとめてやってくれる。作成が終わったら「npm run dev」で開発サーバーが立ち上がるよ。

srcフォルダの中にpagesディレクトリがあって、そこに.astroファイルを置くとそのままURLになるんだ。たとえばpages/about.astroを作れば /about でアクセスできる。レイアウトはlayoutsディレクトリに共通テンプレートを作って、各ページから読み込む形だね。.astroファイルは上部にJavaScriptを書くフロントマター部分と、下部にHTMLテンプレートを書く部分に分かれているよ。

そこで活躍するのが「Content Collections」だよ。src/contentフォルダにMarkdownファイルをまとめて置いて、スキーマで型を定義できるんだ。たとえばblogコレクションを作れば、タイトルや日付のバリデーションを自動でやってくれる。型安全にコンテンツを扱えるから、記事が増えても管理しやすいんだよ。

静的なHTMLの「海」の中に、インタラクティブなコンポーネントの「島（Island）」が浮かんでいるイメージだよ。たとえばページ全体は静的HTMLだけど、検索バーだけReactコンポーネントにする、みたいなことができるんだ。コンポーネントにclient:loadやclient:visibleといったディレクティブを付けると、その部分だけブラウザでJavaScriptが実行されるよ。

それがAstroのすごいところで、React・Vue・Svelte・Solid・Preactなど複数のUIフレームワークを同じプロジェクト内で混在できるんだ。インテグレーションを追加するだけで使えるようになる。既存のReactコンポーネントをそのまま持ってきて、Astroプロジェクトに組み込むこともできるよ。

できるよ！Astroはデフォルトでは静的サイト生成、つまりSSGモードでビルド時にHTMLを生成するんだけど、設定でSSRモードに切り替えられるんだ。SSRならリクエストごとにサーバーでページを生成できるから、ユーザーごとに違う内容を返したい場合に便利だね。ページ単位でSSGとSSRを混在させることもできるよ。

SSGモードならCloudflare PagesやVercel、Netlifyなど大体どこでもデプロイできるよ。GitHubリポジトリを連携するだけで自動デプロイが組める。SSRモードの場合はアダプターが必要で、たとえばCloudflare Workersなら専用のアダプターをインストールして設定ファイルに追加するだけだよ。

コンテンツ中心のサイトが最も得意だね。ブログ、ドキュメントサイト、マーケティングページ、ポートフォリオなんかはAstroの強みを最大限に活かせる。逆にダッシュボードやSNSみたいに画面全体がインタラクティブなアプリにはNext.jsやNuxtの方が向いているよ。適材適所で使い分けるのが大事だね。

いい選択だね！Astroの公式ドキュメントにブログチュートリアルがあるから、それを一通りやるのがおすすめだよ。View Transitionsでページ遷移アニメーションを付けたり、画像最適化やRSSフィード生成もビルトインで対応しているから、意外と少ないコードで本格的なブログが作れるよ。