人気のZod
近年のReact × TypeScript開発で非常によく目にするのが、Zodというパッケージです。
しかし、このZodの機能や働きがよくわからないと感じているビギナーは少なくありません。
なので今回は、Zodを簡単に紹介します。
初心者向けなので、具体的なZodのコードの話は出てきません。
「バリデーション」とは？
<input>タグで作る入力フォームには、次のような制約をつけられます。
<input type="text" maxlength="20">
maxlengthとは「最大文字数」の意味です。
maxlength="20"で「この入力フォームには20文字以内で入力してください」という制約をつけられたことになります。
20文字以上の文字を打とうとすると、21文字目が入力できません。
20文字を超えるテキストをコピー＆ペーストすると、最初の20文字までしか入力されません。
他にも、次のような制約もつけられます。
<input type="email" name="email">
type="email"により、メールアドレス以外のものが入力されると、「有効なメールアドレスを入力してください。」といったメッセージが表示されます。
このように、アプリがデータを受け入れる前には、そのデータの形や種類を検証するプロセスが必須です。
アプリが予期しないデータを取り込んでしまった場合、それが原因でアプリ内部で大きな問題が発生する可能性があるからです。
「入力されたデータが、アプリ側で求めているデータの形や種類に合致しているかを調べる検証作業」、これをバリデーション（Validation）と呼びます。
そして、このバリデーションのために使われるのがZodです。
Zod人気の背景
正しくないデータが入力された時には、ユーザーに通知する必要があります。
次のようなメッセージです。
「20文字以内で入力してください」
「有効なメールアドレスを入力してください」
これはJavaScriptを使っても可能ですが、Zodを使えば、より短く、より簡単なコードでそれを実装できるのです。
さて「データ」というのは、<input>を使ってユーザーからアプリに渡されるものだけではありません。
外部のAPIから取得したものも「データ」です。
それらもアプリに取り込む前に検証するのが安全で、ここでもZodは使われます。
しかし、これだけの働きをするパッケージなら、Zod以前も複数ありました。
Zodが今このように広く使われている最大の理由、それはTypeScriptとの相性がいいからです。
近年のReact開発ではTypeScriptの導入がデフォルトになっています。
下記記事を見てください。
• React + Vite + TypeScriptの使い方（ビギナー向け）
• Next.js × Typecriptの使い方（ビギナー向け）
これらの記事を見ればわかるように、TypeScriptでは、データの形と種類を明示した「型」を書く必要があるのです。
これがZodを使うことでその型が推論され、コード量をコンパクトにできます。
【 コード量を抑えながらも、より効果的なデータの検証を行える 】
これがTypeScriptとZodを一緒に使う大きなメリットです。
つまりZod人気の背景には、Zodの機能だけでなく、TypeScriptの利用が増えていることもあるのです。