Astro

Astroとは

Astro は、ブログ・ドキュメント・企業サイトのようなコンテンツ中心のサイトを作るためのフレームワークです。最大の特徴は、既定でJavaScriptをブラウザへ送らないことです。

---
// --- で囲んだ部分はビルド時にサーバー側で動く
const posts = await Astro.glob('./posts/*.md')
---
<ul>
  {posts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
</ul>

このテンプレートはビルド時にHTMLへ変換され、出力に残るのはHTMLとCSSだけです。[[SPAとMPA]] の分類でいえば MPA(ページごとにHTMLを返す方式)側で、ページ遷移はブラウザ本来の遷移に任せます。

アイランドアーキテクチャ

とはいえ、検索ボックスやカルーセルのように動きが要る部分もあります。Astro はページ全体をJSで動かすのではなく、必要な部品だけを個別に動かす方法を取ります。この考え方をアイランドアーキテクチャと呼びます。

<SearchBox client:visible />

client:visible は「その部品が画面に入ったら初めて読み込んで動かす」という指定です。他にも client:load(すぐ動かす)・client:idle(暇になったら)があり、部品ごとに読み込みの条件を選べます。

静的な海の中に、動く島が点在している構造です。ページ全体を動かす方式と違い、島が1つ増えてもその島の分しかJSが増えません。

何が向いていて、何が向かないか

画面のほとんどが動くならアイランドの利点は消え、[[React]] を全面に使う構成のほうが素直です。逆に動くのは一部だけなら、Astro は送るJSの量を大きく減らせます。[[Webパフォーマンス最適化]] でいう「そもそも読み込ませない」がフレームワークの既定になっている、と捉えると分かりやすいです。

使い方の特徴

• UIライブラリを混在できる — React・Vue・Svelte の部品を同じプロジェクトに置けます。既存の部品を持ち込みやすい
• Markdown が一級市民 — .md / .mdx をそのままページにでき、frontmatter を型付きで扱えます
• ビルドは [[Vite]] — 開発サーバーの起動と更新反映が速く、設定やプラグインの考え方も共通です
• 出力先を選べる — 既定は静的ファイル。アダプタを足すとサーバー側で都度生成する方式にも切り替えられます

初学者向けポイント

• --- で囲んだ部分はビルド時にだけ動きます。ここに書いた変数はブラウザには渡りません。クリック処理を書いても動かないのは仕様です
• client:* を付け忘れた部品は「表示されるが反応しない」状態になります。動かない部品を見たらまずここを疑います
• 逆に何にでも client:load を付けると、JSを送らない利点が消えます。既定は付けないで、必要になった部品にだけ付けるのが原則です

関連技術とのつながり

• [[SPAとMPA]] — Astro は MPA 側。ページ遷移をブラウザに任せる
• [[SEOの技術基礎]] — 完成したHTMLを返すため、クロールと初期表示に有利
• [[Webパフォーマンス最適化]] — 送るJSを減らすことを既定の挙動にしている
• [[React]] — アイランドとして埋め込める。全面的に動く画面ならこちらが素直
• [[Vite]] — 開発サーバーとビルドの土台

Q: Astroが既定でブラウザへJavaScriptを送らないのはなぜ?
- [ ] JavaScriptに対応していないから
- [x] コンテンツ中心のサイトでは大半のページが動く必要がなく、送らないほうが速いから
- [ ] ビルド時間を短縮するため
解説: ブログやドキュメントは表示できれば足りるページが大半です。必要な部品にだけ後からJSを与える方針を既定にしています。

Q: `client:visible` を付けた部品の挙動はどれ?
- [ ] ページ読み込みと同時に動き始める
- [x] その部品が画面に入った時点で読み込まれて動き始める
- [ ] 常に動かない
解説: 読み込みの条件を部品ごとに選べます。`client:load` は即時、`client:idle` は暇になってから動きます。

Q: Astroが向かない用途はどれ?
- [ ] ドキュメントサイト
- [ ] 企業のコーポレートサイト
- [x] 画面全体が対話的に変わる管理ダッシュボード
解説: 大半が動く画面ではアイランドの利点が消えます。その場合はReactなどを全面に使う構成が素直です。