脱炭素を推進するメンバーズがなぜAstroを積極的に導入するのか

この記事は「BEMALab アドベントカレンダー 2024」23日目の記事です。

はじめに

こんにちは、メンバーズルーツカンパニーの渡邊です。
脱炭素を推進するメンバーズでは、静的コンテンツが中心のサイトの開発プロジェクトでAstroを積極的に導入しています。 その理由はとてもシンプルで、Astroは環境に優しく他のフレームワークと比べてさまざまな優れた特徴を持っているためです。
2023年のアドベントカレンダーでは、Webサイトの脱炭素化にはJamstackがおすすめであることをお伝えしました。 今年は一歩踏み込んで、Jamstackに対応したフレームワークの中でもなぜAstroが環境に優しいのかと、Astroが持つさまざまな優れた特徴についてお伝えしたいと思います。 

環境に優しく高速なAstro

Astroは静的サイト生成を基本としたフレームワーク※1ですが、他のフレームワークとは異なり「デフォルトでクライアントサイドのJavaScriptが含まれない（デフォルトでゼロJS）」という特徴があります。つまり初期設定で開発してもデータ転送量が少なく抑えられるように設計されており、開発者は特別な配慮をしなくても環境に優しいWebサイトを構築できます。

次のグラフは、Web Almanac（ウェブ年鑑）※2から抜粋した2024年の静的サイトジェネレーター別の炭素排出量の中央値と、JavaScript転送サイズの中央値です。Astroの炭素排出量はNext.jsの約半分となっており、その環境効率の高さがうかがえます。 JavaScript転送サイズに焦点を絞った場合、Next.js の中央値 583 KBに対し、Astroの中央値は164 KBと1/3の転送量となっており、いかにAstroのデータ転送サイズが抑えられているかが分かります。

2024年の静的サイトジェネレータの炭素排出量の中央値（Web Almanac 2024: Sustainability より引用 ハイブリッドブレームワークのみを抜粋）

プリレンダリングフレームワークの年毎のJavaScript転送サイズの中央値（Web Almanac 2024: Jamstack より引用）

他にも、Astroが環境に優しいということは、Astro製のドキュメントフレームワークStarlightのチュートリアルの「環境への負荷」の章によくまとめられています。

※1 Astroは静的サイト生成（SSG）もサーバーサイドレンダリング（SSR）もどちらもできるハイブリッドフレームワークに分類されます。他の同種のフレームワークとしてはNext.jsやNuxtなどがあります。
※2 Web Almanac（ウェブ年鑑）は、HTTP Archiveの実データとウェブ専門家の知見を基にした、Webの現状を解説する包括的なレポートです。2024年版では、UXやJamstack、Sustainabilityなどを含む21章で最新動向を詳しく網羅しています。

Webサイトの高速化には、データ転送量をより少なくすることが不可欠です。つまり、データ転送量を抑えた環境に優しいサイトは表示パフォーマンスに優れていると言えます。
また、Webサイトの高速化には可能な限りJavaScriptの実行を減らすことも重要です。これに関してAstroは、冒頭で記載した「デフォルトでゼロJS」という特徴があるため、より他のフレームワークに比べてWebサイトの表示パフォーマンスが高くなっています。
他の同種のフレームワークと表示スピードやコアウェブバイタルの指標を比較した結果はこちらにまとめられています。

スケーラブルかつ安全

前述の通りAstroは静的サイト生成を基本としており、静的サイトとしてCDNにデプロイ可能です※3。これはサーバーサイドプログラムが動作するWebにデプロイする場合と比べてセキュリティリスクを軽減することができます。静的サイトとしてホスティングできるため、CDNが自動的に負荷分散を行いサイトのパフォーマンスを維持できます。

※3 CDNで配信できるという特徴は、アクセスした地点から物理的に最も近いエッジサーバーを介してデータを取得できるようになるため、エネルギー消費量を抑えられる、つまり炭素排出量を削減することができます。

高い柔軟性

