Post Zod - Valibotの紹介

【GENDA x ゼスト x バイセル】フロントエンド勉強会
https://buysell-technologies.connpass.com/event/274923/

Transcript

1. Post Zod - Valibotの紹介 BuySell Dev Study #4【GENDA x ゼスト x バイセル】フロントエンド勉強会 2023.10.25
2. 飯島和弥 (@kazizi55) • 2021年BuySell Technologies新卒入社 • 在庫管理SaaSチーム FEエンジニア • 最近はValibotにOSSコミットしてます • 今回が初めての外部登壇なので緊張し てるかも、、！ 01
3. Zodって便利だけど、bundle size大きくないですか？ 06
4. 現在自分が携わっているプロダクトではFEでのバリデーションを実現する ためにZodを導入しています。 そんな中、なぜValibotを選ぼうとしているのかをbundle size観点でお話 しできればと思います。 はじめに 05
5. 伝えたいこと: 「ValibotはZodの書き心地を保ったままbundle sizeを小さ くしたものなので、ぜひ使ってみてね」 06
6. 今回のトークの要約 01 Zodってめちゃ便利ですよね 02 ただし弊プロダクトチーム的にはnot for usだった 03 代わりにValibotを使ってもいいかも (将来的には) 07
7. 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
8. • class basedなのでmethod chainingで記述していける • Zodとは 09
9. Zodのエコシステム (FE, BE) • React Hook Form • zodious (= axios + zod) • tRPC • etc… 10
10. Zodは既存のバリデーションライブラリと比べても多機能 joi Yup io-ts Zod schemaから 型が生成できる ❌ ◯ ◯ ◯ union, intersection型に 対応 ❌ ❌ ◯ ◯ promiseの schemaがある ❌ ❌ ❌ ◯ functionの schemaがある ❌ ❌ ❌ ◯ 参照: https://zod.dev/?id=comparison 11
11. ただZodは弊プロダクトチームの使い方的には not for usだと思っています 12
12. not for usと判断した理由 • bundle sizeが12kbもある • 弊プロダクトではZodの一部の機能しか使っていない 13
13. そもそもなぜbundle sizeは大きくなるのでしょう？ 14
14. そもそもなぜbundle sizeが大きくなるか？ • 1個1個のモジュールが大きい場合にbundle sizeが大きくなる • 小さくするためのアプローチはいくつか存在する ◦ code splitting, compression, tree shaking, etc… 15
15. tree shakingとは • bundle時に使われていないコードを削ぎ落とす • functionでのみtree shakingできる • import / exportだけの依存関係に終始しないclassはtree shakingできない 参照: https://webpack.js.org/guides/tree-shaking/ 16
16. bundle sizeが12kbもある理由 • class basedでtree shakingできない • method chainingでバリデーションを表現できるように各classにclass methodがたくさん定義されている 参照: Zodのsource code 17
17. 在庫管理SaaSではZodの一部の機能しか使っていない • ほぼschemaの定義とsafeParseしか用いてない => 使わないコードはbundleの時点でtree shakingして削ぎ落としたい 18
18. tree shakingできるZodがあればいいのに、、 19
19. そこでValibotの出番です！ 20
20. Valibot知っている方いらっしゃいますか？ 21
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
22. Valibotのエコシステム • Zod同様、FEからBEまでいろんなライブラリに組み込みが可能 ◦ ただし今はZodios的なものはない • 今後はQwikやSolidJS周りのエコシステムにも導入されていく 参照: https://www.builder.io/blog/introducing-valibot#more-integrations 23
23. function basedなのでtree shakingできる 参照: https://www.builder.io/blog/introducing-valibot#comparison-with-zod 24 Zod Valibot
24. 参照: https://www.builder.io/blog/introducing-valibot#comparison-with-zod 25 Zod Valibot Valibotのbundle sizeはZodの約1/16にまで小さくなる！ 0.7kb 11.51kb
25. どうやってfunction basedでZodと同じ機能を提供してい るか？ Zodがclass methodのchainingを用いて実現していた以下を 関数のネストとTypeScriptの型を活用して実現している • schema間の状態の共有 • schema・メソッドの互換性チェック 26
26. schema間の状態の共有 • Zod 27
27. schema間の状態の共有 • Valibot 28
28. schema間の状態の共有 • Valibot ◦ 実際は以下のように関数がネスト & カリー化されて実行される 29
29. schema・メソッドの互換性チェック • Zod ◦ 素のJSでも互換性が担保される 30
30. schema・メソッドの互換性チェック • Valibot ◦ TypeScriptであれば互換性がないと型エラーが起こる ◦ 素のJSだと互換性は担保されない (実行までわからない) 31
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
32. ただしValibotは未だ不完全 • 未だv0.19.0 (2023/10/25現在) ◦ 趣味で使ってみてはいかがでしょう • documentが作成途中 • 一旦メジャーリリースまで持っていきたい 33
33. • Zodはめちゃ便利ですよね • ただし弊プロダクトチーム的にはnot for usだった • 代わりにValibotを使ってもいいかも まとめ 34
34. 伝えたいこと (再掲): 「ValibotはZodの書き心地を保ったままbundle sizeを小さ くしたものなので、ぜひ使ってみてね」 35
35. ｜事業内容 • 買取・販売の循環を実現する総合リユースビジネスを展開 • 各種買取・販売チャネルで、誰かの不要なものを、誰かの必要なものへ 36
36. Cosmos 37
37. Cosmos 38
38. THANK YOU
39. Appendix
40. • エディタだけだと補完が効かない => GitHub Copilotを使えば補完は効くし、補完用のVSCodeの拡張機 能も開発される予定なので、時間の問題かも Valibotの改善点 39 参照: https://valibot.dev/thesis.pdf
41. • instance / class methodsがどこで参照されているかを静的解析で特定す るのが難しいから ◦ instanceはmutableなobjectなのでいくらでも変更できてしまう ◦ 色んな呼び方ができてしまう ◦ 呼ばれなくてもmethodのkeyだけ参照される場合もある なぜclass basedだとtree shakingできないか？ 参照: https://github.com/rollup/rollup/issues/349#issuecomment-348406169 40
42. 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
43. 色んな呼び方ができてしまう • instance.foo()というmethod chainingでの呼び出しの他にも色んな呼び 方ができる ◦ instance['fo' + 'o]() ◦ instance[getFoo()]() ◦ instance[0]() ◦ etc... 42
44. 呼ばれなくてもmethodのkeyだけ参照される場合もある • 以下を使ったりすればclass / instance methodのkeyだけを参照して処理 を書くことができてしまう ◦ Object.getOwnPropertyNames(SomeClass.prototype) ◦ Object.getOwnPropertyNames(Object.getPrototypeOf(instan ce)) 43
45. • 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