Zodを触ってみた話

Zodってなに・・・

Zod公式 : https://github.com/colinhacks/zod

公式ページを見てみると

ZodはTypeScript初のスキーマ宣言と検証のためのライブラリである。

スキーマ、という言葉は、単純な文字列から複雑なネストされたオブジェクトまで、あらゆるデータ型を広く指すために使っている。

Zodは可能な限り開発者に優しい設計になっています。
その目的は、重複した型宣言を排除することです。

Zodを使えば、バリデータを一度宣言すれば、Zodが自動的に静的なTypeScriptの型を推論してくれる。
より単純な型を複雑なデータ構造に合成することも簡単だ。

・・・とあります！
なるほど！よくわからないです。。。

簡単にまとめると、Zodとはデータ型を扱うvalidationライブラリで、
スキーマと異なるデータ型を排除することができます。
言葉だけでは分かりづらいので実際に使ってみます！

まずは、zodのインストールからです。
私は普段yarnを使うのでここではyarnを使用しています。

yarn add zod

使い方

まずは基本的な使い方です。
Formに文字列型を定義しているので、文字列以外はparseでエラーが吐かれます。

import {z} from "zod";

const Form = z.string();

Form.parse('akira');
//エラーが吐かれます。
Form.parse(18);

数値を入力した箇所をコンソールで見てみると、
このようなエラーが吐かれます。
エラー内容はstring型を期待したが、受け取ったのはnumber型ですというエラーです。

ZodError: [
 {
  "code":"invalid_type",
  "expected":"string",
  "received": "number",
  "path": [],
  "message": "Expected string, received number"
 }
]

Object型

z.object()を使ってオブジェクト型でも定義することができます。
name,age,addressをそれぞれ文字列型で定義しています。

import {z} from "zod";

const Form = z.object({
  name: z.string(),
  age: z.string(),
  address: z.string(),
})

Form.parse({name:'akira',age:'18',address:'Tokyo'})
//addressがないよというエラーが吐かれます。
Form.parse({name:'akira',age:'18',})

Formオブジェクトの中にあるaddressを入力しないと、
addressがないよというエラーが吐かれます。
入力漏れなどもエラーを吐いてくれるので非常にわかりやすいです！

ZodError: [
  {
    "code": "invalid_type",
    "expected": "string",
    "received": "undefined",
    "path": [
      "address"
    ],
    "message": "Required"
  }
]

Boolean型

z.boolean()を使って真偽値も簡単に定義できます。
invalid_type_errorを設定することでエラーメッセージをカスタマイズすることが出来ます。

import {z} from "zod";

const isActive = z.boolean({
  required_error: "isActive is required",
  invalid_type_error: "isActive must be a boolean",
});

isActive.parse(true)
isActive.parse(false)
isActive.parse('アキラ')

一番最後の行の文字列で入力したところは、invalid_type_errorで設定したエラーが吐かれます。

isActive.parse('アキラ')

ZodError: [
  {
    "code": "invalid_type",
    "expected": "boolean",
    "received": "string",
    "path": [],
    "message": "isActive must be a boolean"
  }
]

まとめ

今回はZodの基本的な使い方についてまとめてみました！

導入もコマンド一つで出来て、バリデーションのチェックも簡単に行うことができるすぐれものでした！

基本的な使い方はわかったので、Zodを活用してより厳格なTypeScriptを書いていきたいと思います！

Zodを触ってみた話

Shirakata Taisei