OpenAPIでのBackend TypeScriptスキーマ駆動開発

2025-09-22 「『TypeScriptのスキーマ駆動開発』実践事例 LT」の登壇資料です。

Transcript

1. OpenAPI でのBackend TypeScript スキーマ駆動開発 Shodai Suzuki @SoartecL 『TypeScript のスキーマ駆動開発』実践事例 LT 2025.09.22 © MOSH Inc.
2. 鈴木翔大 X @SoartecL VP of Technology Productivity チーム( 技 術基盤チーム) 趣味 OSS Orval メンテナ ダイビング
3. アジェンダ MOSH におけるスキーマ駆動 での開発について スキーマ駆動について 自動生成されるコードの種類 と振る舞いについて OpenAPI からの自動生成 1 2
4. OpenAPI zod msw ＋ swr + fetch API zod Orval Orval フロントエンド BFF スキーマ駆動開発
5. ①FE/BE 間での型安全 ②コード自動生成 得られる恩恵
6. アジェンダ MOSH におけるスキーマ駆動 での開発について スキーマ駆動について 自動生成されるコードの種類 と振る舞いについて 自動生成されるコード 1 2
7. ①Orval の設定ファイル ②自動生成されるコード群 Orval の設定と生成コード
8. API 開発時の実装部分 1. URL とhandler をマッピング【自動生成】 2. リクエストのスキーマチェック【自動生成】 3. handler.ts の実装【自分で開発】 4. レスポンスのスキーマチェック【自動生成】
9. 1. URL とhandler をマ ッピング OpenAPI に定義したURL パスと handler のマッピングをroute.ts とし て生成 route.ts をimport してapp.ts などの entrypoint にマウントして使う route.ts app.ts
10. 2. リクエストのスキー マチェック① handler の雛形をhandlers.ts として自 動生成 既にファイルが存在するパスの場 合は再生成しない 期待するリクエストのzod スキーマを 指定し、同じくOrval で自動生成され る汎用validator 関数を実行 handlers.ts zod.ts
11. 2. リクエストのスキー マチェック② @hono/zod-validator ベースにした バリデーション関数をvalidator.ts と して自動生成 handler がzod スキーマを入力 リクエスト/ レスポンスのパラメータ を検証 スキーマが不正な場合にエラーレス ポンスを構築 validator.ts
12. 3. handler.ts の実装 handlers.ts メインの実装 例: json レスポンスの構築を実装 context.ts Hono Context としてリクエスト/ レスポンスパラメーターを定義 handler 内で`c.params` の様にパ ラメータへアクセス可能 context.ts handlers.ts
13. 4. レスポンスのスキ ーマチェック 期待するリクエストのzod スキーマを 指定し、同じくOrval で自動生成され る汎用validator 関数を実行 handlers.ts
14. API 開発時の メイン処理の実装に集中
15. サンプルコード https://github.com/orval-labs/orval/tree/master/samples/hono/composite-routes-with-tags-split
16. おわり