【2025年3月最新】話題のWebフレームワーク「Astro」とは？魅力と実際にサイトを構築するまでの手順を紹介

カテゴリー Astro

公開日 2023/11/18 最終更新日 2025/3/22

【2025年3月最新】話題のWebフレームワーク「Astro」とは？魅力と実際にサイトを構築するまでの手順を紹介

Astroフレームワークでのブログ構築！その魅力と特徴を徹底解説

最近Twitter(X)などでよく目にする「Astro」というフレームワーク。ツイートを見る限りブログを構築するために必要な機能は揃っていてWP REST APIなどとの相性もよく柔軟なブログ運営をすることができそうです。

Webフレームワーク「Astro」とは？

Astroは、最新のフロントエンド技術を駆使したモダンなフレームワークです。特にブログやウェブサイトの構築において、高速なパフォーマンスと柔軟性を実現しています。

GoogleやMicrosoftを始めとした世界中の企業で使用されているようです。また、2024年にはAstro独自のホスティングサービスの公開が発表されました。

今、個人的には一番熱いと言えるWebフレームワークです。Astroについて知りたい方はぜひこのページを最後までご覧ください。

2024年12月にAstro 5.0がリリースされました

Astro 5.0 is here.

Content layer, server islands, simplified prerendering, type-safe env, @vite_js v6. All stable. pic.twitter.com/gHoTUsfE0Q
— Astro (@astrodotbuild) December 3, 2024

ついに2024年12月4日にAstro 4.0の正式版がリリースされました。Astro4.0がリリースされたのが2024年12月なので、約1年ほどでバージョンアップされたということになります。バージョンアップの詳細については公式HPをご確認ください。

何と言っても今回のアップデートの目玉はContent Layerだと思います。

ブログコンテンツの管理場所は、GitにMarkdownを配置したり、MicroCMSのようなCMSサービスを利用したりREST APIから取得したデータを使って動的に表示したい、、、など多岐にわたると思います。Content Layerは複数のデータをひとつの型安全のデータストアに統合することでこの問題を解決してくれます！

合わせてパフォーマンスも改善してくれるそうなので一石二鳥ですね！！

Astroでサイトを構築する魅力・Astroを選択する理由

WebフレームワークであるAstroを使ってサイトを構築する魅力を以下にまとめます。個人的な意見も多分に含まれていますのでその点はご留意ください。

Astroアイランドアーキテクチャを利用したサイトの高速表示

必要最小限のJavaScriptのみを利用するため、ブログの表示が極めて高速です。AstroのWebサイトにも記載がある通り従来のフレームワークであるGatsbyやNext.jsに比べて表示速度が高速です。また、Astro3.0ではAstro2.9と比べてレンダリングが30%も高速化したそうです。SEOではページの表示速度も重要視されているためブログを運営する上でAstroは強力な選択肢の1つとなりそうです。

なぜAstroが高速なのかというとSSG(Static Site Generation：静的サイトジェネレーター)を採用しているからです。SSGとは簡単に言うと、ビルドの際にデータを伴ったHTMLのレンダリングを済ませておき、ユーザーからのリクエストの際にレンダリング済みのHTMLを返すということです。

AstroではSSGで使用済みJavaScriptを削除することでページの表示を高速化することが可能となっています。SSGを使ったサイトはページが頻繁に更新されるようなサイトとは相性が悪いため、更新頻度の低いブログなどとの相性が良いとされています（実際、Astroは会員制サイトなどの動的サイトへは不向きとされており、公式ページでもコーポレートサイトやブログなどへの使用が推奨されています。）

このAstroの高速表示を実現しているのが、Astroのアイランドアーキテクチャです。

Astroのアイランドアーキテクチャとは

Astroアイランドアーキテクチャに関する説明として公式ドキュメントには以下のように記載がありました。

「Astroアイランド」とは、HTMLの静的なページ上にあるインタラクティブなUIコンポーネントを指します。1つのページに複数のアイランドが存在でき、アイランドは常に孤立して表示されます。静的で非インタラクティブなHTMLの海に浮かぶ島（アイランド）とお考えください。

つまり、HTMLを広大な海として考え、その中にあるReactなどで構成されたUIコンポーネントを島として考えるのがAstroアイランドアーキテクチャの考え方と言えそうです。

