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

カテゴリー

公開日 2023/11/18 最終更新日 2024/2/28

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

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

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

2023年9月にはAstro3.0が公開されたりホスティングに関する情報も公開されるなど今後のアップデートも更に期待できるフレームワークだと思います。このページではAstroというフレームワークについての解説をしたいと思います！

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

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

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

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

2023年12月にAstro4がリリースされました

Astro 4.0 is here! Introducing the Astro Dev Toolbar — your new companion for local development. Inspect, audit, and extend your dev environment in the browser.

Plus: ⚡️ 80% faster builds, 🌐 i18n routing, 🪄 View Transition updates and more!https://t.co/jjtnQNB9L8
— Astro (@astrodotbuild) December 5, 2023

ついに2023年12月5日にAstro 4.0の正式版がリリースされました。Astro3.0がリリースされたのが2023年8月30日なので、わずか3ヶ月ほどでバージョンアップされたということになります。バージョンアップの内容については公式HPをご確認ください。

今回のアップデートの個人的な目玉は、Dev ToolbarとIncremental Content Cachingです！

Dev Toolbarを使うことでブラウザから離れることなくサードパーティ製の便利ツールと連携をすることができそうです。Incremental Content Cachingは、まだ実験的な段階らしいのですが、コンテンツの増分を検知し差分のみをビルドすることでページ生成にかかる時間を大幅に短縮することができます。

実際にAstro Docsでもビルドにかかる時間を9割減少させることができたそうです。

Enabling content caching on the real-world Astro Docs codebase saw the relevant step in astro build drop from 133.20s to 10.46s, about 92% faster. The end-to-end build time was reduced from 4mins 58s to just over 60s, for a total build time that was 80% faster. We’ve seen similarly impressive results reported in other real-world scenarios.

Astroのホスティングなどで用いられるAWS Amplifyなどは月当たりの総ビルド時間で料金が決まってくる部分もあるので、ビルドにかかる時間が短縮されることは非常に嬉しいことですね！（単純にすぐにデプロイできるのも嬉しい）

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で構成されており、高速で高パフォーマンスなサイトを実現しています。

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に関する情報を発信していきたいと思いますので、よろしくお願いします。