react-swr-template

React + Vite のフロントエンドテンプレート。

技術スタック

カテゴリ	ライブラリ
UI	React + shadcn/ui + Tailwind CSS v4
ルーティング	TanStack Router（ファイルベース）
データフェッチ	SWR
フォーム	react-hook-form + zod
APIクライアント生成	Orval
エラー処理	react-error-boundary
テスト	Vitest + Testing Library
ビルド	Vite + TypeScript

ディレクトリ構成

src/
├── routes/                    # ファイルベースルーティング（薄いエントリーポイント）
│   ├── __root.tsx             # ルートレイアウト（SWRConfig + ErrorBoundary + 404）
│   ├── _authenticated.tsx     # 認証ガード（beforeLoad）
│   ├── _authenticated/
│   │   └── index.tsx          # /
│   └── login.tsx              # /login
├── api/
│   └── generated/             # Orval 生成先
├── components/
│   ├── ui/                    # shadcn/ui コンポーネント
│   └── ErrorFallback.tsx
├── features/                  # 機能単位のまとまり
│   ├── auth/
│   │   ├── LoginPage.tsx      # react-hook-form + zod
│   │   └── useAuth.ts         # SWR ベースの認証状態管理
│   └── home/
│       └── HomePage.tsx
├── hooks/                     # 汎用フックのみ（useDebounce など）
└── lib/
    ├── fetcher.ts             # SWR カスタム fetcher / Orval mutator
    └── utils.ts               # cn()

セットアップ

pnpm install
pnpm dev

コマンド

pnpm dev          # 開発サーバー起動
pnpm build        # プロダクションビルド
pnpm preview      # ビルド結果をプレビュー
pnpm test         # テスト実行
pnpm test:watch   # テストをウォッチモードで実行
pnpm generate     # Orval で API クライアントを生成

Orval（APIクライアント生成）

orval.config.ts の input.target に OpenAPI スペックの URL またはファイルパスを指定して実行する。

// orval.config.ts
input: {
  target: './openapi.yaml', // または 'https://api.example.com/openapi.json'
},

pnpm generate

生成されたコードは src/api/generated/ に出力される。

認証フロー

_authenticated.tsx の beforeLoad でトークンの有無を確認し、未認証の場合は /login へリダイレクトする。認証状態は useAuth フックで管理し、実際の API 呼び出しに合わせて src/hooks/useAuth.ts を書き換える。

ルートの追加

src/routes/ 以下にファイルを追加すると、pnpm dev / pnpm build 時に src/routeTree.gen.ts が自動再生成される。

# 例: /posts を追加
src/routes/_authenticated/posts.tsx

import { createFileRoute } from '@tanstack/react-router'
import { PostsPage } from '@/pages/PostsPage'

export const Route = createFileRoute('/_authenticated/posts')({
  component: PostsPage,
})