フロントエンド界隈で「Zod」という言葉を耳にする機会が増えたと思っています。
なんとなく検証するテストコードなのはわかっています。
ただ、当然書けないしそもそも何か全くわかっていなかったので知識の更新のためにメモとして残します。
この記事は、3分ぐらいで「Zodってなに？」を説明するための記事です。
Zod（ゾット）ってなに？
Zodの目的は「重複した型宣言を排除すること」だそうです。
正直よく分かりませんが…スキーマ宣言および検証ライブラリです。
例えばAPI経由で送られてくるデータやコード状に管理されるグローバルメニューのリンク集のようなデータの正しさを保証するために利用されるケースが多い印象です。
もう少し理解を深めたかったのでチュートリアルをやってみたいと思います！
Zodチュートリアルをやってみる
Githubのページに行きgit cloneしようと思ったらCodespacesが立ち上がる仕様だったので立ち上げてみました。
Codespaceを立ち上げると下記のような表示がブラウザに表示されると思います！
CodespacesはGithubの提供するクラウドで開発環境を構築できるものです！
npm run exercisを実行してチュートリアルの開始
コマンドを実行するとエクササイズのリストがコマンドラインに表示されるので矢印キーで操作してEnterします。
Enterを押すとZodによるバリデートが実行されてコマンドラインにエラーが表示されるので修正していきます。
どこをどのように直せば良いのか見当もつかないので用意してくれている01-number.solution.tsを確認して下記を追加しました。
+ const numberParser = z.number();
export const toString = (num: unknown) => {
+ const parsed = numberParser.parse(num);
- return String(num);
+ return String(parsed);
};
修正したら無事テストが通ったようです。
Zod（ゾット）まとめ
APIの場合どのようなデータ形式で返ってくるか不透明だとエラーの原因になることもあるのでZodを使って検証することでデータの正しさを保証できるのは良いと思いました。
すべてを検証するのはやりすぎなこともあります。
チェックするということはそれだけzodによる検証コードを書くことになります…。
当然メンテナンスも必要になってきますので、必要最低限にできることが望ましいです。
フレームワークが用意しているコンポーネントなどすでに十分な型のチェックが行われているものまで検証することはないと思うので過度に導入してしまわないように私も注意したいと思います。