フォームバリデーション総点検

コース構成

このコースで学ぶこと

1. 01

   “ある日突然エラー”の正体

   本番で起きる『謎の 500』や『どこにも保存されていない注文』のかなりの割合は、バリデーションのクライアント / サーバー齟齬で起きる。

   • クライアントだけ厳しくしてサーバーが受け入れている
   • サーバーは弾くがエラーメッセージがフロントに届かない
   • 正規表現が違う（電話番号 / 郵便番号）
   Claude に“スキーマの正”を握らせる
2. 02

   Claude に“スキーマの正”を握らせる

   zod や pydantic のスキーマを 1 つの“正”として、Claude にフロントとバックの実装を突き合わせさせる。

   ts

   // schemas/contact.ts （唯一の真実）
   import { z } from "zod";
   export const Contact = z.object({
     name: z.string().min(1).max(50),
     email: z.string().email(),
     phone: z.string().regex(/^0\d{1,4}-\d{1,4}-\d{4}$/),
   });

   “ある日突然エラー”の正体突き合わせプロンプト
3. 03

   突き合わせプロンプト

   “スキーマと、フロントの form コンポーネントと、API ハンドラの 3 つを比較して齟齬を出して” と頼む。

   text

   @schemas/contact.ts と @components/ContactForm.tsx と @app/api/contact/route.ts を読み、以下の表で出力して：
   | 項目 | スキーマ | フロント | サーバー | 差分 |

   出力イメージ突き合わせ結果の表

   | 項目 | スキーマ | フロント | サーバー | 差分 |
   |------|----------|----------|----------|------|
   | name | 1〜50 字 | 1〜50 字 | 上限チェックなし | ⚠ サーバーが 50 字超を受理 |
   | email | email 形式 | email 形式 | email 形式 | — |
   | phone | ハイフン必須 | ハイフン任意 | ハイフン必須 | ⚠ フロントの正規表現が緩い |
   
   差分 2 件を検出。Issue 化を推奨します。

   手を動かす

   0 / 2

   • 差分が出た項目は GitHub Issue 化
   • “差分なし”でも 3 ヶ月に 1 度は再走させる
   Claude に“スキーマの正”を握らせるエラーメッセージの一括日本語化
4. 04

   エラーメッセージの一括日本語化

   ライブラリ既定の英語メッセージは UX を著しく下げる。日本語化マップを 1 ファイルにまとめると、Claude も将来の自分も助かる。

   ts

   export const fieldErrorMessages = {
     name: { min: "氏名を入力してください", max: "50 字以内で入力してください" },
     email: { invalid: "メールアドレスの形式が正しくありません" },
     phone: { regex: "電話番号はハイフンつき（例: 03-1234-5678）で入力してください" },
   };

   突き合わせプロンプトSkill 化と CI 組み込み
5. 05

   Skill 化と CI 組み込み

   “スキーマ突き合わせ” は CI で回すと最も価値が出る。週次ジョブで全フォームを再点検する。

   手を動かす

   0 / 3

   • Skill 名: form-audit / 説明: “フォーム齟齬を検出するとき”
   • 週次の GitHub Actions で実行 → Slack 通知
   • 差分なしが続く期間も“健康記録”として残す

   Lv.5 — 安全な実行

   理解度チェック

   1. Q1.フォームバリデーションの齟齬を防ぐ Skill の前提は？

      Aフロントとバックでそれぞれ独立して書くBzod / pydantic 等のスキーマを『唯一の正』として、Skill がフロント・サーバー実装と突き合わせるCサーバーのみで検証するDバリデーションを廃止する

   2. Q2.個人情報を扱うフォームのバリデーションを AI 補助で見直すとき、人間が必ず担当すべきは？

      AAI に全項目を任せて何も見ないB個人情報法・GDPR 等に関わる必須／任意項目の判断、エラーメッセージの法的妥当性チェックCClaude のサーバー設定D色のコントラスト

   3. Q3.フォームバリデーション齟齬検出 Skill の入力として最も自然なものは？

      Aスキーマ定義、フロント実装、サーバー実装、CLAUDE.md にあるエラーメッセージ規約BPOS 売上 CSVC顧客の購入履歴Dクレジットカード番号
   エラーメッセージの一括日本語化