Claude Codeでフォームバリデーションを設計・実装する

フォームバリデーションの設計をClaude Codeに任せる

フォームバリデーションは地味ながら重要な機能です。入力パターンの考慮漏れやエラーメッセージの不統一が起きやすく、手作業では時間がかかります。Claude Codeを使えば、Zodスキーマの定義からUIコンポーネントまで一貫して生成できます。

Zodスキーマの生成

ユーザー登録フォームのバリデーションスキーマを作成してみましょう。

> Zodで会員登録フォームのバリデーションスキーマを作って。
> 名前、メール、パスワード、確認用パスワード、年齢、利用規約同意を含めて。
> 日本語のエラーメッセージにして。

import { z } from "zod";

export const registerSchema = z
  .object({
    name: z
      .string()
      .min(1, "名前を入力してください")
      .max(50, "名前は50文字以内で入力してください"),
    email: z
      .string()
      .min(1, "メールアドレスを入力してください")
      .email("正しいメールアドレスの形式で入力してください"),
    password: z
      .string()
      .min(8, "パスワードは8文字以上で入力してください")
      .regex(/[A-Z]/, "大文字を1文字以上含めてください")
      .regex(/[a-z]/, "小文字を1文字以上含めてください")
      .regex(/[0-9]/, "数字を1文字以上含めてください"),
    confirmPassword: z.string().min(1, "確認用パスワードを入力してください"),
    age: z
      .number({ invalid_type_error: "年齢は数値で入力してください" })
      .min(13, "13歳以上である必要があります")
      .max(120, "正しい年齢を入力してください"),
    agreement: z.literal(true, {
      errorMap: () => ({ message: "利用規約に同意してください" }),
    }),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "パスワードが一致しません",
    path: ["confirmPassword"],
  });

export type RegisterFormData = z.infer<typeof registerSchema>;

React Hook Formとの連携

スキーマをReact Hook Formと組み合わせて使うコンポーネントも一度に生成できます。

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { registerSchema, type RegisterFormData } from "./schema";

export function RegisterForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<RegisterFormData>({
    resolver: zodResolver(registerSchema),
  });

  const onSubmit = async (data: RegisterFormData) => {
    const res = await fetch("/api/register", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });
    if (!res.ok) throw new Error("登録に失敗しました");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <div>
        <label htmlFor="name">名前</label>
        <input id="name" {...register("name")} />
        {errors.name && (
          <p className="text-red-500 text-sm">{errors.name.message}</p>
        )}
      </div>

      <div>
        <label htmlFor="email">メールアドレス</label>
        <input id="email" type="email" {...register("email")} />
        {errors.email && (
          <p className="text-red-500 text-sm">{errors.email.message}</p>
        )}
      </div>

      <div>
        <label htmlFor="password">パスワード</label>
        <input id="password" type="password" {...register("password")} />
        {errors.password && (
          <p className="text-red-500 text-sm">{errors.password.message}</p>
        )}
      </div>

      <div>
        <label htmlFor="confirmPassword">パスワード（確認）</label>
        <input
          id="confirmPassword"
          type="password"
          {...register("confirmPassword")}
        />
        {errors.confirmPassword && (
          <p className="text-red-500 text-sm">
            {errors.confirmPassword.message}
          </p>
        )}
      </div>

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "送信中..." : "登録する"}
      </button>
    </form>
  );
}

サーバーサイドバリデーションの統一

同じZodスキーマをサーバーサイドでも使えば、バリデーションロジックを統一できます。

import { registerSchema } from "./schema";

// Express/Next.js APIルートでの使用例
export async function POST(request: Request) {
  const body = await request.json();
  const result = registerSchema.safeParse(body);

  if (!result.success) {
    return Response.json(
      { errors: result.error.flatten().fieldErrors },
      { status: 400 }
    );
  }

  // バリデーション通過 → DBに保存
  const user = await createUser(result.data);
  return Response.json({ user }, { status: 201 });
}

Claude Codeでバリデーションルールを追加する

既存フォームにバリデーションを追加したい場合も簡単です。Claude Codeの入門ガイドの手順でセットアップ後、次のように依頼します。

> src/components/ProfileForm.tsx に郵便番号フィールドを追加して。
> 形式は123-4567で、ハイフンなしの7桁でもOKにして。
> リアルタイムでフォーマットを自動補正する機能も入れて。

Claude Codeはフォーム全体の構造を理解した上で、既存のバリデーションルールと一貫した形で新しいフィールドを追加します。リファクタリングのパターンについてはリファクタリングの自動化も参考になります。

まとめ

Claude Codeを使えば、Zodスキーマの定義、React Hook Formとの連携、サーバーサイドバリデーションまで一貫した設計を短時間で実現できます。バリデーションルールの追加や変更も、既存コードとの整合性を保ちながら自動で行えます。

公式ドキュメントはClaude Codeから確認できます。