React とフロントエンドエコシステム
SPA開発の中心となるUIライブラリと周辺ツール群。_moc-web-infra
React
- Hooks ベース。
useEffectの誤用に注意。Suspense / Server Components(「フロントエンドの消失」)。 - 状態管理: SWR、Recoil(単方向データフロー)、Jotai(minimalなRecoil)。
- ノードエディタ React Flow など完成度の高いライブラリが豊富。CSSフレームワークは Mantine 等。
Vue
実務(CODEプロジェクト)のフロント。Vuex(store/actions/mutations/getters)+ axios の API層構成。ディレクトリ設計は components(materials/objects/parts/templates)+ composables + modules + store + types。認証トークンの保存先(Cookie vs localStorage)はjwt-token-auth/web-browser-securityの論点。Solid.js はリアクティブな対抗。
CSS
- Tailwind CSS: semantic でない utility クラスを提供。HTMLと一体化する利点 vs semanticでないことへの賛否(font タグ論争)。派生に daisyUI、対抗に Windi CSS。
ビルド/パッケージ
- Vite(
pnpm create vite -- --template react-ts)、テストは vitest。Webpack はDefinePluginで環境変数注入。 - Node.js、パッケージマネージャは pnpm(yarn Workspaces の代替、monorepo対応)。
統合スタック
T3 Stack = Next.js + tRPC + Tailwind + TypeScript + Prisma + NextAuth.js。フルスタックでは Blitz.js / RedWoodJS(Rails寄り、Cell単位、dbAuth)、Rails の Hotwire(Turbo/Stimulus、HTML中心でSPA体験)。