Zodライブラリの入門

自作でバリデーションを作成するって面倒ですよね。
簡潔かつ複雑にバリデーションをつけたい。。。そんな時にZodライブラリ！！
項目数が多い、複雑な条件をつけたいというシーンでとても便利なライブラリです。
今回は基本的な使い方をご紹介させていただきます。

Zodとは

TypeScript向けのスキーマ宣言・データ検証ライブラリです。
簡潔にデータ構造や型を定義し、それに基づいてデータ検証を行うことができます。
TypeScript向けと言いましたが、JavaScriptでも動作可能です。

インストール

npm install zod       # npm
yarn add zod          # yarn
bun add zod           # bun
pnpm add zod          # pnpm

使い方

スキーマの生成とデータ検証

単純なスキーマを作成し、関数を使用してデータを検証します。
.parse()と.safeParse()の関数を使用して検証を行います。
.safeParse()は検証失敗時にZodErrorがthrowされません。

import { z } from "zod";

// 文字列スキーマを生成 
const testSchema = z.string();

// .parse()でのデータ検証 
testSchema.parse("name");  // => "name" 
testSchema.parse(10);  // => throws ZodError 

// .safeParse()でのデータ検証 
testSchema.safeParse("name");  // => { success: true; data: "name" } 
testSchema.safeParse(10);  // => { success: false; error: ZodError } 

エラーメッセージを変更したい場合はスキーマ作成時に設定可能です。

const testSchema = z.string({
  required_error: "必須入力です。",
  invalid_type_error: "文字列で入力してください",
})
.min(10, { message: "10文字以上で入力してください" })
.max(20, { message: "20文字以内で入力してください" });

z.object()を使用することで、オブジェクト型で複数のスキーマ生成することも可能です。
z.infer<>で生成したスキーマの型を取得することもできます。

// オブジェクト型スキーマを生成 
const testSchema = z.object({
  name: z.string(),
  number: z.number(),
});

testSchema.parse({ name: "name", number: 10 });

// スキーマから型を取得 
type Test = z.infer<typeof testSchema>;  // => { name: string, number: number } 

型と独自のバリデーション

今まではstring型でしたが、number型やboolean型でも色々カスタマイズ可能です。
NullやUndefinedの許容もスキーマ単位で簡単に設定でき、複雑なバリデーションを簡潔に書くことができます。
自作で作成するより、統一感も生まれて可読性も高まると思います。

// string｜null 型、最大100文字のスキーマ
z.string().nullable().max(100)

// number型、1～100の間のスキーマ
z.number().gte(1).lte(100)

.coerce()を使用することでデータを強制的に特定の型に変換可能です。

const testSchema = z.coerce.string();
testSchema.parse("name");  // => "name" 
testSchema.parse(10);  // => "10" 
testSchema.parse(true);  // => "true" 

また、.regex()や.refine()などで独自のバリデーションを作成することも可能です。

// 半角数字のみを許容 
z.string().regex(/^[!-~¥]*$/, { massage: "半角英数記号で入力してください" })

// 入力文字が同じであるか 
z.object({ string1: z.string(), string2: z.string() })
.refine(({ string1, string2 }) => 
  string1 === string2,
  { 
    message: "文字が一致していません",
    path: ["string2"]
  }
)

最後に

今回は基本的なZodライブラリの使い方を紹介させていただきました。
個人的に、カスタマイズ性能が高く使いやすいと感じました。
他にも便利な機能がありますので、もし興味を持っていただけたら公式サイトをご覧ください。
公式サイト：https://zod.dev/?id=basic-usage

以上、最後まで読んで下さりありがとうございます。