【あすとろ】

Astro とは?

💡 JavaScriptを極限まで減らして爆速表示を実現する星
📌 このページのポイント
Astro のアイランドアーキテクチャ 静的HTML(JavaScript なし) ヘッダー(静的) 記事コンテンツ (静的HTML) アイランド React カウンター JS読み込み アイランド Vue 検索 JS読み込み 大部分: 静的HTML(JS 0kb) 必要な部分だけ JS を読み込み
アイランドアーキテクチャ:静的HTMLの「海」にインタラクティブな「島」が浮かぶ
ひよこ ひよこ

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

ペンギン先生 ペンギン先生

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

ひよこ ひよこ

ReactVueコンポーネントも使えるの?

ペンギン先生 ペンギン先生

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

ひよこ ひよこ

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

ペンギン先生 ペンギン先生

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

ひよこ ひよこ

Next.jsNuxtと比べてどうなの?

ペンギン先生 ペンギン先生

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

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「Astro」って出てきたら「JS最小限で超高速なWebフレームワーク」と思えればだいたいOK!
📖 おまけ:英語の意味
「Astro」 = 星・宇宙
💬 宇宙(Astro)のように広大なWebの世界で、軽量かつ高速に輝くサイトを作るという思いが込められているんだよ
← 用語集にもどる