Zodとは？読み方やTypeScriptでの使い方を初心者向けに2分で解説

「バリデーション」とは？

<input>タグで作る入力フォームには、次のような制約をつけられます。

<input type="text" maxlength="20">

maxlengthとは「最大文字数」の意味です。

なので、maxlength="20"で「この入力フォームには20文字以内で入力してください」という制約をつけられたことになります。

20文字以上の文字を打とうとすると、21文字目が入力できません。

20文字を超えるテキストをコピー＆ペーストすると、最初の20文字までしか入力されません。

他にも、次のような制約もつけられます。

<input type="email" name="email">

type="email"により、メールアドレス以外のものが入力されると、「有効なメールアドレスを入力してください。」といったメッセージが表示されます。

このように、アプリがデータを受け入れる前には、そのデータの形や種類を検証するプロセスが必須です。

アプリが予期しないデータを取り込んでしまった場合、それが原因でアプリ内部で大きな問題が発生する可能性があるからです。

「入力されたデータが、アプリ側で求めているデータの形や種類に合致しているかを調べる検証作業」、これをバリデーション（Validation）と呼びます。

そして、このバリデーションのために使われるのがZodです。

正しくないデータが入力された場合、「20文字以内で入力してください」や「有効なメールアドレスを入力してください」といったメッセージを表示する必要があります。

これはJavaScriptを使っても可能ですが、Zodを使えば、より短く、より簡単なコードでそれを実装できます。

さて「データ」というのは、<input>を使ってユーザーからアプリに渡されるものだけではありません。

外部のAPIから取得したものも「データ」です。

それらもアプリに取り込む前に検証するのが安全です。

ここでもZodは使われます。

しかし、これだけの働きをするパッケージなら、Zod以前も複数ありました。

Zodが今このように広く使われている最大の理由、それはTypeScriptとの相性がいいからです。

近年のReact開発ではTypeScriptの導入がデフォルトになっています。

そしてTypeScriptでは、データの形と種類を明示した「型」を書く必要がありますが、Zodを使うことでその型が推論され、コード量をコンパクトにできるのです。

「コード量を抑えながらも、より効果的なデータの検証を行える」

これがTypeScriptとZodを一緒に使う大きなメリットになります。

つまりZod人気の背景には、Zodの機能だけでなく、TypeScriptの利用が増えていることもあるのです。

Zod以外にも、ジェネリクスやイベントの型など、React開発でTypeScriptを使う上では知っておきたいテーマは数多くあります。

まとめて確認したい方は、こちらのガイドが便利です▼