Astroとは何ですか？

コンテンツ重視のWebフレームワーク。必要な部分だけJavaScriptを読み込む「アイランドアーキテクチャ」により、圧倒的に高速なWebサイトを構築できる。

Astroのポイントは？

デフォルトでJavaScriptゼロのHTMLを出力し、必要な部分だけJSを読み込む。React、Vue、Svelteなど複数のUIフレームワークを混在して使える。コンテンツコレクション機能でMarkdownやMDXを効率的に管理できる。ブログ、ドキュメントサイト、マーケティングサイトなどコンテンツ中心のサイトに最適

【あすとろ】

Astro とは？

💡 JavaScriptを極限まで減らして爆速表示を実現する星

📌 このページのポイント

デフォルトでJavaScriptゼロのHTMLを出力し、必要な部分だけJSを読み込む
React、Vue、Svelteなど複数のUI フレームワークを混在して使える
コンテンツコレクション機能でMarkdownやMDXを効率的に管理できる
ブログ、ドキュメントサイト、マーケティングサイトなどコンテンツ中心のサイトに最適

アイランドアーキテクチャ：静的HTMLの「海」にインタラクティブな「島」が浮かぶ

ひよこ

Astroって他のフレームワークと何が違うの？

ペンギン先生

一番の特徴は「アイランドアーキテクチャ」だよ。ページ全体はJavaScriptなしの静的HTMLとして出力して、インタラクティブな部分だけJSを読み込む「島（アイランド）」として扱うんだ。だからページの表示がめちゃくちゃ速いんだよ

ひよこ

ReactやVueのコンポーネントも使えるの？

ペンギン先生

そこもAstroの面白いところで、React、Vue、Svelte、Solidなど異なるフレームワークのコンポーネントを同じプロジェクトで混在して使えるんだ。チームメンバーそれぞれが得意なフレームワークを使えるよ

ひよこ

どんなサイトに向いてるの？

ペンギン先生

ブログ、ドキュメントサイト、コーポレートサイトなど「コンテンツが主役」のサイトに最適だよ。逆にダッシュボードやSNSのような複雑なインタラクションが多いアプリには不向きかな

ひよこ

Next.jsやNuxtと比べてどうなの？

ペンギン先生

Next.jsやNuxtはアプリケーション寄り、Astroはコンテンツサイト寄りという棲み分けだね。Astroはビルド後のJSが圧倒的に少ないからLighthouseスコアが高くなりやすい。実はこのブログもAstroで作られているんだよ。View Transitionsにもネイティブ対応していて、ページ遷移のアニメーションも簡単に実装できるんだ

まとめ：ざっくりこれだけ覚えればOK！

「Astro」って出てきたら「JS最小限で超高速なWebフレームワーク」と思えればだいたいOK！

📖 おまけ：英語の意味

「Astro」＝星・宇宙

💬 宇宙（Astro）のように広大なWebの世界で、軽量かつ高速に輝くサイトを作るという思いが込められているんだよ

← 用語集にもどる