関連スライド
Meta XR SDK(V66-74)でQuestアプリを開発
あうぜん
1.1M
各ページのテキスト
やってみた Orval 2025-09-22 『TypeScriptのスキーマ駆動開発』実践事例 LT
自己紹介 足立蓮 / 皮しばき / r315dr / moeyashi アイコンは中音ナタ(@natanakane)さん作 趣味：麻雀、コーヒー
Orval って何？ OpenAPI の定義から型定義やAPIクライアントコードを自動生成してくれるツール
やってみる npx orval --input ./petstore.yml --output ./src/petstore.ts
できた src/petstore.ts Pet などの型定義 などのAPIクライアントコード axiosが使われている listPets, createPets
...OpenAPI-Generator でいいか とはならないところを見ていく
orval.config.(js|mjs|ts)
client: "swr" にしてみる を使ったAPIクライアントコードが生成される。嬉しい React Queryも選べる。 SWR
mock: true を指定してみる モックデータ生成関数とMSWのハンドラが生成される。嬉しい
client: "zod" にしてみる のスキーマが生成される。嬉しい Zod
これできる？
テストではMSWの delay(0) にしたい デフォルトは delay(1000) npm run dev と npm run test で切り替えたい
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)());
レスポンスをZodで検証したい クライアントとスキーマは別々で生成される listPets の内部でZod検証されていると安心 API
この機能はなさそう GitHub IssueやDiscussionでの同様の話はオープンされている スキーマ駆動ならバックエンドからの返り値は信用しよう、という話ではある
おわり
参考 公式ドキュメント Orval petstore.yml
試した成果物 https://github.com/moeyashi/practice-orval