Astroは2021年6月、米国のフレッド・K・ショット（Fred K. Schott）らが公開したコンテンツ重視のWebフレームワークです。彼は以前Snowpackというビルドツールを開発しており、その知見を基に「ページの大半は静的HTML、必要な部分だけインタラクティブなコンポーネントを差し込む」Island Architecture（島構成）を中核に据えました。React・Vue・Svelte・Solidなど複数フレームワークのコンポーネントを同じプロジェクト内に共存させられる点も特徴で、ブログやドキュメント、マーケティングサイトを中心に急速に採用が広がっています。
この記事の目次
- Astroの設計コンセプト
- Astro登場の背景
- 実際の使い方
- Next.js・SvelteKit・Hugoとの比較
- まとめ
Astroの設計コンセプト
Astroの中心思想は、Islands Architectureと呼ばれる部分的Hydration戦略です。ページ全体はビルド時に静的HTMLとして書き出され、JavaScriptが必要なコンポーネントだけが「島」としてクライアントで起動します。
もうひとつの特徴は、コンポーネントフレームワークを問わない統合（@astrojs/react、@astrojs/vue、@astrojs/svelte、@astrojs/solidなど）。1つのページ内でReactで書いたUIコンポーネントとSvelteで書いたウィジェットを並べることも可能で、移行段階のプロジェクトにも採用しやすい設計です。デフォルトでJavaScriptを送らないことを基本にしているため、CWV（Core Web Vitals）スコアが取りやすく、コンテンツサイトでは特に強みを発揮します。
Astro登場の背景
Fred K. Schottは2019年頃から「ESMネイティブのフロントエンドビルダー」としてSnowpackを開発し、Webpackに代わる選択肢として注目を集めていました。ただSnowpackはバンドラ単体であり、彼はその上に「コンテンツ重視のフレームワーク」を載せる必要性を感じてAstroの開発に着手。2021年6月のベータ公開時点で「Islands Architecture」「複数フレームワーク統合」「ゼロJavaScript既定」といった現在の特徴は揃っていました。
2022年8月にAstro 1.0が正式リリースされ、2023年8月のAstro 3でView Transitions APIに対応、2024年12月公開のAstro 5ではContent Layer（Markdown/MDX/外部CMSを統一API化）やServer Islands、TypeScript型推論の刷新などが入りました。Snowpack自体は2022年に開発終了し、Astroチームは内部ビルドにVite（Evan Youによる後継）を採用。ドキュメントサイトとして、Cloudflare Docs、Vercel Docs、Resend Docsなど採用事例の公開が増えています。
実際の使い方
Astroプロジェクトはnpm create astro@latestで作成し、src/pages下のファイルがそのままルートになります。.astro拡張子のテンプレートは前段の---ブロックがTypeScript（フェッチ等を記述）、その後にHTML/JSX風のマークアップが続く構造。ブログのようにMarkdownを使う場合は.md/.mdxを置けばそのままページ化され、Content Collectionsを使えばfrontmatterを型付きで管理できます。
ReactやSvelteのコンポーネントを使うときは、@astrojs/reactや@astrojs/svelteといったインテグレーションを追加するだけ。import Counter from '../components/Counter.jsx'して
Next.js・SvelteKit・Hugoとの比較
Astroが最もよく比較されるのはNext.jsとSvelteKitです。Next.jsはReactベースの巨大エコシステムを背景に、Webアプリ全般で使われる万能型。Astroはアプリよりも「コンテンツが中心のサイト」――ブログ、ドキュメント、コーポレートサイト、ランディングページ――を主戦場としており、JavaScriptをほぼ送らない初期ロードの軽さで差別化されています。
静的サイトジェネレータの古参としては、Go製のHugo（2013年、スティーブ・フランシア）やJavaScript製のEleventy（2018年、ザック・リーザーマン）があります。Hugoはビルド速度で群を抜く一方、テンプレート言語がGo独自で学習コストが高め。EleventyはJavaScriptに寄り添う設計ですがUIインタラクションは別途用意する必要があります。Astroは「静的サイトの軽さとモダンUIライブラリの便利さ」を両取りする位置どりで、MarkdownベースのドキュメントサイトとReact/Svelteの動的部品を同時に扱いたいプロジェクトで選ばれます。
まとめ
AstroはIsland Architectureとマルチフレームワーク統合という独自路線で、コンテンツ中心のサイト構築における新しい標準を切り開きました。ブログ・ドキュメント・マーケティングサイトを「速く軽く、しかしモダンな部品で」作りたい場面では、Next.jsやSvelteKitと並ぶ主要な候補です。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント