Astroとは？表示速度が速いJSフレームワークをReact経験者が触ってみた

また新しいフレームワーク？React覚えたばかりじゃん

考え方はReactに近いから、そこまで一から学び直す感じじゃなかったよ

Astroは表示速度に特化したフレームワーク

Astroの一番の特徴は、表示速度を重視したウェブサイトを作ることに特化している点です。表示速度が重要な理由はシンプルで、ページの読み込みが遅いと、それだけでユーザーが離脱しやすくなり、結果的にSEOにも悪影響が出るとよく言われています。

実際、体感で「重い」と感じたページはすぐ閉じてしまう、という経験は多くの人にあるはずです。エンジニアがリファクタリングをしたり、画像を軽量化したりするのも、突き詰めればこの表示速度を上げるためです。

なぜAstroは速いのか

Astro公式のドキュメントには、おおよそ次のような説明があります。

コンポーネントのフロントマター内にはJavaScriptを書けますが、そのコードはビルド時に処理され、最終的にユーザーのブラウザへ送られるページからは基本的に取り除かれます。つまりデフォルトでは、ページにJavaScriptがほとんど含まれない状態で配信されます。

Reactなどはコンポーネントの仕組み上、ブラウザ側でJavaScriptを読み込んで動かす部分が多くなりがちですが、Astroは「必要な部分にだけ後からJavaScriptを追加する」という考え方（アイランドアーキテクチャと呼ばれます）を採用しているため、初期表示が軽くなりやすい、という仕組みです。

実際にAstroテーマでポートフォリオサイトを作ってみた

百聞は一見にしかずということで、実際にAstroの公式テーマを使ってポートフォリオサイトを作ってみました。（実際に作ったAstroのポートフォリオサイトはこちら）試しにアニメーションするイラストを組み込んでみたところ、開発時と公開後で問題なく同じ挙動をしていました。

それだけならReactとかVueでもできそうじゃない？

正直、見た目の動き自体は同じ。違うのは裏側で送られてるJavaScriptの量なんだ

Astroテーマのダウンロード手順

1. Astro公式のThemesページから好きな無料テーマを選ぶ（今回は「Astroship」を使用）
2. ターミナル（Windowsはコマンドプロンプト、Macはターミナル）を開き、作業用フォルダに移動する
3. git clone (GitHubのURL)を実行するとひな形が完成

なお、テーマをGitHubから直接cloneする代わりに、Astro公式が用意しているコマンドで最初からテンプレートを指定して作成することもできます。

npm create astro@latest my-project -- --template ユーザー名/リポジトリ名

この方法はAstro公式のcreate-astroパッケージのドキュメントで紹介されている手順です。

まとめ

• Astroは表示速度を重視したサイト作りに特化したJSフレームワーク
• デフォルトでJavaScriptを最小限にする仕組みのため、SEOにも良い影響が期待できる
• React・Vueの経験があれば、学習コストは比較的抑えられる

ReactやVueに比べるとリファレンスや日本語情報はまだ少なめですが、その分「表示速度で差別化したいサイト」を作るときの選択肢として覚えておいて損はないフレームワークだと感じています。