What is Standard Schema?

Mita.ts #4（2025-02-26）

1. What is Standard Schema? Mita.ts #4（2025-02-26） Takashi Machinaga @macchiitaka
2. ⾃⼰紹介 • @macchiitaka • 2024年8⽉ IVRy に⼊社 ◦ 主に WEB フロントエンド Takashi Machinaga 2 エンジニア
3. Zod v3.24.0 3
4. @standard-schema/spec? 4
5. @standard-schema/spec ? 5
6. Colin McDonnell 6 “これは、Zod（👋）、Valibot、ArkType の作成者が、相互運⽤性を促進するため に共同で作成した、すべて TypeScript スキーマライブラリが実装する「共通イン ターフェース」の仕様です。”
7. = Standard Schema はTypeScript の型定義（意訳） 7
8. Standard Schema が⽣まれる前の世界 8
9. スキーマと連携するライブラリ 9 • React Hook Form • Hono • tRPC • TanStack Router • ...
10. React Hook Form とスキーマ 10 • React Hook Form + Zod • React Hook Form + Yup • React Hook Form + Joi • React Hook Form + Valibot • React Hook Form + ArkType • ...
11. React Hook Form とスキーマ 11 • React Hook Form + Zod Resolver + Zod • React Hook Form + Yup Resolver + Yup • React Hook Form + Joi Resolver + Joi • React Hook Form + Valibot Resolver + Valibot • React Hook Form + ArkType Resolver + ArkType • ...
12. Standard Schema なしで連携する世界 12 React Hook Form Zod Resolver Valibot Resolver Zod Valibot Input RHF Result Zod Validate Zod Result Valibot Validate Valibot Result
13. サポートするスキーマの数だけ Resolver を提供 13
14. 😇😇😇 14
15. Standard Schema がある世界 15
16. Standard Schema なしで連携する世界 16 React Hook Form Zod Resolver Valibot Resolver Zod Valibot Input RHF Result Zod Validate Zod Result Valibot Validate Valibot Result Standard Schema は この間の共通 インターフェイス
17. Standard Schema で連携する世界 17 React Hook Form Standard Schema Resolver Zod Valibot Input RHF Result Validate Result
18. 🎉 ひとつの Resolver で連携できる 🎉 18
19. 🥳🥳🥳 19
20. 直接スキーマライブラリを利⽤する
21. 直接スキーマライブラリを利⽤する
22. 直接スキーマライブラリを利⽤する
23. スキーマ定義と実装サンプルを⾒てみよう 23
24. スキーマ 24 https://github.com/standard-schema/standard-schema/blob/main/packages /spec/src/index.ts • 100 ⾏未満のコード • バリデーターの呼び出し⽅、実⾏結果、エラーメッセージと位置 • `~standard` プロパティ配下に実装する ◦ `~` で始まるプロパティは⾃動補完の優先順位が低い
25. スキーマライブラリ 25 https://github.com/standard-schema/standard-schema/blob/main/packages /examples/implement.ts
26. スキーマ連携ライブラリ 26 https://github.com/standard-schema/standard-schema/blob/main/packages /examples/integrate.ts