Orvalやってみた

Transcript

1. Orval やってみた 2025-09-22 『TypeScript のスキーマ駆動開発』実践事例 LT
2. 自己紹介 足立蓮 / 皮しばき / r315dr / moeyashi アイコンは中音ナタ(@natanakane) さん作 趣味：麻雀、コーヒー
3. Orval って何？ OpenAPI の定義から型定義やAPI クライアントコードを自動生成してくれるツール
4. やってみる npx orval --input ./petstore.yml --output ./src/petstore.ts
5. できた src/petstore.ts Pet などの型定義 listPets, createPets などのAPI クライアントコード axios が使われている
6. ...OpenAPI-Generator でいいか とはならないところを見ていく
7. orval.config.(js|mjs|ts)
8. client: "swr" にしてみる SWR を使ったAPI クライアントコードが生成される。嬉しい React Query も選べる。
9. mock: true を指定してみる モックデータ生成関数とMSW のハンドラが生成される。嬉しい
10. client: "zod" にしてみる Zod のスキーマが生成される。嬉しい
11. これできる？
12. テストではMSW のdelay(0) にしたい デフォルトは delay(1000) npm run dev と npm run test で切り替えたい
13. delayFunctionLazyExecute: true 実行時に評価されるようにする mock: { type: "msw", delay: () => (process.env.NODE_ENV === "test" ? 0 : 1000), delayFunctionLazyExecute: true, }, // 生成結果 return http.get('*/pets', async (info) => {await delay((() => process.env.NODE_ENV === "test" ? 0 : 1e3)());
14. レスポンスをZod で検証したい API クライアントとスキーマは別々で生成される listPets の内部でZod 検証されていると安心
15. この機能はなさそう GitHub Issue やDiscussion での同様の話はオープンされている スキーマ駆動ならバックエンドからの返り値は信用しよう、という話ではある
16. おわり
17. 参考 Orval 公式ドキュメント petstore.yml
18. 試した成果物 https://github.com/moeyashi/practice-orval