https://github.com/shutootaki/sync-schema-demo
https://github.com/shutootaki/sync-schema-demo
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/shutootaki/sync-schema-demo
- Owner: shutootaki
- Created: 2025-07-21T01:01:24.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-07-22T02:12:44.000Z (3 months ago)
- Last Synced: 2025-07-22T04:22:07.577Z (3 months ago)
- Language: TypeScript
- Size: 77.1 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Schema Sync Demo
FastAPI + Pydantic + Zod + openapi-zod-client を使用した API の型とバリデーションルール一元管理のデモプロジェクトです。
## プロジェクト構成
```
.
├── backend/ # FastAPI バックエンド
│ ├── app/
│ │ ├── models/ # Pydantic モデル
│ │ ├── routers/ # FastAPI ルーター
│ │ └── main.py # メインアプリケーション
│ └── pyproject.toml # Poetry 設定
└── frontend/ # React フロントエンド
├── src/
│ ├── components/ # React コンポーネント
│ └── lib/api/ # API クライアント
├── package.json # npm 設定
└── schema-format.hbs # openapi-zod-client テンプレート
```
## セットアップ手順
### バックエンド（FastAPI）
1. 依存関係のインストール
```bash
cd backend
poetry install --no-root
```
2. サーバーの起動
```bash
poetry run uvicorn app.main:app --reload
```
サーバーは http://localhost:8000 で起動します。
### フロントエンド（React）
1. 依存関係のインストール
```bash
cd frontend
pnpm install
```
2. スキーマの生成（バックエンドが起動中に実行）
```bash
pnpm codegen
```
3. 開発サーバーの起動
```bash
pnpm dev
```
フロントエンドは http://localhost:5173 で起動します。
## 主要ファイル
### バックエンド
- `backend/app/models/user.py`: Pydantic モデル定義
- `backend/app/routers/users.py`: FastAPI ルーター
- `backend/app/main.py`: メインアプリケーション設定
### フロントエンド
- `frontend/src/components/UserForm.tsx`: React Hook Form 連携コンポーネント
- `frontend/src/lib/api/client.ts`: 型安全な API クライアント
- `frontend/schema-format.hbs`: openapi-zod-client テンプレート
## 使用技術
### バックエンド
- FastAPI: Python Web フレームワーク
- Pydantic: データ検証とシリアライゼーション
- Poetry: Python パッケージ管理
### フロントエンド
- React: UI ライブラリ
- TypeScript: 型安全性の確保
- Zod: スキーマ検証ライブラリ
- React Hook Form: フォーム管理
- openapi-zod-client: OpenAPI から Zod スキーマ生成
- Tailwind CSS: スタイリング
- Vite: ビルドツール
## 開発フロー
1. バックエンドで Pydantic モデルを定義・変更
2. FastAPI が OpenAPI スキーマを自動生成
3. フロントエンドで `pnpm codegen` を実行
4. Zod スキーマが自動生成され、型安全性が確保される
このフローにより、型の不整合を早期に検知し、バリデーションロジックの二重実装を回避できます。