はじめてのAstro：静的サイトが楽しくなる発見

コーディング
この記事は約11分で読めます。

こんにちは！今回は、静的サイト生成（SSG）に強いフレームワーク「Astro（アストロ）」について書きたいと思います。
実際の画面とマークアップが素直に対応する気持ちよさ、ReactなどのUIフレームワークを“必要なところだけ”使える自由さ、Markdownでサクサク記事を増やせる生産性など、入門の最初の一時で「楽しい」となるポイントを紹介します。
「SPAで全部やるのが正義？」とか「結局WordPressでよくない？」というモヤモヤにも、ツッコミを入れていきます。

要約

  • Astroはコンテンツ中心のサイト（ブログ、ドキュメント、LP等）を高速に作る設計です。デフォルトでクライアントJSゼロで配信し、必要な部分だけ“島（Island）”としてJSを足します。
  • ルーティングはファイルベースで、src/pages/ に置いた .astro / .md がそのままURLになります。設定ファイルとにらめっこする時間が減ります。
  • .astro ファイルのフロントマター（先頭の ---）でサーバ側の処理やデータを用意し、下にHTML風テンプレートを書く、という2段構えが基本です。
  • レイアウト + <slot /> でヘッダー／フッターを共通化。MarkdownやMDXにも同じレイアウトを適用できます。
  • React/Svelte/Vueなどは統合コマンドで追加し、client:load 等のディレクティブで“どのタイミングで水和（Hydration）するか”を選べます。
  • ブログはMarkdownだけでもOK。Content Collectionsを使うとフロントマターの型安全やクエリが楽になり、大規模化に強くなります。
  • 形から入りたい派はAstroWindのような公式テーマから始めると、ヒーローや機能グリッド等のセクションを積み木感覚で配置できます。

1. 「見た目＝マークアップ」の素直さをまず体験

Astroのページを開いてコードを見ると、ヒーロー、フィーチャー、FAQ…と画面の構造がそのままコンポーネント名や要素として読めることに気づきます。
たとえば Hero コンポーネントが最上部の大きな見出しと画像を担当し、下に Features が続く、といった具合です。ここには過剰な抽象化がありません。ReactのJSXに近い書き心地ですが、JSを“減らす”思想が根っこにあります。Astroは島（Island）アーキテクチャで、ページ全体は静的HTML、インタラクティブな箇所だけ小さなJSを載せる方針です。結果として、重いJSのダウンロードを避け、体感の軽さを得やすいです。

2. Astroはどのポジション？「SPAでもRailsでもCMSでもない」

AstroはReactやVueのような“全ページが動的”前提のSPAフレームワークとは立ち位置が違います。コンテンツ駆動サイトを“まず速く”するために、ゼロJS配信をデフォルトにして、必要な箇所にだけJSを足す設計です。
しかも、VueやReactなど好きなUIフレームワークを同居させられます。これが「全部をSPAにしない」という実装の自由度につながります。

3. 「静的サイト生成（SSG）」が良い理由

会社のLP、製品ドキュメント、技術ブログ…。ユーザーごとに変わらない情報を中心にしたサイトは、ビルド時にHTMLにしてしまえば速いです。
SSGは古典的に見えますが、Hugo、Jekyll、Gatsbyなど選択肢が揃って成熟しています。AstroはそこにIslandアーキテクチャと柔軟な統合を持ち込んだ感じです。コンテンツ量が増えても“重さ”が比例しづらいのが実用的です。
CMSのように管理してくれるシステムをいれなくても、充分というわけです。ただし、運用する側のスキル担保等が難しい場合はどうしても、という判断になるかもしれません。

4. Astroの基本：.astro ファイルとフロントマター

Astroの1ファイルは、上部のフロントマター（---で囲う）と、下部のテンプレートで構成されます。フロントマター内はビルド時（またはサーバ）に実行され、下のHTMLテンプレートに値を差し込みます。
最初の一歩はコレでOKです。

---
// ここはフロントマター（サーバ側で実行）
const title = "こんにちはAstro";
const features = ["速い", "書きやすい", "必要なとこだけJS"];
---

<html lang="ja">
  <head><title>{title}</title></head>
  <body>
    <h1>{title}</h1>
    <ul>
      {features.map(f => <li>{f}</li>)}
    </ul>
  </body>
</html>

この「上で用意→下で使う」二段構えは、学習コストを下げつつテンプレートの見通しを良くしてくれます。

5. レイアウトと <slot />：ヘッダー／フッターは一度だけ書く

全ページで同じヘッダーとフッターを使いたい、というのは定番の要件です。Astroではレイアウトコンポーネントを作って <slot /> にページ固有の中身を流し込むだけです。

---
// src/layouts/BaseLayout.astro
const { title = "MySite" } = Astro.props;
---
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>{title}</title>
  </head>
  <body>
    <header>共通ヘッダー</header>
    <main><slot /></main>
    <footer>共通フッター</footer>
  </body>
