Astroの設計思想とメリット
先に述べたように、現代ではさまざまなJavaScriptフレームワークが存在しますが、そこに比較的新しい「Astro」というフレームワークがあります。
Astroの設計思想は、公式ドキュメントの「はじめに」から引用すると、
コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワーク
と説明されています。
これは、Webサイトの訪問者が重視する部分、つまり「コンテンツ」に焦点を当て、最初に必要なコンテンツだけを送信し、それ以外のJavaScriptやCSSなどは必要に応じて読み込むという考え方です。
メリットとしては、必要最小限のコンテンツだけを最初に読み込むため、ページ単位のロード時間が短縮され、サーバーへの負担を軽減し、モバイルデバイスでの閲覧にも最適化される、ということが挙げられます。
また、ReactなどのSPAフレームワークと比較すると、パフォーマンスの最適化と開発のアプローチという点でいくつかの違いがあります。
1．レンダリング方法
Reactや一部のSPAフレームワークは、クライアントサイドでレンダリングを行うため、サーバーから送られてくるHTMLは最小限のもので、主要なコンテンツは含まれていません。代わりに、JavaScriptがブラウザ上で実行され、その結果としてページが動的に生成されます。
一度ページがロードされると、新しいページへの移動は瞬時に行われますが、逆に言うと、初回のページロードが遅くなる可能性があります。
Astroは、HTMLとCSSをサーバーサイドでレンダリングし、必要なJavaScriptだけをクライアントに送信します。これによってインタラクティブになるまでの時間（TTI：Time To Interactive）を大幅に短縮し、パフォーマンスを改善することができます。簡単に言うと、初回ロードから爆速になる、ということですね。
2．JavaScriptへの依存度
Reactや一部のSPAフレームワークは、Webページの変更箇所のみを書き換えるという機能性を実現するため、JavaScriptに大きく依存しています。それによって初回読み込み以降、高速でスムーズな画面遷移を体感できますが、一般的に開発難易度が上昇する傾向があります。
Astroは、デフォルトでゼロJSを謳い、必要な場所にだけJavaScriptを適用し、それ以外の部分は静的なHTMLとCSSで構成することができます。これにより、それほど意識せずにJavaScriptを削減しつつ、パフォーマンスを向上させることができます。
3．フレームワークの互換性
Astroは、基本的なWebサイトが構築できるオールインワンなフレームワークですが、React、Vueなどの異なるフレームワークや、さまざまなライブラリと互換性があり、必要に応じてインテグレーションとして拡張することができます。
これにより、基本機能をシンプルに使いたい初級者から、開発経験を活かしたい上級者まで、幅広い開発環境を構築することができます。
つまるところAstroは、ReactなどのSPAフレームワークを完全に置き換えるものではなく、画面遷移速度よりも初回読み込み速度を優先するようなトレードオフの関係を理解したうえで、自分のプログラミング能力に合わせて使うことができる、すべてのWeb制作者にやさしいフレームワークであると言えます。
Astroを用いた開発体験
結論から言うと、SPAフレームワークや開発言語に関して、ほぼ基礎的な知識しか持たない筆者が、Astroを使って個人のポートフォリオブログを静的サイトとしてリニューアルした結果、PageSpeed Insightsでモバイル、デスクトップともにパフォーマンス100点を叩き出すことができました（パフォーマンス数値は変動します）。
もちろんこれは一例であり、すべてのWebサイトにAstroが万能に使えるというわけではありませんが、少なくともポートフォリオのような小規模コンテンツにおいては、充分なパフォーマンスの静的サイトを短時間で構築することができます。
逆に、このような小規模のコンテンツにReactなどのSPAフレームワークを導入すると、オーバースペックな複雑さを内包し、関連パッケージの多さはロード時間を増加させたり、SEOの問題を抱えたりすることもあります。
筆者がAstroを用いた開発体験の中で、特に優れていると感じたのは、このようなフレームワークとしての「ちょうどよさ」です。
Astroは、すべての開発者が簡単に使えるように設計されており、.astroという拡張子を持つ独自のUI言語を持っています。astro言語はHTMLのスーパーセットになっており、HTMLとして再利用可能な小さな断片（スニペット）を記述すると、そのままAstroで有効なコンポーネントとして動作します。
つまり、HTMLとほぼ同じ感覚でコードを書き始めることができます。
かと言って、Astroが初心者向けの簡易的なフレームワークというわけではなく、すでに既存のJavaScriptフレームワークに慣れているエンジニアの場合は、ReactにおけるJSX構文のようにHTMLとJavaScriptを混在して記述したり、propsの受け渡しや、他フレームワークのコンポーネントをインポートして使用することもできます。
このようにAstroは、未知のフレームワークとして最初に触れる過程において、開発初心者にもベテランにも、実に「ちょうどよい」学習難易度とボリューム感を持っていると言えます。
次回は、実際のコードを参照しながら、Astroのインストール方法やコンポーネントの作り方を説明していきたいと思います。
