きっかけ

私的な趣味でWebサイトを開発したい欲求があり、下記要件を満たせるフレームワークを調査していたところ、Astroが候補に挙がりました。

パフォーマンス重視であること
基本的にはブログ（静的サイト）を生成、デプロイできること
サーバーレス（低コスト）で運用できること
一部ぺージにはインタラクティブなパーツ（Webコンポーネント）を実装できること

ひとまず使ってみるのも手ではありますが「道具の使い方を理解してから使う」ことをモットーにしているのでドキュメントを読んで咀嚼したメモを残しておきます。

Astroとは？

公式ページでまず述べられているのは「The web framework for content-driven websites」との事です。ブログ、Eコマースやなどのコンテンツ駆動（ユーザーへ見せる物）のサイトを構築することを念頭にしたWEBフレームワークらしい。つまりはWebアプリケーション（SNSとか）を考慮していないとも解釈できるが詳しく見ていくとしよう。

特徴

公式ドキュメントの導入記事に述べられているので詳しく見ていく。

HTMLとJavaScriptの分離

まず目を引いたのは下記の記述ですね。

Zero JS, by default: Less client-side JavaScript to slow your site down.

スクリプトの処理を読んでみると、Astroでコンポーネントを定義する際に参照したスクリプトファイルや<script>タグの内容がAstroによって切り離されて、type=moduleとして組み込まれる仕様だそうです。

スクリプトタグをBodyの最後へ記述してHTMLの読み込みを止めないところから一歩踏み込んで、明確にHTMLのロードを待たせてからスクリプトを展開させることにより、レンダリング時間を最小限にさせていることがわかりますね。時にはスクリプトタグを直接出力したいケースについても考えられていて、is:inlineディレクティブを記述するとAstroがビルドする時の分離処理から除外されてそのまま出力されるそうだ。

この機能の良い所は、コンポーネントに記述されたスクリプトやスタイルが、フレームワークによってバンドル化されることで、同一のコンポーネントを複数回レンダリングする時 に分離したスタイルやスクリプトのバンドルが共有されるので無駄が生じない設計になっている所だと思う。

アイランドアーキテクチャ

続いてはAstroの目玉機能？のアイランドアーキテクチャについてです。

記事を読んでみた個人的な感想は「アトミックデザイン（コンポーネントベース）と親和性が高い？」と感じた事です。Next.js等はWEBぺージ全体をJavaScriptでレンダリングさせるのに対して、Astroは部分的にサーバーサイドで静的なHTMLをレンダリングさせるか、ReactやVueを用いてインタラクティブに表現させるか選択することができる。

個人的な解釈は、島（コンポーネント）ごとに自治権（レンダリング方法の決定権）を持っているイメージ？

このアイランドアーキテクチャを知った時は、Astroでパフォーマンスを突き詰めたWEBを構築しようとすると、アトミックデザインに寄っていくと感じました。必然的にコンポーネントが細かくなって地方自治が捗るからね。

コンテンツコレクション

コンテンツコレクションはAstroが「コンテンツ駆動」であることを実現する機能の1つだと感じました。特徴について以下に述べます。

コンテンツの型を定義できる

提供するコンテンツに種類（ブログ、ドキュメント、ポエム）があるとして、記事の種類ごとにどんな情報が格納されるかフォーマットを定義することできる。TypeScriptの型として定義されるそうなので、追加した記事にフォーマット違反が有った場合はビルド時にエラーが発生して、違反の内容はコレクションの定義に基づいてメッセージが出力されるとの事で修正も容易になるはずだ。

記事自体はmarkdown(md)やmdx(markdown in JSX)で管理できる

先述の記事の型を管理できる関係で、markdown(md)ファイルには型のプロパティを埋めるだけで記事が書けるようになるみたい。microCMSでコンテンツのスキーマとデータをmicroCMSで管理させて、Webサイトのビルドする時はAstroにデータを食わせる構図だと面白いかも？

ぺージのテンプレートを作れる

記事の内容をコレクションに突っ込んだら、コレクションの内容から記事ページを生成させることができる。公式ドキュメントでは指定したコレクション全てを同一のテンプレートで出力させるサンプルもある。大は小も兼ねることから、特定の記事だけスペシャルなテンプレに振り分けて出力させることも可能になるかな？

最後に

今回は自分の作ろうとするWebサイトでAstroが要件を満たせていそうかの観点でドキュメントを部分的にチェックしました。全体の30％も見られていないと思いますが、基本的な設計思想や実装されている機能が自分の理想に近いと感じられました。React(Next).jsと比べると、アプリケーションとして構築するには機能が弱いというか、コンセプト外な感じなので、Webサイトの要件・仕様を明確にして適切に技術選定するべきだと感じました。次はAstroを実際に使ってみた記事を書きたいな。