目的

Astroを使用したフレームワークとライブラリの動作検証である。

app概要

create astro@latest -- --template basicsで構築されたプロジェクトです。

• インテグレーションはreact、vue、svelte、solid、alpine、htmx
• それぞれのFWで同じコンテンツを作成し動作を検証する
• ルーティングページはastroファイルで作成する
• パスパラメーター・slugによる動的ルーティングページを作成する
• コンテンツコレクション機能を使ってみる
• ページネーション機能を使ってみる
• トップページは複数FWを混在させる
• それぞれのFWのUIコンポーネントページを作成する
• バインディングでinputのtextを表示する
• 状態管理はnano storesで行う
• src内での画像表示
• 外部APIデータを読み込み表示する
• CSSのスコープとtailwindの確認を行う
• SSG・SSR・SPAモードでの確認を行う

開発環境

• astro 4.1.1
• alpinejs 3.13.3
• astro 4.1.1
• react 18.2.0
• react-dom 18.2.0
• solid-js 1.8.10
• svelte 4.2.8
• vue 3.4.11
• astro-htmx 1.0.5
• htmx.org 1.9.10
• nanostores 0.9.5
• tailwindcss 3.4.1

/ ...プロジェクトルート
├── public ...画像ディレクトリ
├── src ...アプリケーションディレクトリ
│    │── assets
│    │── components
│    │── content
│    │── layouts
│    │── lib
│    │── pages ...webルートディレクトリ
│    │── store
│    │── styles
│    └── types
├── astro.config.mjs
├── tsconfig.json
└── package.json

注意点

• reactとsolidもしくはpreactを併用する場合はプラグマコメントで上書きして使用しないと競合してしまう
• tsconfigのjsx設定を混在させるとバグが発生するので統一させる必要がある
• htmxでDOM追加しcssクラスを書いても適用されない。astroがビルド時に一意クラス名に変更している。適用するならインラインかtailwindで。
• alpineでx-dataの値を子コンポーネントに渡す事はできない。x-textとx-htmlでしかデータの値を取得できないため。渡すならastroのJSで。
• astroは他のFWのコンポーネントを読み込めるが他のFWはastroコンポーネントを読み込めない
• staticビュートランジションはAlpine.dataの初期化が出来ずエラーが出てfetchが一度リロードなどで読み込まないと動作しなくなる。clientかインラインで対応かオプトアウトなどastroで行う。
• serverやhybridでのビュートランジションだとhtmxとjsが同様の現象となる。やはりclietnかインラインかオプトアウトで対応する必要がある。
• ビュートランジションのSPAモードは基本的にFWで対応し、astro、alpine、htmxなどはインラインもしくはオプトアウトで行う必要がある。
• nano storesでの状態管理はUIフレームワークのみ。astroファイルでは出来ない。

結論

• 導入から実装までスムーズに進行した。他のUIフレームワークを使っている人であれば比較的簡単に感じると思われる。
• viteでホットリロードやビルドの速度も早く、言われている通り描画速度も早いので開発もしやすいと感じる。
• react、vue、svelte、solidのUIフレームワークを混在、単体で使用したが特に問題なく動作するが、tsxであるreact、solid、preactを併用する場合は設定やプラグマコメントなど書かなければならかったりで、どれか一つに絞った方が問題は起き難いと感じる。
• svelteはastroと記法が似ており、導入パッケージ数やサイズも軽いので扱い易いと思われる。
• astro単体で開発を行う場合は素のJSで書く必要があるので、alpine、htmxなどと併用したほうがコード量を抑える事はできるが、alpineは機能をフルに使うとビルド時にエラーが発生しやすく、モードによっては初期化されないので注意が必要。
• パス生成やページネーションも分かりやすく、ディレクトリやスラッグの設計さえ先にしておけばスムーズに導入できる。一応競合しても優先順位で表示される。
• nano storesでの状態管理はかなり簡単で扱いやすいが、まだver0.9なのが気になる。
• SPAモードは多少モッサリしている感じではあるが、やり方次第でシームレスな遷移は可能なのではと感じる。
• コンテンツコレクションはヘッドレスCMSを使用している場合必要ないと思う。定型なリリースなどのコンテンツとしては良いが、ビルドからデプロイする必要があるのである程度知識がないと更新できないので、最終的にCMSになると思われる。
• astroは非常に使い勝手のよいフレームワークであり、MPAはもちろんSPAとしてもかなり有用に感じる。アイランドというコンポーネントの設計は理想であり、個人的にでも使っていこうと考えている。次は認証とDBを使用する。