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