フルスタックTypeScript入門 ～Hono RPCとZodで実現する型共有～

TypeScriptでフロントエンド、バックエンドを開発する場合、型情報をうまく共有する仕組みがあると便利です。hokkaido.jsでのLT発表資料です。

Transcript

1. フルスタックTypeScript入門 〜Hono RPCとZodで実現する型共有〜 2026.07.22 hokkaido.js vol.07@Sapporo 三浦 恒樹 (MIURA KOUKI) / 医療ITエンジニア
2. 自己紹介 - ドゥウェル株式会社 に所属（マネージャー） 医療ITエンジニア / 診療情報管理士 / 上級医療情報技師 / 医用画像情報専門技師 TypeScript / Vue.js / Node.js / Java / C# / PHP - 3兄弟の父、休日は習い事の送り迎えとか... - 参加している勉強会 札幌PHP勉強会 ゆるWeb勉強会 AWS初心者LT会in札幌 hokkaido.js さっぽろ医療IT勉強会 - コーディングBGM ラックライフ BLUE ENCOUNT SHANK Dizzy Sun Fist JBUG札幌 えびてく 札幌すごいAI会 函館本線沿線勉強会 JPUG-Ezo - Naru, 名前を呼ぶよ - Survivor, ポラリス JavaDO クラメソ札幌IT勉強会（仮） 札幌IT石狩鍋 VueSapporo
3. TypeScriptなのに型がズレる？ フロントとバックエンド開発で直面する不都合な真実
4. TypeScript採用時の「型の分断」 型定義の二重管理 スキーマ生成ツールのコスト バックエンド（Node.js/Hono等）とフロントエンド（Vue/React等） OpenAPI (Swagger) や tRPC などを導入して解決しようとする で、同じAPIデータ構造の型を手動で2箇所定義していませんか？ と、ビルド設定の複雑化やコード生成の手間が発生することがあります。 仕様変更時の更新漏れでランタイムエラー発生 小～中規模プロダクトではオーバーヘッドが大きい
5. フルスタックTypeScriptとは Hono RPC × Zod がもたらす新たなアプローチ
6. 型共有が実現する3つの価値 E2E型安全性 自動補完とリファクタ Single Source of Truth データベース層・バックエンド・フロントエンド IDEの補完機能により、APIパスやクエリ・ボ 型定義と入力バリデーションロジックをZod まで一切の型断絶がなくなり、APIレスポン ディの型補完が完備。安全かつ高速なコード スキーマに一元化。定義のブレを根本から排 スの変更が即時にフロントに伝播します。 変更が可能です。 除します。
7. Hono RPC とは？ HonoはWeb標準に準拠した高速なWebフレームワークです。その強力な機能 の1つがHono RPCです。 サーバー側のルーター定義から推論された型（AppType）をエクスポートし、フ ロントエンド側でhc()として読み込むだけで、型安全なAPIクライアントが即座 に手に入ります。 コード生成ステップ不要！ビルドのオーバーヘッドゼロ https://hono.dev/docs/guides/rpc
8. Zodによるスキーマ駆動開発 ランタイムのデータ検証: TypeScriptの型チェックはコンパイル時のみですが、Zodは実 行時（APIリクエスト時）に実データを確実に検証します。 型推論 (z.infer): Zodスキーマを1つ定義するだけで、z.inferから対応する TypeScript型を自動導出できます。 フロント・バックでの同一共有: フォーム入力検証とサーバー側でのリクエスト検証で全く同じ Zodスキーマを再利用可能です。 https://zod.dev/
9. 組み合わせる：実践コード解説 Schemas → Backend → Frontend の連携ステップ
10. 1. Zodスキーマの定義 (packages/schemas) ここがポイント • 共通パッケージとして切り出し、型とスキーマをまとめて定義 • z.infer により静的型定義の手動記述をゼロに • バリデーションルール（文字数やフォーマット）も一所に集約
11. 2. Backend: Hono + zValidator ここがポイント • zValidator でリクエストボディを自動検証 • c.req.valid(‘json’) には型チェック済みの安全なデータ • メソッドチェインしたAppTypeを抽出・公開
12. 3. Frontend: Vue3 + hc()、Client ここがポイント • hc() でURL補完・HTTPメソッド補完が作動 • レスポンス型は inferResponseType で簡単にキャプチャ • 送信前にフロントでも safeParse し二重の安全性を確保
13. まとめ : 型共有が生み出す最高の開発体験 1. スキーマの一元化 2. ビルド負荷ゼロ 3. 抜群のDXと安心感 Zodにより型定義と Hono RPCはコード生成が不要。 型エラーがAPI不整合を未然に防ぎ、 バリデーションルールを単一の情報源に 型推論だけで軽量・即時反映 大胆なリファクタが可能に ご清聴ありがとうございました！
14. 告知 7/25(土) 17:30～19:00 7/26(日) 13:00～17:00