はじめに

普段はReactをUIフレームワークなどを利用してバリデーションの表示を行っています
フレームワークを利用していると簡単にバリデーションを利用できますが、利用しなくてもシンプルにバリデーション処理がかけるzodについて紹介します

ネットを見かけるとモダン開発というワードと一緒にzodという名前を見る機会が多くなりました。まったく何ができるものなのかも知らなかったので軽くハンズオンをしながら理解していきます

nullを許容しない、型をスキーマから作れる、バリデーションのカスタマイズがしやすいなどzodにはメリットがあるようです

開発環境の準備

$ mkdir zod-ts
$ cd zod-ts

# typescriptのインストール
$ sudo npm install -g typescript

# tsconfig作成
$ tsc --init

# package.json作成 (すべてエンター)
$ npm init

# webpackのインストール
$ npm install --save-dev webpack webpack-cli ts-loader

$ touch webpack.config.js

次にWebpackの設定ファイルを書きます

webpack.config.js

const path = require("path");

module.exports = {
  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: "development", // "production" | "development" | "none"

  // メインとなるJavaScriptファイル（エントリーポイント）
  entry: "./sample.ts",

  output: {
    path: path.join(__dirname, "dist"),
    filename: "index.js",
  },

  module: {
    rules: [
      {
        // 拡張子 .ts の場合
        test: /\.ts$/,
        // TypeScript をコンパイルする
        use: "ts-loader",
      },
    ],
  },
  // import 文で .ts ファイルを解決するため
  resolve: {
    modules: [
      "node_modules", // node_modules 内も対象とする
    ],
    extensions: [
      ".ts",
      ".js", // node_modulesのライブラリ読み込みに必要
    ],
  },
};

package.jsonのスタートスクリプトに以下を追加します

package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "tsc": "tsc", //追加
    "build": "webpack" //追加
  },

次に今回TypeScriptを各ファイルを用意します

sample.ts

let input = document.getElementById("input")! as HTMLInputElement;
input.addEventListener("change", (e) => {
  let value = input.value;
  if (value == "") {
    document.getElementById("valid")!.innerHTML =
      "<span style='color: red;'>未入力です</span>";
  }
});

フロント画面を作成します

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="name" placeholder="Enter your name" />
    <br />
    <div id="valid"></div>
    <script src="./dist/index.js"></script>
  </body>
</html>

次にTypeScriptをJsにコンパイルします

$ npm run build

実際に画面を確認すると以下のようになります

未入力の状態でエンターを押すとエラーが表示されるような単純なものになっています
今回はバリデーションエラーをzodで作成していきます

zodでバリデーションチェックをする

まずはzodをインストールします

$ npm install zod

TypeScirptを以下に変更します

sample.ts

import { z } from "zod";

const name = z.string().min(1, { message: "名前が未入力です" });

let input = document.getElementById("input")! as HTMLInputElement;
input.addEventListener("change", (e) => {
  let value = input.value;
  try {
    name.parse(value);
  } catch (err) {
    if (err instanceof z.ZodError) {
      document.getElementById("valid")!.innerHTML =
        "<span style='color: red;'>" + err.issues[0].message + "</span>";
    }
  }
});

実行します

$ npm run build

うまくバリデーションが動きました

zodについての解説

const name = z.string().min(1, { message: "名前が未入力です" });

名前に対してバリデーションのスキーマを定義しています。今回名前(name)はstringで1文字以上としています。1文字以下の場合messageがエラーとして返ってきます

  try {
    name.parse(value);
  } catch (err) {
    if (err instanceof z.ZodError) {
      document.getElementById("valid")!.innerHTML =
        "<span style='color: red;'>" + err.issues[0].message + "</span>";
    }

name.parse(value)をすることでバリデーションのチェックができます
もしバリデーションエラーの場合Throwされるのでcatchしてエラー処理をします
エラーメッセージはerr.issuesの0要素目(複数のエラーを配列にいれることができます)のmessageを取り出して、HTML要素として追加しています

User型に対してバリデーションチェック

いまはnameに対してバリデーションチェックをしましたが、passwordも追加してみます。個人的に複数のフォームがある際にきれいにかけるのが良いなと思いました

まずはindex.htmlを修正します

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="name" placeholder="Enter your name" />
    <br />
    <input type="text" id="password" placeholder="Enter your password" />
    <br />
    <button id="button">Submit</button>
    <div id="valid"></div>
    <div id="user"></div>
    <script src="./dist/index.js"></script>
  </body>
</html>

次にUser型を用意します

$ mkdir types
$ touch types/user.d.ts

types/user.d.ts

export type User = {
  name: string;
  password: string;
};

次にTypeScriptも変更します

sample.ts

import { z } from "zod";
import { User } from "./types/user";

const UserScheme = z.object({
    name: z
    .string()
    .min(1, { message: "名前が未入力です" })
    .max(20, { message: "名前は20文字以下で入力してください。" }),
    password: z.string().min(1, { message: "パスワードが未入力です" }),
  })
);

let name = document.getElementById("name")! as HTMLInputElement;
let password = document.getElementById("password")! as HTMLInputElement;
let button = document.getElementById("button")!;

button.addEventListener("click", (e) => {
  try {
    UserScheme.parse({ name: name.value, password: password.value });
    const user: User = { name: name.value, password: password.value };
    document.getElementById("user")!.innerHTML =
      "<span style='color: green;'>" + JSON.stringify(user) + "</span>";
  } catch (err) {
    if (err instanceof z.ZodError) {
      const message_list = err.issues.map((issue) => {
        return "<span style='color: red;'>" + issue.message + "</span>";
      });
      const message = message_list.join("<br>");
      document.getElementById("valid")!.innerHTML = message;
    }
  }
});

実行します

$ npm run build

何も入力せずにボタンを押すとエラーが表示されます

今回はUser型でzodのスキーマを定義しました

const UserScheme = z.object({
    name: z
    .string()
    .min(1, { message: "名前が未入力です" })
    .max(20, { message: "名前は20文字以下で入力してください。" }),
    password: z.string().min(1, { message: "パスワードが未入力です" }),
  })
);

パスワードも1文字以上入力されていないとエラーになります

    if (err instanceof z.ZodError) {
      const message_list = err.issues.map((issue) => {
        return "<span style='color: red;'>" + issue.message + "</span>";
      });
      const message = message_list.join("<br>");
      document.getElementById("valid")!.innerHTML = message;
    }

エラーは配列になっているのでmapで回してエラー内容だけを取り出してHTMLを構築しました

User型に要素を追加する

ではここでUser型にageを追加します

types/user.ts

export type User = {
  name: string;
  password: string;
  age: string;
};

しかし、このままではzodのUserSchemeでは型の変更がわからず、ageに対してバリデーションを追加しないといけないことが実行するまで開発者に伝わりません
事前に型エラーになるようにUserSchemeをいじります

sample.ts

import { z } from "zod";
import { User } from "./types/user";

// User型をZodTypeに変換して型として使う
const schemaForType =
  <T>() =>
  <S extends z.ZodType<T, any, any>>(arg: S) => {
    return arg;
  };

const UserScheme = schemaForType<User>()(
  z.object({
    name: z
      .string()
      .min(1, { message: "名前が未入力です" })
      .max(20, { message: "名前は20文字以下で入力してください。" }),
    password: z.string().min(1, { message: "パスワードが未入力です" }),
  })
);

let name = document.getElementById("name")! as HTMLInputElement;
let password = document.getElementById("password")! as HTMLInputElement;
let button = document.getElementById("button")!;

button.addEventListener("click", (e) => {
  try {
    UserScheme.parse({ name: name.value, password: password.value });
    const user: User = { name: name.value, password: password.value };
    document.getElementById("user")!.innerHTML =
      "<span style='color: green;'>" + JSON.stringify(user) + "</span>";
  } catch (err) {
    if (err instanceof z.ZodError) {
      const message_list = err.issues.map((issue) => {
        return "<span style='color: red;'>" + issue.message + "</span>";
      });
      const message = message_list.join("<br>");
      document.getElementById("valid")!.innerHTML = message;
    }
  }
});

このようにすることで

UserSchemeがageがないのでエラーになるようになりました

おわりに

parseするだけで一気に型のエラーを確認できるので個人的にはとてもシンプルにかけるなと思いました
同じような方を2つかかないといけないのでそこをどのようにメンテナンスするかは考えたほうが良さそうです

今回利用したリポジトリは以下になります

参考