React × TypeScript開発で人気のZodとは？【ビギナー向け】

人気のZod

近年のReact × TypeScript開発で非常によく目にするのが、Zodというパッケージです。

ビギナーの中には、このZodの機能や働きがよくわからないと感じている人がいるので、今回はそれを簡単に説明します。

初心者向けなので、具体的なZodのコードの話は出てきません。

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

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

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

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

なので、maxlengthで「この入力フォームには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の導入がデフォルトになっています。

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

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

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

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

▼【無料フロントエンド・ガイド】は下記ページで受け取れます。

https://monotein.com/present-for-readers