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
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
11k
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
240
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
160
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
190
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
23
9k
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
1k
生成AI時代のコンポーネントライブラリの作り方
touyou
1
260
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
15
5.3k
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
710
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
250
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Designing for Performance
lara
610
69k
Raft: Consensus for Rubyists
vanstee
140
7k
What's in a price? How to price your products and services
michaelherold
246
12k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Navigating Team Friction
lara
187
15k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Optimising Largest Contentful Paint
csswizardry
37
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