こんにちは！現役エンジニアの yukkes です。今回は、私が個人的に開発している学習サイトで、Astroというフレームワークを使って「爆速表示」を実現するために行った様々な工夫について、コード例を交えながらご紹介したいと思います。
個人開発した学習サイトは「AWS認定試験」、「GitHub認定試験」の演習問題を各200問用意しました。ランダムで10問ずつ出題されます。
1. はじめに：爆速サイトへの挑戦！
皆さんはウェブサイトの表示速度、気にしていますか？ページの読み込みが遅いと、ユーザーはイライラしてすぐに他のサイトに行ってしまいますよね。Googleも表示速度を重要視しているので、SEOの観点からも高速化は必須です。
「どうすればもっと速くなるんだろう？」
そんな疑問を解決すべく、私はAstroというフレームワークに出会い、このサイト開発を通して様々な高速化テクニックを実践してみました！
2. なぜAstroを選んだのか？
世の中にはたくさんのウェブフレームワークがありますが、私がAstroを選んだ最大の理由は、その「パフォーマンス最優先」という設計思想に惹かれたからです。Astroは、デフォルトで高速なサイトが作れるように設計されています。
3. Astroのすごいところ：アイランドアーキテクチャ
Astroの核となるのが「アイランドアーキテクチャ」です。これは、ウェブサイト全体を一つの大きなJavaScriptの塊にするのではなく、必要な部分（インタラクティブなコンポーネント）だけを「アイランド」として切り出し、そこにだけJavaScriptをロードするという考え方です。
これにより、ページの大部分は静的なHTMLとして超速で表示され、JavaScriptの実行が必要な部分だけが後からハイドレーションされます。結果として、初期表示速度が劇的に向上し、ユーザーはすぐにコンテンツを見ることができます。
4. 静的サイト生成 vs サーバーサイドレンダリング
Astroは、SSG（静的サイト生成）とSSR（サーバーサイドレンダリング）の両方に対応しています。
- SSG: ビルド時に全てのページをHTMLファイルとして生成。CDNとの相性抜群で、超高速配信が可能。ブログ記事など、コンテンツがあまり頻繁に変わらないサイトに最適。
- SSR: リクエストごとにサーバーでページを生成。ユーザーごとに内容が変わるような動的なサイトに。
このプロジェクトでは、Cloudflare Pagesにデプロイしているので、SSGで動作しています。サイトの特性に合わせて最適な方を選べるのは嬉しいポイントです。
5. 画像の最適化、徹底してます！WebP化で表示速度アップ
ウェブサイトの容量で一番場所を取りがちなのが画像です。画像のファイルサイズが大きいと、ページの読み込み速度にダイレクトに影響します。そこで私は、より圧縮率の高いWebP形式を積極的に活用しました！
トップページの画像は .png と .webp の両方のファイルを用意しています。
<picture>
<source srcset="/AWS-Certified-DevOps-Engineer-Professional_badge.webp" type="image/webp">
<img src="/AWS-Certified-DevOps-Engineer-Professional_badge.png" alt="AWS Certified DevOps Engineer Professional Badge">
</picture>
このように <picture> 要素を使えば、WebPに対応しているモダンなブラウザには軽いWebP画像を、非対応のブラウザにはPNG画像を自動で配信できます。これで画像読み込みがかなり速くなりました！
6. JavaScriptは最小限に！外部ファイル化と賢い読み込み
Astroのアイランドアーキテクチャのおかげで、デフォルトでJavaScriptは少なくなりますが、自分で書くJavaScriptも最適化が必要です。
このサイトの演習問題のロジックは、 以下scriptにまとめています。
<script src="/scripts/exam-app.js"></script>
HTMLの <script> タグで外部ファイルを読み込むことで、HTMLの解析やレンダリングをブロックせずに済みます。さらに、defer や async 属性を適切に使うことで、JavaScriptの実行タイミングをコントロールし、ページの表示を優先させることができます。
7. Astroのイベントを使いこなす (astro:page-load)
AstroでクライアントサイドのJavaScriptを実行する際に便利なのが、Astroが提供するイベントです。public/scripts/exam-app.js では、astro:page-load イベントを使っています。
document.addEventListener("astro:page-load", () => {
// ページが完全にロードされてから実行したい処理
// 例：試験データの読み込み、イベントリスナーの設定など
// ...
});
このイベントは、Astroが新しいページに遷移してDOMの準備ができた後に発火します。これにより、ページの初期描画が終わってからJavaScriptの処理を開始できるため、ユーザーはすぐにコンテンツを見ることができ、その後にインタラクティブな要素が利用可能になります。
8. スッキリURLでSEOにも強く！URLパスルーティング
以前は試験の種類をURLの最後に ?exam=clf-c02 のようにクエリーパラメータで渡していましたが、これを /exam/clf-c02 のようにURLパスで渡す形式に変更しました。
これは、src/pages/exam/[param].astro というAstroの動的ルーティング機能を使って実現しています。[param] の部分がURLの /exam/ の後に続く部分とマッチします。
URLパスを使うことで、URLがより分かりやすくなり、キャッシュ効率も向上します。SEOの観点からも有利になりますね。
9. CDNにお任せ！Cloudflare Pagesで世界中に爆速配信
作ったサイトは、世界中のユーザーに速く届けたいですよね！そこで私はCloudflare Pagesを利用しました。
astro.config.mjs にCloudflareアダプターを設定するだけで、AstroがCloudflare Pagesに最適化されたビルドを出力してくれます。
adapter: cloudflare({
platformProxy: {
enabled: true,
},
}),
Cloudflareの強力なCDN（コンテンツデリバリーネットワーク）を使うことで、サイトのコンテンツが世界中のエッジサーバーにキャッシュされ、ユーザーは最寄りのサーバーからコンテンツを取得できます。これにより、どこからアクセスしても爆速な表示が実現できます。
10. AIが作問！？Gemini 2.5 ProとGoogle AI Studioの活用
さて、ここからは少しユニークな取り組みについてご紹介します。このサイトの核となる「問題」は、なんとGoogle AI StudioとGemini 2.5 Proという高度な生成AIを使って作成しました！
Gemini 2.5 Proは、大量のテキストやコードを学習しており、複雑な指示にも従うことができます。さらに、PDFやMarkdownファイルなどのドキュメントを読み込んで、その内容に基づいた応答を生成する能力（「コンテキストウィンドウ」機能）を持っています。
この機能を利用して、私はAWSやGitHubの公式ドキュメント、公開されているサンプル問題、学習ガイドなどをGemini 2.5 Proに読み込ませました。
11. プロンプトエンジニアリングの重要性
AIに高品質な問題を作成させるためには、「プロンプト」が非常に重要です。どのような形式で、どのような内容の問題を、いくつ作成してほしいのか、といった具体的な指示をAIに与える必要があります。
私は試行錯誤を重ね、以下のような点を意識してプロンプトを作成しました。
- 問題の形式（選択肢の数、正解の数など）を明確に指定
- 問題の難易度や出題範囲を指定
- 解説を含めるように指示
- 出力形式をJSONなどの構造化データで指定
これにより、Gemini 2.5 Proは指定した形式で、学習ガイドに基づいた実践的な問題を生成してくれました。プロンプトの質が、AIの出力の質を大きく左右することを実感しました。
12. 著作権に配慮した問題作成
AIに問題を作成させる際に、特に注意したのが著作権です。Udemyなどで販売されている問題集をそのままAIに読み込ませて類似問題を作成させることも技術的には可能かもしれませんが、これは著作権侵害にあたる可能性があります。
私が作成したアプリでは、著作権の問題を避けるため、公式が公開している情報や、一般的な知識に基づいた問題作成に留めています。個人学習の範囲であれば問題集を参考にすることも考えられますが、公開するアプリケーションで利用する場合は、必ず著作権に配慮する必要があります。
13. VSCodeとGitHub Copilotで開発効率アップ
開発プロセス全体を通して、VSCodeとGitHub Copilotが強力な味方になってくれました。
GitHub Copilotは、コードの補完や提案をリアルタイムで行ってくれるAIペアプログラマーです。Astroのコンポーネント開発、JavaScriptのロジック実装、CSSスタイリングなど、様々な場面でCopilotの支援を受けました。
例えば、 public/scripts/exam-app.js のようなJavaScriptファイルを書く際にも、Copilotが関数名や変数名、コードのパターンなどを提案してくれるので、コーディング速度が格段に向上しました。
VSCodeの使い慣れた環境で、CopilotのようなAIツールを活用することで、開発効率を大幅に向上させることができました。
14. まとめ：Astroと最新技術で爆速開発を楽しもう！
今回は、Astroを使ったウェブサイト開発で実践した高速化の工夫と、AIを活用したコンテンツ作成についてご紹介しました。
- AstroのアイランドアーキテクチャでJavaScriptを最小限に！
- WebP画像や外部JavaScriptファイルで読み込み速度アップ！
- Cloudflare Pagesで世界中に爆速配信！
- Gemini 2.5 ProとGoogle AI Studioで効率的に問題作成！
- VSCodeとGitHub Copilotで開発を加速！
これらの技術を組み合わせることで、ユーザーに快適な体験を提供できる「爆速サイト」を効率的に開発できることを実感しました。
ウェブサイトのパフォーマンス改善に興味がある方、Astroを使った開発に挑戦したい方の参考になれば嬉しいです。ぜひ、皆さんもAstroと最新技術で爆速開発を楽しんでみてください！
追伸： Gamma AI でスライド生成しました。
上記内容をもとにスライド作成してみました。図形を効果的に用いており、分かりやすいですね。