なぜ書こうと思ったか
Astro.js使ってみて、日本、海外問わず記事が少なかったことと、もっとAstroが発展してほしいと思い、書き始めました。
なぜAstro.jsか
・コンポーネント駆動で開発をしたい
・開発環境を手軽に構築したい
・モダン技術を使いたい
・静的にファイルを生成したい
といった理由がありました。ただそれであればNext.jsでも良さそうなのですが、Next.jsで開発するのには以下の問題がありました。
・ビルドしたファイルに多量のjsファイルが含まれてしまう
この点においてAstro.jsはビルド時にjsを一切排除してくれます。distフォルダに生成されるファイルに意図しないjsは含まれません。
CMSやshopifyなど既存の環境に静的に組み込みたい場合などには、とても適したフレームワークだと思います。
Astro.jsとは
https://Astro.build/
ReactやVueなどを様々なライブラリを扱うことができる、静的サイトジェネレートのフレームワークです。
特徴はビルド時にjsを一切排除してくれる点で、SSGに特化しています。
Astro.jsをどう使ったか
今回はAstroコンポーネントを使用して、1枚のLPを作成しました。jsは別途ファイルを作成し、esbuildを使ってコンパイルするようにしました。
要件
・shopifyのliquidファイルにhtmlを埋め込むため、静的なhtmlを生成できること
・css,jsをそれぞれ一つのファイルで生成できること
・IE非対応
問題点
- Astroコンポーネント内のcssに変更がある度に、cssのファイル名のハッシュ値と、変更したコンポーネント内のクラス名のハッシュ値が変わってしまう。
- css-in-jsが使えない
- jsは別途コンパイルしてあげなければいけなかった(Astroでもできるみたいだが、うまく動かなかった)
1.について
今回は既存のshopify環境のliquidファイルにhtmlをコピペで貼り付け、cssとjsはそのまま入れ込むという公開手順だったため、cssに変更がある度にhtml側も変更しなければいけないという手間がかかってしまった。
2.について
今回に関しては結局同様の問題が発生してしまうが、使えないのはちょっと辛いのではないかと思う。
3.について
AstroのHoisted scripts(https://docs.Astro.build/en/core-concepts/Astro-components/#hoisted-scripts)
という解決方法があったが、vender.js,index.jsの２ファイルに分かれてしまうという問題があった。（さらにうまく動かなかったけど、多分自分のせい）。これについては、jsは別途esbuildでコンパイルすることで解決した。
Astroはビルドツールにviteを使っているため、viteの設定でなんとかできそうな気もするが、まだ試せていない。
そのほかに、Astroコンポーネントで記述する際、末尾以外の場所にkeyframeを記述すると、クラス名にハッシュ値がつかなくなるという問題もあった。これはちょっとよくわからない。
よかった点
とてもシンプルで、学習コストをあまりかけずにスコープされたコンポーネントで開発できることはとても快適でした。
リント系以外はNext.jsのようにほぼゼロコンフィグで環境を構築できてしまうのはとてもお手軽です。
Sassもお手軽に使うことができ、mixinをAstroコンポーネントにインポートして使うことも可能です。
https://docs.astro.build/en/guides/styling/#-css-preprocessors-sass-stylus-etc
難しかった点
Astroコンポーネント内のjsの書き方に癖があるかなと感じました。
Reactと同じ感覚で書いていると、エラーになることが多々あり、css-in-jsを使えないこともあって複雑なコンポーネントは作りにくいかな、という印象でした。
（具体例が出せず申し訳ありません。。）
次に試したいこと
Astro + tailwindcss を試してみたいです。公式でも導入方法が書いてあるので、相性が良さそうな気もします。
tailwindを使えばハッシュ値の問題も解決されますし、Reactと組み合わせればかなりコンポーネントの柔軟性もあげられそうです。
今後のAstroにさらに期待です！