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
Active Directory攻防
cryptopeg
PRO
8
5.4k
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
220
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
300
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.1k
コンピュータビジョンの社会実装について考えていたらゲームを作っていた話
takmin
1
590
クラウド食堂とは?
hiyanger
0
110
What's new in Go 1.24?
ciarana
1
110
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
180
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
1
310
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
610
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
2.5k
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.4k
Featured
See All Featured
Embracing the Ebb and Flow
colly
84
4.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Building Your Own Lightsaber
phodgson
104
6.2k
A Tale of Four Properties
chriscoyier
158
23k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Bash Introduction
62gerente
611
210k
How to Ace a Technical Interview
jacobian
276
23k
Documentation Writing (for coders)
carmenintech
67
4.6k
Music & Morning Musume
bryan
46
6.4k
Automating Front-end Workflow
addyosmani
1368
200k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
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