このサイトで使用しているものは以下の通りです
使用している技術
- Astro 4.2.6
- Astro/React
- Tailwindcss 3.4.1
- lucide-react
- radix ui
- shadcn ui
これはできるだけシンプルにかつ便利なものは使うという必要最小限の構成でやっています。
まずAstroは2022年年末あたりから注目を集めた比較的に新しいフレームワークです。
特徴はReact、Preact、Svelte、Vue、SolidJS、AlpineJS、Litが使えるとこで必要最小限のJavaScriptで書けるところが大きいです。
私は、過去にいろんなサイト機能を作ってきたので違う場所に移行するときはいちいちか書き換える必要があったのですが、それをほぼそのまま移植できるのでこれはいいなと思い使用することに決めた理由です。(実際問題他の言語が混じるとめんどい部分はあるので簡単ではない)
Tailwind CSS
人によってはTailwind CSSなんてどこが使いやすいのかと思う人がいると思います。
個人的にTailwind CSSを使う場面はコンポーネントが使用できるフレームワークが一番効果を発揮しやすいと思います。
html&cssのバニラだけで作成したい場合は、圧倒的に使い勝手がよくないです (そもそも選択肢に入っていないと思う)。
Radix UI&shadcn/ui
Radix UIは機能は実装しているから装飾は自分たちでやってねという装飾に力を入れたい人向けのフレームワークです。shadcn/uiはRadix UIを予め装飾されたファイルです。
shadcn/uiはライブラリーではなくてただのコンポーネントファイルです。
それをインポートして使用することができライブラリーの依存性なしで簡単にカスタマイズできるのがshadcn/uiのいいところです。
Lucide
Lucideはアイコンライブラリーです。
これはNext.jsから使って便利なのでそのままAstroでも使用しているだけです。
ビルドするときに使用していないものは除くので別に問題はないです。
環境構築に関しては公式サイトからドキュメントに従ってやればできますので興味ある人は使ってみてください(宣伝)。
最後
最近いろんなフレームワークが出たり消えたりのWeb業界は常に変化を繰り返しています。
定期的に情報は見ていますが、正直早すぎて何が良いのかよく分かりません。
メリットデメリットは個人によるのでどうこう言うつもりはありませんが、個人でテストで作成するぐらいが一番気楽なのかなと思います。