## 3. フロントエンド

確認：2026年9月

| 役割 | 既定 | 代替と乗り換え条件 |
|---|---|---|
| アプリ（SSR・フルスタック） | **Next.js（App Router）** | TanStack Start：Vercel依存を避けたい、クライアント主体で型安全なルーティングを重視するとき。React Router（フレームワークモード）：Remix系の資産があるとき |
| SPA（ログイン後の管理画面など） | **React＋Vite＋TanStack Router** | — |
| 静的サイト・コンテンツ中心 | **Astro** | Next.js（SSG）：同じリポジトリでアプリ部分も持つとき |
| CSS | **Tailwind CSS** | CSS Modules：デザイナーが素のCSSを書くチーム |
| UIコンポーネント | **shadcn/ui**（コードをコピーして所有する方式、Radix UIベース） | Mantine：コンポーネントを一式そのまま使いたい管理画面。MUI：Material Design指定のとき |
| アイコン | **lucide-react** | — |
| サーバー状態（API取得・キャッシュ） | **TanStack Query** | SWR：Vercel系の小規模案件 |
| クライアント状態 | **useState／Context（まず標準で済ませる）→ 必要ならZustand** | Jotai：細かい粒度の状態が多いとき |
| フォーム | **React Hook Form＋Zod** | Conform：Server Actions中心で書くとき。TanStack Form：型安全を最優先するとき |
| テーブル | **TanStack Table** | AG Grid：表計算並みの編集機能が必要な業務画面 |
| グラフ | **Recharts** | Apache ECharts：データ量が多い、または地図・複雑なチャートが必要なとき |
| リッチテキストエディタ | **Tiptap** | Lexical：Meta製でカスタマイズを深くしたいとき |
| 日付選択 | **react-day-picker**（shadcn/uiのCalendarが内部で使用） | — |
| アニメーション | **Motion**（旧Framer Motion） | CSSのみ：簡単なトランジションなら不要 |
| 国際化 | **next-intl**（Next.js） | i18next（react-i18next）：Next.js以外 |
| ドラッグ＆ドロップ | **dnd kit** | — |
| 仮想スクロール | **TanStack Virtual** | — |
| トースト | **Sonner** | — |
| コンポーネントカタログ | **Storybook** | Ladle：軽く済ませたいとき |
| アクセシビリティ検査 | **axe（@axe-core/playwright でE2Eに組み込む）** | — |
| 画像最適化 | **next/image**（Next.js）／ **astro:assets**（Astro） | — |
| SEO・OGP | **フレームワーク標準のメタデータAPI** | — |

### モバイルアプリ

| 役割 | 既定 | 代替と乗り換え条件 |
|---|---|---|
| クロスプラットフォーム | **React Native＋Expo** | Flutter：デザインの完全な一貫性を重視し、Dartを受け入れられるとき。Hotwire Native：Railsで作っていて画面の多くがWebで済むとき |
| ビルド・配信 | **EAS Build／EAS Submit** | — |
| OTA更新 | **EAS Update** | — |
| ナビゲーション | **Expo Router** | — |
| スタイル | **NativeWind（Tailwind）** | — |