個人的に結構おすすめな構成だからやってみてほしい。
Astro とは
Astro は高速で軽量なウェブサイトを構築できる静的サイトジェネレーターです。
SSR もできますが、私は SSG だけで使っています。
特徴は「必要な箇所だけに JavaScript を適用する」仕組みで、初期表示を極めて軽く保てる点です。
基本的には .astro ファイルに html や他の処理を書いていき、ビルドすることで静的な html ができあがります。
SPA のように 1 つの html が出来上がるわけではなく、pages ディレクトリに配置した .astro ファイルの数だけ html が生成されます。
もちろん、[id].astro などとしておいて、複数の id に対応する分の html を作成することもできます。
細かく .astro ファイルを作ることでコンポーネント分けすることもできます。
また、React (や Vue) の形式にも対応しており、.tsx ファイルなども使って書くこともできます。
Router のためだけにこれらのライブラリを使っている場合、生成される html には js への依存がなくなります。
バニラJS とは
なにもライブラリを使っていない素の Javascript のこと。
なぜ Astro + バニラJS なのか
私は当初 Astro + React で書いていました。
tsx に慣れていたことと、ルーティングのためだけに React を使っていたので、生成される html には js への依存が無い想定でした。
しかし気づくといつのタイミングからかクライアント側でも React へ依存している状態になっていました。
おそらく useState などのクライアント側でリアクティブに動かしたい処理がどこかに入っていたんだと思います。
こんな感じで「書いた処理によってクライアント側が React に依存したりしなかったりする」という状況がちょっと嫌だったので、クリーンな Astro だけで構築することにしました。
そうなると React コンポーネントの中で js 処理を書く、みたいなことができなくなります。
そこで バニラJS をそのまま書くことにしました。
どんなところに js を使うか
私が作ったサイトには「画像をクリックすると音楽が再生される機能」があります。
この機能を実現するために js を記述しています。
このサイトで開発者ツールとかを開いて見てもらうと分かるのですが、不要な js の取得が無いためだいぶ軽めのサイトになっています。
プロジェクトのセットアップ
2025/10/01 時点では以下のコマンドでセットアップできます。
npm create astro@latest
いくつか質問されるので、以下のように答えました。
これで最低限起動できるだけのファイルが生成されるので、
npm run dev
で開発サーバーを起動して開発できます。
試しに src/pages/about.astro を作って http://localhost:4321/about にアクセスすれば、ページが作成されているのが確認できます。
npm run build すれば dist フォルダに html ファイルとして出力されます。
バニラJS の組み込み
.astro ファイルに script タグを追加してそこに js を書けば OK です。
<div>
<button id="my-button">Click Me</button>
</div>
<script>
document.getElementById('my-button')?.addEventListener('click', () => {
alert('Button clicked!');
});
</script>
デプロイ
Cloudflare Workers にデプロイしています。
Cloudflare Pages へのデプロイという選択肢もあるのですが、今 Pages は非推奨みたいです。
GitHub リポジトリを連携するだけで良かったので Pages も楽だったんですが。
Workers では、とても簡単にバックエンドの API を作ることができます。
私は「音楽のダウンロード数を管理する API」を作成し、.astro から呼び出すようにしています。
終わりに
ちょっとしたサイトを作るときはもう Astro でいいかなって思っています。