Zod + TypeScript で日本語フォーム入力を正規化する — 全角→半角、ひらがな→カタカナ自動変換

// lib/validators/normalize.ts

export function toHalfWidth(str: string): string {
    return str
        // 全角英数字(Ａ-Ｚ, ａ-ｚ, ０-９) → 半角(A-Z, a-z, 0-9)
        .replace(/[Ａ-Ｚａ-ｚ０-９]/g, (s) =>
            String.fromCharCode(s.charCodeAt(0) - 0xFEE0)
        )
        // 全角スペース → 半角スペース
        .replace(/　/g, " ");
}

"Ａ" (U+FF21) - 0xFEE0 = "A" (U+0041)
"０" (U+FF10) - 0xFEE0 = "0" (U+0030)

export function toZenginKana(str: string): string {
    // ひらがな(U+3041-U+3096) → カタカナ(U+30A1-U+30F6)
    return str.replace(/[\u3041-\u3096]/g, (s) =>
        String.fromCharCode(s.charCodeAt(0) + 0x60)
    );
}

"あ" (U+3042) + 0x60 = "ア" (U+30A2)
"か" (U+304B) + 0x60 = "カ" (U+30AB)

import { z } from "zod";
import { toHalfWidth, toZenginKana } from "./normalize";

// 数字フィールド: 全角→半角変換してからバリデーション
const digitsOnly = (len: number, label: string) =>
    z.string()
        .transform(toHalfWidth)  // ★ 全角数字を半角に自動変換
        .pipe(
            z.string()
                .length(len, `${label}は${len}桁です`)
                .regex(/^\d+$/, `${label}は半角数字のみです`)
        );

// カナフィールド: ひらがな→カタカナ変換してからバリデーション
const accountNameKanaSchema = z.string()
    .transform(toZenginKana)  // ★ ひらがなをカタカナに自動変換
    .pipe(
        z.string()
            .min(1, "口座名義（カナ）は必須です")
            .regex(
                /^[ァ-ヶー　\s（）().\-\/0-9A-Z]+$/,
                "口座名義はカナ・英数・記号のみです"
            )
    );

export const supplierCreateSchema = z.object({
    name: z.string().min(1, "仕入先名は必須です"),
    bankCode: digitsOnly(4, "金融機関コード"),       // "０００５" → "0005" ✓
    branchCode: digitsOnly(3, "支店コード"),          // "０１２" → "012" ✓
    accountNumber: z.string()
        .transform(toHalfWidth)
        .pipe(
            z.string()
                .min(1, "口座番号は必須です")
                .max(7, "口座番号は最大7桁です")
                .regex(/^\d+$/, "口座番号は半角数字のみです")
        ),
    accountNameKana: accountNameKanaSchema,           // "かぶしきがいしゃ" → "カブシキガイシャ" ✓
    accountType: z.enum(["普通", "当座"]).default("普通"),
});

// API Route で使う
export async function POST(request: Request) {
    const body = await request.json();
    const result = supplierCreateSchema.safeParse(body);

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

    // result.data は正規化済み
    // "０００５" → "0005" に変換された状態
    const supplier = await prisma.supplier.create({
        data: result.data,
    });
}

ユーザー入力: "０００５"
バリデーション: "半角数字のみです" ← エラー表示
ユーザー: 「え、半角ってなに...」（離脱）

ユーザー入力: "０００５"
transform: "0005" に自動変換
バリデーション: ✓ 通過
ユーザー: （何も気づかない、ストレスゼロ）

// React コンポーネント
const [bankCode, setBankCode] = useState("");
const [bankCodeError, setBankCodeError] = useState("");

const handleBankCodeChange = (value: string) => {
    setBankCode(value);
    const normalized = toHalfWidth(value);
    if (normalized && !/^\d{0,4}$/.test(normalized)) {
        setBankCodeError("金融機関コードは4桁の数字です");
    } else {
        setBankCodeError("");
    }
};

describe("toHalfWidth", () => {
    test("全角数字を半角に変換", () => {
        expect(toHalfWidth("０１２３")).toBe("0123");
    });
    test("全角英字を半角に変換", () => {
        expect(toHalfWidth("Ａｂｃ")).toBe("Abc");
    });
    test("全角スペースを半角に変換", () => {
        expect(toHalfWidth("Ａ　Ｂ")).toBe("A B");
    });
    test("半角はそのまま", () => {
        expect(toHalfWidth("abc123")).toBe("abc123");
    });
    test("混在入力", () => {
        expect(toHalfWidth("１A２b３")).toBe("1A2b3");
    });
});

describe("toZenginKana", () => {
    test("ひらがなをカタカナに変換", () => {
        expect(toZenginKana("かぶしきがいしゃ")).toBe("カブシキガイシャ");
    });
    test("カタカナはそのまま", () => {
        expect(toZenginKana("カタカナ")).toBe("カタカナ");
    });
    test("混在入力", () => {
        expect(toZenginKana("かタかナ")).toBe("カタカナ");
    });
});