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
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
9
830
開発者体験を定量的に把握する手法と活用事例
ham0215
0
120
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
1.2k
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
14
5.5k
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
290
プルリクエストレビューを終わらせるためのチーム体制 / The Team for Completing Pull Request Reviews
nekonenene
1
930
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
210
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
IAMのマニアックな話2025
nrinetcom
PRO
6
1.4k
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
350
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
7
3.4k
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
51
11k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Code Review Best Practice
trishagee
67
18k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Scaling GitHub
holman
459
140k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Optimizing for Happiness
mojombo
377
70k
Raft: Consensus for Rubyists
vanstee
137
6.8k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
Designing for humans not robots
tammielis
250
25k
Bash Introduction
62gerente
611
210k
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