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
37
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
事業モメンタムを生み出すプロダクト開発
macchiitaka
0
100
Other Decks in Technology
See All in Technology
What's new in Go 1.24?
ciarana
1
110
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
220
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
160
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
180
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.2k
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
160
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
220
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
14
5.1k
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
2
230
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
520
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
230
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
A Philosophy of Restraint
colly
203
16k
The Language of Interfaces
destraynor
156
24k
Git: the NoSQL Database
bkeepers
PRO
427
65k
Bash Introduction
62gerente
611
210k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Producing Creativity
orderedlist
PRO
344
40k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Adopting Sorbet at Scale
ufuk
74
9.2k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
A better future with KSS
kneath
238
17k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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