</html>

Markdown/MDXのページからもこのレイアウトを指定できます。サイトの骨格を1か所に集約できるので、保守の心理的負担が目に見えて減ります。

6. “必要なだけReact”：client:load などで水和を制御

Astroは統合コマンドでReactなどを追加できます。Reactの場合は次の1行です。

npx astro add react

すると、.jsx をインポートしてそのまま使えます。しかもデフォルトではサーバレンダリングなので、ユーザーにReact本体を配らずに静的HTMLとして表示されます。インタラクティブにしたい場合だけ client:load や client:visible を付けて“どのタイミングでJSを読むか”を選びます。

---
// src/pages/index.astro
import Counter from "../components/Counter.jsx";
---
<Counter client:load />

“島”ごとに独立して水和されるので、重いウィジェットが他を巻き込んで遅くなる状況を避けやすいです。

7. MarkdownとContent Collectionsでブログが楽になる

ブログ記事はMarkdownでどんどん増やせます。フロントマターに title や tags を入れて、リストやタグページを自動生成するのが基本パターンです。さらに規模が大きくなるなら、Astro v5で強化されたContent Collectionsを使うと、フロントマターのスキーマ定義や型安全、クエリが快適になります。コンテンツ量が増えても、統一されたメタデータで破綻しにくくなります。

8. ルーティングは“置いたらできる”：ファイルベースの気楽さ

src/pages/ に about.astro を置けば /about ができます。posts/[slug].astro と書けば、/posts/xxx のような動的ルートも一気に展開できます。
別途ルーティング設定を持たず、「ファイル＝URL」という素朴さに救われます。ちょっとした社内ページや検証用サイトでは、これだけで“十分に速く、壊れない”を実現できます。

9. 形から入りたい派へ：テーマ「AstroWind」でとっとこハム太郎

UIの当たりを付けたいときはAstro公式テーマの「AstroWind」が便利です。Tailwind CSS組み合わせ済みで、ヒーロー、機能カード、FAQなどのセクションを積み木感覚で配置できます。まずはテキストと画像を差し替えて、次にレイアウトを自社サイトらしく整える、という二段構えがやりやすいです。

10. デプロイは軽やかに：Zipしてドラッグ&ドロップでもOK

本番はもちろんCI/CDで自動化してよいのですが、一発で雰囲気共有したいドラフトには軽い手段が嬉しいです。Astroは npm run build すると静的ファイルの束が出力されます。これをZipしてTiiny Hostのようなサービスにドラッグ&ドロップすると、そのまま公開できます。レビューやABテストのたたき台に向いています。

11. よくあるアドバイスへの小さな違和感

「全部Reactで作って、あとで最適化しよう」――これは後から技術的負債になりがちです。コンテンツ中心なのに、初手からSPAにすると不要なJSが常に付いて回るからです。Astroは“軽い既定値”を選べそうです。

「とりあえずWordPressで」も、もちろん正解の場面があります。ただ、ヘッドレスCMS + Astroの組み合わせだと、“表示側”は静的HTMLとして配信できるので高速 + セキュアになりやすく、サーバの運用も軽くなります。Islandアーキテクチャで部分的なインタラクションも素直に足せます。

12. とはいえ：Astroが万能という話ではありません

高度にリアルタイムなダッシュボードや、複雑なアプリケーション状態をページ全体で共有するようなケースは、最初からSPA（あるいはSSR+CSRのハイブリッド）のほうが自然なことがあります。Astroでも状態共有のレシピはありますが、要件次第では“全部React”のほうが総コストが下がることもあります。設計は“サイトの性質”から入るのがよさそうです。

13. ミニ実践：最小構成で“触ってわかる”まで

まずは新規プロジェクトを作ります。

# 1) 新規作成
npm create astro@latest

# 2) 開発サーバ
npm run dev

# 3) Reactを必要なだけ追加（任意）
npx astro add react

# 4) 本番ビルド
npm run build
  • src/pages/index.astro を作って、見出しと簡単な本文を書きます。
  • src/layouts/BaseLayout.astro を用意して <slot /> で中身を流し込みます。
  • src/content/ に記事（.md）を置くなら、Content Collectionsの導入でフロントマターを整えましょう。
    この3ステップだけで、“軽い・見通しが良い・増やしやすい”の三拍子をすぐに体感できます。

まとめ

Astroの良さは、派手な魔法ではなく「最初から軽い選択肢がデフォルト」という設計にあります。
コンテンツ中心のサイトなら、無理にSPAで全体を包まず、静的HTML + 必要な島だけJSという素直な形で始められます。結果として、読みやすいマークアップ、壊れにくい構造、速い配信が手に入ります。
大切なのは、「自分のサイトは動的である必要があるのか？」をいったん言語化してから技術を選ぶことだと感じます。Astroは、その対話に気楽な解をくれるフレームワークだと思います。

参考リンク

タイトルとURLをコピーしました