Claude Code के साथ Zod

Zodで型safeなvalidation buildする

Zodは「スkeyマ定義 = type definitions」を実現するTypeScriptファーストのvalidationlibrary है।Claude Codeはスkeyマの設計 सेcomplexなvalidationロジックのimplementation तक、的確にサポートしてくれ है।

basic スkeyマ定義

Claude Codeにdata構造を伝える से ही、appropriateなZodスkeyマがgenerateされ है।

> user登録formのZodスkeyマをबनाओ。
> メール形式check、pathワード強度検証、confirmpathワードの一致checkを含めて。

import { z } from "zod";

const registerSchema = z
  .object({
    name: z
      .string()
      .min(2, "名पहलेは2文字以ऊपरで入力してください")
      .max(50, "名पहलेは50文字以内で入力してください"),
    email: z
      .string()
      .email("有効なメールアドレスを入力してください"),
    password: z
      .string()
      .min(8, "pathワードは8文字以ऊपरで入力してください")
      .regex(/[A-Z]/, "大文字を1文字以ऊपर含めてください")
      .regex(/[a-z]/, "小文字を1文字以ऊपर含めてください")
      .regex(/[0-9]/, "数字を1文字以ऊपर含めてください"),
    confirmPassword: z.string(),
    agreeToTerms: z.literal(true, {
      errorMap: () => ({ message: "利用規約への同意がज़रूरीです" }),
    }),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "pathワードが一致しません",
    path: ["confirmPassword"],
  });

// スkeyマ से型を推論
type RegisterFormData = z.infer<typeof registerSchema>;

ネストされたオブジェクトと配列の検証

complexなdata構造のスkeyマも、Claude Codeに構造を説明すれば正確にgenerateでき है।

const orderSchema = z.object({
  customer: z.object({
    name: z.string().min(1),
    email: z.string().email(),
    phone: z.string().regex(/^0\d{9,10}$/, "有効な電話番号を入力してください"),
  }),
  items: z
    .array(
      z.object({
        productId: z.string().uuid(),
        quantity: z.number().int().positive().max(99),
        options: z.record(z.string()).optional(),
      })
    )
    .min(1, "商品をएक以ऊपर選択してください"),
  shippingAddress: z.object({
    postalCode: z.string().regex(/^\d{3}-?\d{4}$/, "郵便番号の形式が正しくありません"),
    prefecture: z.string().min(1),
    city: z.string().min(1),
    street: z.string().min(1),
    building: z.string().optional(),
  }),
  paymentMethod: z.enum(["credit_card", "bank_transfer", "convenience_store"]),
  notes: z.string().max(500).optional(),
});

type OrderData = z.infer<typeof orderSchema>;

Zodとtanstack/react-hook-formのintegration

formlibraryとZodを組み合わせるpattern है।

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

const loginSchema = z.object({
  email: z.string().email("有効なメールアドレスを入力してください"),
  password: z.string().min(1, "pathワードを入力してください"),
  rememberMe: z.boolean().default(false),
});

type LoginFormData = z.infer<typeof loginSchema>;

function LoginForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<LoginFormData>({
    resolver: zodResolver(loginSchema),
  });

  const onSubmit = (data: LoginFormData) => {
    // data は型safe
    console.log(data.email); // string
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email")} />
      {errors.email && <span>{errors.email.message}</span>}
      <input type="password" {...register("password")} />
      {errors.password && <span>{errors.password.message}</span>}
      <button type="submit">logイン</button>
    </form>
  );
}

カスタムvalidationとtransform

Zodのtransformとrefineをutilizationして、data変換とvalidationを同時に行え है।

const environmentSchema = z.object({
  PORT: z.string().transform(Number).pipe(z.number().int().min(1).max(65535)),
  DATABASE_URL: z.string().url(),
  NODE_ENV: z.enum(["development", "production", "test"]).default("development"),
  LOG_LEVEL: z.enum(["debug", "info", "warn", "error"]).default("info"),
  CORS_ORIGINS: z
    .string()
    .transform((s) => s.split(",").map((o) => o.trim()))
    .pipe(z.array(z.string().url())),
});

// environment variablesのparseと検証を一度に実行
const env = environmentSchema.parse(process.env);
// env.PORT は number 型、env.CORS_ORIGINS は string[] 型

APIrequest・responseのスkeyマ設計

APIのendpointごとにスkeyマを定義し、requestとresponseの両方を検証するpattern है।

// 共通のpageネーションparameter
const paginationSchema = z.object({
  page: z.coerce.number().int().positive().default(1),
  perPage: z.coerce.number().int().min(1).max(100).default(20),
});

// searchparameter
const userSearchSchema = paginationSchema.extend({
  q: z.string().optional(),
  role: z.enum(["admin", "editor", "viewer"]).optional(),
  sortBy: z.enum(["name", "createdAt", "email"]).default("createdAt"),
  sortOrder: z.enum(["asc", "desc"]).default("desc"),
});

// API handlerで使用
async function handleUserSearch(req: Request) {
  const url = new URL(req.url);
  const params = Object.fromEntries(url.searchParams);
  const query = userSearchSchema.parse(params);
  // query は完全に型safe
}

Summary

ZodとClaude Codeの組み合わせ से、validationロジックのimplementation速度が大幅に向ऊपरし है।スkeyマ से型を推論する仕組み से、type definitionsとvalidationruleの二重managementも解消でき है।

formvalidationとのintegrationはReact Hook Form実践ガイドを、型safeなAPIのbuildはtRPC型safeAPIdevelopmentをदेखें。Zodofficial documentationもconfirmしておきましょう。