Hono + Inertia + React のフォーム＆CRUD実装パターン

業務アプリの大半は「一覧 → 作成 → 編集 → 削除」の CRUD と「フォームを投げる」の繰り返しです。本記事ではこれを Hono + Inertia + React の上で、できるだけ少ないコードと少ない概念で実装するパターンを示します。組み合わせる主要ライブラリ：

- Drizzle ORM: TypeScript ファーストの軽量ORM。SQL に近く型安全
- Zod: スキーマ定義 + 型生成 + 入力検証を一発で
- Inertia useForm: クライアント側のフォーム状態とサーバ送信・エラー表示を一体化

「ひとつの真実の源」をZodスキーマにするのが2026年のベストプラクティスです。例：ユーザー作成フォーム。

- email: 文字列、メール形式
- name: 文字列、1〜80文字
- role: 'admin' | 'editor' | 'viewer'

Zod の z.object({...}) で書き、z.infer<typeof Schema> で TypeScript 型を生成。サーバ側のバリデーションとクライアント側の型を1ヶ所で管理できます。スキーマは shared/ 等のディレクトリに置き、サーバ・クライアント両方から import できる構造に。

Drizzle ORM は TypeScript で SQL を書く感覚に近いORMです。schema.ts にテーブル定義を書き、マイグレーションは drizzle-kit generate / drizzle-kit push で生成・適用します。

Drizzle のテーブル定義から得られる型を、Zod スキーマと突き合わせるユーティリティ（drizzle-zod パッケージ）も便利です。これで「DB列定義 ⇄ Zod ⇄ TypeScript型」の三角形が自動同期できます。詳細は Drizzle ORM 公式 を参照してください。

業務アプリで最低限欲しいエンドポイントを Hono で書きます。

- GET /users: 一覧。Drizzle で select() し、Inertia レスポンスでページ Users/Index に props として配列を返す
- GET /users/new: 空フォーム表示
- POST /users: Zod で c.req.parseBody() をパース → 失敗ならエラーを返却、成功なら Drizzle で insert() → redirect('/users') + フラッシュメッセージ
- PATCH /users/:id: 編集処理（同じくZod→Drizzle→redirect）
- DELETE /users/:id: 削除

Inertia は POST 後に redirect を返すと SPA 内でのナビゲーションを自動処理します。「PRG パターン（Post-Redirect-Get）」を素直に使えるのがこのスタックの大きな強みです。

Inertia の useForm フックは、フォーム状態 / 送信中フラグ / サーバから返ったエラーを一括で扱える便利なフックです。

- data: フォームの値
- setData(key, value): 値の更新
- post(url) / put(url) / delete(url): 送信
- processing: 送信中フラグ
- errors: サーバ側 Zod が返したエラー（フィールド名 → メッセージ）

UI 側では errors.email を <input> の下に表示するだけで、サーバ側エラーがそのまま画面に反映されます。React Hook Form を別途入れなくても、十分な実用性が出ます。

「保存しました」「削除しました」のようなトースト通知は、Inertia の共有プロパティで実装すると綺麗です。

1. Hono ミドルウェアで、リクエスト処理後にセッションから flash を読み出して共有プロパティに乗せる
2. React 側のレイアウトコンポーネントで usePage().props.flash を見てトースト表示

これで「サーバ側で redirect + flash('saved')」を呼ぶだけで、画面右上にトーストが出る統一動作が組めます。

- N+1 問題: 一覧 + 関連データを取るときは Drizzle の with で eager load するか、leftJoin を使う
- サーバ側 Zod を信頼の唯一の源に: クライアント側にも同じZodスキーマを使ってリアルタイム検証できますが、最終判定はサーバ側
- 大きいフォーム: ファイルアップロードを含む場合は useForm の transform と multipart/form-data を使う
- 楽観的更新: Inertia の preserveScroll: true、only: ['users'] 等の partial reload オプションで体験を磨ける
- トランザクション: 複数テーブルの整合性が必要な処理は Drizzle のトランザクションでまとめる

次回は 認証完全ガイド で、Better Auth / Lucia / 自前セッション の選び方と Inertia 統合のパターンを扱います。シリーズ全体は Part 1: スタック概要 を参照ください。

Q1: Drizzle じゃなくて Prisma でもいいですか？
A: 使えます。ただ Workers 環境ではバンドルサイズと cold start の観点で Drizzle の方が有利です。Node 環境なら Prisma も実用的です。

Q2: React Hook Form を入れる価値はありますか？
A: 大規模で複雑なフォームでは検討の価値あり。中小規模では useForm 単体で十分なケースが多いです。

Q3: 楽観的更新はどうやる？
A: Inertia の transform と React 側の状態更新を組み合わせるか、TanStack Query を併用するパターンがあります。やりすぎないことが重要。

Q4: ファイルアップロードは？
A: useForm は multipart/form-data をサポートしているため、<input type="file" /> の値を setData に渡すだけで動きます。

- Inertia.js 公式 — Forms
- Inertia.js 公式 — useForm helper
- Drizzle ORM 公式
- Zod 公式
- Hono 公式 — Validators