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
Post Zod - Valibotの紹介
Search
kazizi
October 27, 2023
Programming
0
1.4k
Post Zod - Valibotの紹介
【GENDA x ゼスト x バイセル】フロントエンド勉強会
https://buysell-technologies.connpass.com/event/274923/
kazizi
October 27, 2023
Tweet
Share
More Decks by kazizi
See All by kazizi
「実体」で築く共通認識: 開発現場のコミュニケーション最適化 / Let's Get on the Same Page with Concrete Artifacts: Optimization of Communication in dev teams
kazizi55
0
170
Other Decks in Programming
See All in Programming
Goで作る、開発・CI環境
sin392
0
190
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
190
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
100
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
ふつうの技術スタックでアート作品を作ってみる
akira888
0
320
Deep Dive into ~/.claude/projects
hiragram
10
2.3k
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
330
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.8k
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
220
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How STYLIGHT went responsive
nonsquared
100
5.6k
Adopting Sorbet at Scale
ufuk
77
9.4k
Scaling GitHub
holman
459
140k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Agile that works and the tools we love
rasmusluckow
329
21k
GitHub's CSS Performance
jonrohan
1031
460k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
What's in a price? How to price your products and services
michaelherold
246
12k
Embracing the Ebb and Flow
colly
86
4.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Transcript
Post Zod - Valibotの紹介 BuySell Dev Study #4【GENDA x ゼスト
x バイセル】フロントエンド勉強会 2023.10.25
飯島和弥 (@kazizi55) • 2021年BuySell Technologies新卒入社 • 在庫管理SaaSチーム FEエンジニア • 最近はValibotにOSSコミットしてます
• 今回が初めての外部登壇なので緊張し てるかも、、! 01
Zodって便利だけど、bundle size大きくないですか? 06
現在自分が携わっているプロダクトではFEでのバリデーションを実現する ためにZodを導入しています。 そんな中、なぜValibotを選ぼうとしているのかをbundle size観点でお話 しできればと思います。 はじめに 05
伝えたいこと: 「ValibotはZodの書き心地を保ったままbundle sizeを小さ くしたものなので、ぜひ使ってみてね」 06
今回のトークの要約 01 Zodってめちゃ便利ですよね 02 ただし弊プロダクトチーム的にはnot for usだった 03 代わりにValibotを使ってもいいかも (将来的には)
07
Zodとは • class basedのJavaScriptバリデーションライブラリ • GitHub Star: 26K (2023/10/18現在) •
parse, don’t validateの考えに基づいている 参照: https://lexi-lambda.github.io/blog/2019/11/05/parse-don-t-validate/ 08
• class basedなのでmethod chainingで記述していける • Zodとは 09
Zodのエコシステム (FE, BE) • React Hook Form • zodious (=
axios + zod) • tRPC • etc… 10
Zodは既存のバリデーションライブラリと比べても多機能 joi Yup io-ts Zod schemaから 型が生成できる ❌ ◯ ◯
◯ union, intersection型に 対応 ❌ ❌ ◯ ◯ promiseの schemaがある ❌ ❌ ❌ ◯ functionの schemaがある ❌ ❌ ❌ ◯ 参照: https://zod.dev/?id=comparison 11
ただZodは弊プロダクトチームの使い方的には not for usだと思っています 12
not for usと判断した理由 • bundle sizeが12kbもある • 弊プロダクトではZodの一部の機能しか使っていない 13
そもそもなぜbundle sizeは大きくなるのでしょう? 14
そもそもなぜbundle sizeが大きくなるか? • 1個1個のモジュールが大きい場合にbundle sizeが大きくなる • 小さくするためのアプローチはいくつか存在する ◦ code splitting,
compression, tree shaking, etc… 15
tree shakingとは • bundle時に使われていないコードを削ぎ落とす • functionでのみtree shakingできる • import /
exportだけの依存関係に終始しないclassはtree shakingできない 参照: https://webpack.js.org/guides/tree-shaking/ 16
bundle sizeが12kbもある理由 • class basedでtree shakingできない • method chainingでバリデーションを表現できるように各classにclass methodがたくさん定義されている
参照: Zodのsource code 17
在庫管理SaaSではZodの一部の機能しか使っていない • ほぼschemaの定義とsafeParseしか用いてない => 使わないコードはbundleの時点でtree shakingして削ぎ落としたい 18
tree shakingできるZodがあればいいのに、、 19
そこでValibotの出番です! 20
Valibot知っている方いらっしゃいますか? 21
Valibotとは • function basedのJavaScriptバリデーションライブラリ • GitHub Star: 3.8K (2023/10/18現在) •
Zodでできることはほぼできる • function basedなのでtree shakingできる • 個人的に最近issueを立てたりPR送ったりしてコミットしてます 参照: https://github.com/fabian-hiller/valibot https://valibot.dev/thesis.pdf 22
Valibotのエコシステム • Zod同様、FEからBEまでいろんなライブラリに組み込みが可能 ◦ ただし今はZodios的なものはない • 今後はQwikやSolidJS周りのエコシステムにも導入されていく 参照: https://www.builder.io/blog/introducing-valibot#more-integrations 23
function basedなのでtree shakingできる 参照: https://www.builder.io/blog/introducing-valibot#comparison-with-zod 24 Zod Valibot
参照: https://www.builder.io/blog/introducing-valibot#comparison-with-zod 25 Zod Valibot Valibotのbundle sizeはZodの約1/16にまで小さくなる! 0.7kb 11.51kb
どうやってfunction basedでZodと同じ機能を提供してい るか? Zodがclass methodのchainingを用いて実現していた以下を 関数のネストとTypeScriptの型を活用して実現している • schema間の状態の共有 • schema・メソッドの互換性チェック
26
schema間の状態の共有 • Zod 27
schema間の状態の共有 • Valibot 28
schema間の状態の共有 • Valibot ◦ 実際は以下のように関数がネスト & カリー化されて実行される 29
schema・メソッドの互換性チェック • Zod ◦ 素のJSでも互換性が担保される 30
schema・メソッドの互換性チェック • Valibot ◦ TypeScriptであれば互換性がないと型エラーが起こる ◦ 素のJSだと互換性は担保されない (実行までわからない) 31
Valibotの今後の展望 • Deno, BunなどTypeScriptファーストのランタイムのサポートを強め ていく • edge runtimeで使用されることを想定している 参照: https://www.builder.io/blog/introducing-valibot
https://github.com/BuilderIO/qwik/pull/4998 https://github.com/fabian-hiller/modular-forms Cloudflare Workers - worker size 32
ただしValibotは未だ不完全 • 未だv0.19.0 (2023/10/25現在) ◦ 趣味で使ってみてはいかがでしょう • documentが作成途中 • 一旦メジャーリリースまで持っていきたい
33
• Zodはめちゃ便利ですよね • ただし弊プロダクトチーム的にはnot for usだった • 代わりにValibotを使ってもいいかも まとめ 34
伝えたいこと (再掲): 「ValibotはZodの書き心地を保ったままbundle sizeを小さ くしたものなので、ぜひ使ってみてね」 35
|事業内容 • 買取・販売の循環を実現する総合リユースビジネスを展開 • 各種買取・販売チャネルで、誰かの不要なものを、誰かの必要なものへ 36
Cosmos 37
Cosmos 38
THANK YOU
Appendix
• エディタだけだと補完が効かない => GitHub Copilotを使えば補完は効くし、補完用のVSCodeの拡張機 能も開発される予定なので、時間の問題かも Valibotの改善点 39 参照: https://valibot.dev/thesis.pdf
• instance / class methodsがどこで参照されているかを静的解析で特定す るのが難しいから ◦ instanceはmutableなobjectなのでいくらでも変更できてしまう ◦ 色んな呼び方ができてしまう
◦ 呼ばれなくてもmethodのkeyだけ参照される場合もある なぜclass basedだとtree shakingできないか? 参照: https://github.com/rollup/rollup/issues/349#issuecomment-348406169 40
instanceはmutableなobjectなのでいくらでも変更できて しまう • 別のinstance methodで上書きする ◦ const a = new
Foo() ◦ const b = new Bar() ◦ a.foo = b.bar • 全く別のinstanceに作り替える ◦ a.foo = b.bar ◦ a.baz = c.qux ◦ a.quux = d.corge • etc… 41
色んな呼び方ができてしまう • instance.foo()というmethod chainingでの呼び出しの他にも色んな呼び 方ができる ◦ instance['fo' + 'o]() ◦
instance[getFoo()]() ◦ instance[0]() ◦ etc... 42
呼ばれなくてもmethodのkeyだけ参照される場合もある • 以下を使ったりすればclass / instance methodのkeyだけを参照して処理 を書くことができてしまう ◦ Object.getOwnPropertyNames(SomeClass.prototype) ◦
Object.getOwnPropertyNames(Object.getPrototypeOf(instan ce)) 43
• Google Closure CompilerのADVANCED_OPTIMIZATIONSオプショ ンを使えばtree shakingできるが、かなり制限が多い ◦ 全てグローバル変数になるので名前空間問わず命名被りが許されな い ◦
文字列でobject propertyを参照できない ▪ x['key']とかは使えない ◦ etc… ちなみにclass basedでもtree shakingできるcompilerは ある 参照: Understanding the Restrictions Imposed by the Closure Compiler 44