Astroではこのアイランドアーキテクチャを採用することでページの高速表示を実現しています。デフォルトでJavaScriptを使用しないでページを生成します。インタラクティブなコンポーネントを採用したい場合でも極力JavaScriptを排除しようとします。具体的には、ReactやVueなどで構築されたインタラクティブなUIコンポーネントを採用する際にも、ページ全体をSPA（Single Page Application）のようにするのではなく、アイランドを作成します。これにより、ページの大部分はHTMLとCSSで構成されており、高速で高パフォーマンスなサイトを実現しています。

Server IslandsがAstro 5.0で登場しました！

2024年12月に公開されたAstro 5.0で、上記で述べたIslands Architectureをサーバー側へと拡張したServer Islandsが公開されました。Server Islandsでは必要な部分だけを動的にしてほかを静的に保つことで、更にページのパフォーマンスを向上させることが可能になっています。

具体的には、各ページにある1. 静的なコンテンツ、2. DBなどからデータを基に表示するコンテンツ、3. パーソナライズされたコンテンツといった様々な種類のコンテンツに対して、個々にキャッシュをすることが可能になり、ユーザーにとって最重要な部分を即座に表示することを可能にしています。

詳細については、Astroの公式ドキュメントを御覧ください！

Astro組み込みコンポーネントにより画像を自動で圧縮することができる

Astro3.0で画像の最適化が実装されました。

<Image>コンポーネントを使用することでページをbuildする際に.webp形式に自動で圧縮してくれるためページの表示速度を改善することができます。また、レンダリング時に画像の幅と高さを自動で取得し width属性と height属性に自動で追加してくれるためCLSを回避することができSEO的にも有効です。

Imageコンポーネントを使用するためにはsrcディレクトリ内に画像を配置し以下のようなコードを使用します。

---
import { Image } from 'astro:assets'
import imagePath from '../path/to/image.jpg'
---
<image src={imagePath} alt='画像のalt属性が入ります。Imageコンポーネントではalt属性は必須です'>

また、2023年10月にはAstro3.3が公開されました。これにより <Picture>コンポーネントが実装され、画面の幅に応じて画像を自動で切り替えることができるようになりました。これにより、画像の表示速度を改善することができます。

ブログを *.mdファイルで記述する際には自動で <Image>コンポーネントが採用されページの表示が高速になるようになっています。

Astroと他のフレームワークを比較したときの開発の自由度が非常に高い

Astroは様々なフレームワーク（ライブラリ）を利用することができます。現時点で対応しているのは

React
Preact
Svelte
Vue
SolidJS
AlpineJS
Lit

があります。極端に言えばヘッダーはReactで作成し、フッターはVueで作成し、サイドバーはSolidJSを採用することが可能です。

有名なフレームワークは大方カバーされているのでこれらを扱ったことのある人からするとかなりとっつきやすいこともAstroの魅力の一つだと思います。

もちろん、これらのフレームワークを扱ったことのない人でも、AstroはHTMLライクに書くこともできるので取り組みやすいフレームワークとして挙げられます。

Astro公式が提供している豊富なテーマ

Astroにふれる上で良いなと感じたのが公式で用意されているテーマやデモサイトの豊富さです。これは以下のような人におすすめです。

Astroを学習しており技術面について触れたいがサイトの枠組みを作るのが面倒
ファイル構成に悩みたくない
新たにHPを構築したいが、リソースを多く割けない

しかし、Astroには公式でたくさんのテーマが用意されています。それも今すぐにでも自分のWebサイトに採用してしまいたくなるくらい魅力的です。

Next.jsなどの他のフレームワークにも魅力的なテンプレートが用意されていることもあり、Astro独自の魅力とは言えないかもしれませんが、個人的にAstroを推すきっかけの一つでした。

その他にもAstroの公式サイトではShowcaseとして実際にAstroを採用してサイトを運用している事例を見ることができます。

まとめ

いかがでしたでしょうか。Astroは公式ドキュメントが徐々に日本語に翻訳されてきており、日本語での情報も増えてきているので今後も盛り上がっていくフレームワークだと思います。このページではAstroの魅力や実際にサイトを構築するまでの手順を紹介しました。Astroに興味を持った方はぜひ一度公式ドキュメントを読んでみてください。

また、個人的な話にはなりますが、このサイトはAstroを使って開発されています。WordPressを使っていたのですが、いかんせん管理画面がもっさりしていることが非常にストレスだったことやあまりプラグインに存在価値を感じていなかったため移行しました。

今後もこのサイトではAstroに関する情報を発信していきたいと思いますので、よろしくお願いします。