Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
What is Standard Schema?
Search
Takashi Machinaga
February 26, 2025
Technology
0
89
What is Standard Schema?
Mita.ts #4(2025-02-26)
Takashi Machinaga
February 26, 2025
Tweet
Share
More Decks by Takashi Machinaga
See All by Takashi Machinaga
AI駆動の自動テスト生成
macchiitaka
1
120
事業モメンタムを生み出すプロダクト開発
macchiitaka
1
170
Other Decks in Technology
See All in Technology
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
2
270
Maintainer Meetupで「生の声」を聞く ~講演だけじゃないKubeCon
logica0419
1
160
Amazon CloudWatchのメトリクスインターバルについて / Metrics interval matters
ymotongpoo
3
210
TypeScript 上達の道
ysknsid25
3
360
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
140
Snowflake のアーキテクチャは本当に筋がよかったのか / Data Engineering Study #30
indigo13love
0
250
新規事業におけるAIリサーチの活用例
ranxxx
0
130
claude codeでPrompt Engineering
iori0311
0
390
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
Bliki (ja), and the Cathedral, and the Bazaar
koic
8
1.3k
DATA+AI SummitとSnowflake Summit: ユーザから見た共通点と相違点 / DATA+AI Summit and Snowflake Summit
nttcom
0
190
Introduction to Bill One Development Engineer
sansan33
PRO
0
270
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
710
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Faster Mobile Websites
deanohume
308
31k
Code Review Best Practice
trishagee
69
19k
Gamification - CAS2011
davidbonilla
81
5.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Writing Fast Ruby
sferik
628
62k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
A designer walks into a library…
pauljervisheath
207
24k
Speed Design
sergeychernyshev
32
1k
Transcript
What is Standard Schema? Mita.ts #4(2025-02-26) Takashi Machinaga @macchiitaka
⾃⼰紹介 • @macchiitaka • 2024年8⽉ IVRy に⼊社 ◦ 主に WEB
フロントエンド Takashi Machinaga 2 エンジニア
Zod v3.24.0 3
@standard-schema/spec? 4
@standard-schema/spec ? 5
Colin McDonnell 6 “これは、Zod(👋)、Valibot、ArkType の作成者が、相互運⽤性を促進するため に共同で作成した、すべて TypeScript スキーマライブラリが実装する「共通イン ターフェース」の仕様です。”
= Standard Schema はTypeScript の型定義(意訳) 7
Standard Schema が⽣まれる前の世界 8
スキーマと連携するライブラリ 9 • React Hook Form • Hono • tRPC
• TanStack Router • ...
React Hook Form とスキーマ 10 • React Hook Form +
Zod • React Hook Form + Yup • React Hook Form + Joi • React Hook Form + Valibot • React Hook Form + ArkType • ...
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 • ...
Standard Schema なしで連携する世界 12 React Hook Form Zod Resolver Valibot
Resolver Zod Valibot Input RHF Result Zod Validate Zod Result Valibot Validate Valibot Result
サポートするスキーマの数だけ Resolver を提供 13
😇😇😇 14
Standard Schema がある世界 15
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 は この間の共通 インターフェイス
Standard Schema で連携する世界 17 React Hook Form Standard Schema Resolver
Zod Valibot Input RHF Result Validate Result
🎉 ひとつの Resolver で連携できる 🎉 18
🥳🥳🥳 19
直接スキーマライブラリを利⽤する
直接スキーマライブラリを利⽤する
直接スキーマライブラリを利⽤する
スキーマ定義と実装サンプルを⾒てみよう 23
スキーマ 24 https://github.com/standard-schema/standard-schema/blob/main/packages /spec/src/index.ts • 100 ⾏未満のコード • バリデーターの呼び出し⽅、実⾏結果、エラーメッセージと位置 •
`~standard` プロパティ配下に実装する ◦ `~` で始まるプロパティは⾃動補完の優先順位が低い
スキーマライブラリ 25 https://github.com/standard-schema/standard-schema/blob/main/packages /examples/implement.ts
スキーマ連携ライブラリ 26 https://github.com/standard-schema/standard-schema/blob/main/packages /examples/integrate.ts