Astroは、Astroコンポーネントだけでなく、ReactやVue、Svelteといった様々なUIフレームワークを混ぜて使えるため、開発済みのプロジェクト資産を柔軟に活用する事ができます。また、Astroはアイランドアーキテクチャ※4（Islands Architecture）を採用しており、静的ページの一部分をインタラクティブにすることができます（これをClient Islandsと呼びます）。Astro 5.0からはClient Islandsだけでなく静的ページの一部分をSSRできるようになりました（これをServer Islandsと呼びます）。
つまりAstroは、開発者がいつどのタイミングでJavaScriptをロードするのかや、ページのどの部分を静的にし、どの部分を動的にレンダリングするのかを柔軟に決定することができます。

※4 アイランドアーキテクチャはこれらの柔軟性だけでなく最小限のJavaScriptの読み込みにより高速化にも寄与しています。

簡単かつ学習しやすい

私がAstroで最も気に入っているのは簡単に使えるという点です。HTMLとCSSが書ける開発者であれば、少し学習するだけで、Astroコンポーネントが書けるようになります。 実際にAstroの公式ドキュメントの「Astroを選ぶ理由」としても「簡単に使える」という原則があり、以下のように親しみやすさを重視していることが分かります。

Astroの目標は、すべてのウェブ開発者が利用できることです。 Astroは、ウェブ開発のスキルレベルや過去の経験に関係なく、親しみやすいと感じられるように設計されています。

出展： Astroの公式ドキュメント Astroを選ぶ理由 より

また、Astroの公式ドキュメントは基本的なページが日本語を含む主要な13言語に翻訳されており、学習しやすい点が魅力です。さらに、チュートリアルが充実しているため、初学者にとっても嬉しいポイントです。

成長性も注目度も高い

Astroは注目度が高いフレームワークです。Astroのメジャーバージョンの1.0が登場したのは2022年と2年ほどしか経っていないのにも関わらず、執筆時点（2024/12/16）でGitHubのスター数は47.7kと高い支持率となっています。
注目度が高いことは、State of Frontend 2024やState of JavaScript 2024の調査結果でも確認できます。
State of Frontendでは2023年に利用されたレンダリングフレームワークの中では利用率が3位（Nuxtとほぼ横並びの2位）、State of JavaScriptでは2024年のメタフレームワーク利用率が2位となっており、登場後2〜3年の間で急速に広まっていったことが分かります。また、どちらの調査でも否定的な意見は非常に低く、興味関心は高い結果となっており、開発者に好意的に捉えられていることが伺えます。

2023年に利用されたレンダリングフレームワークの調査結果（State of Frontend 2024 より引用）

2024年のメタフレームワークの利用率の調査結果（State of JavaScript 2024 より引用）

先に紹介したWeb Almanac 2024のJamstackの章でも、Astroは次のように取り上げられています。

Astro は、2024 年にプリレンダリング フレームワークの中で最も大きな成長を遂げました。この分野で最も新しいフレームワークの 1 つであることを考えると、これは素晴らしい成果です。
プリレンダリングとハイブリッドの両方のカテゴリで Next.js と Astro の存在感が高まっていることは、開発者が静的および動的コンテンツの生成をより細かく制御できるハイブリッド アーキテクチャへの移行を示しています。Astro のパフォーマンス向上とページ重量の削減への注力は成果を上げており、Next.js に追いつくための大きな前進を遂げています。

出展： Web Almanac 2024: Jamstack 結論 より

このように多くの開発者がAstroに注目しており、今後の技術トレンドとしても期待されています。

おわりに

Astroは「環境に優しい、高速、スケーラブル、安全、柔軟、簡単で注目度も高い」と、まさに「いいことづくし」のハイブリッドフレームワークです。 ヘッドレスCMSと組み合わせた静的コンテンツ中心のWebサイトを作る場合だけでなく、動的コンテンツを含むWebアプリケーションでも利用できます。 さらに、Astroは簡単で日本語の公式ドキュメントも充実しているため、モダンなフロントエンド開発に慣れていない開発者でも安心して使えます。 つまりAstroは、古いWebサイトをモダナイゼーションする際にも最適なフレームワークであると言えます。
みなさんもAstroを導入しWebサイトを脱炭素化してみてはいかがでしょうか。