フロントエンド開発 / 約20分

フォームとバリデーションの設計

なぜこれを学ぶか

フォームは「入力を受け取る」だけに見えて、実はエラー表示のタイミング、送信中の二重送信防止、楽観的更新など設計論点が最も詰まったUIです。

バリデーションのタイミングには流派があります: onBlur（フォーカスアウト時）が最もバランスが良く、onChange（入力毎）はうるさくなりがち、onSubmitのみは不親切です。

送信中は必ずボタンを disabled に。二重送信は決済システムでは致命的なバグになります。

サーバーエラーの表示設計も重要です。「エラーが発生しました」だけではユーザーは直せません。どのフィールドが、なぜダメか をフィールドの近くに表示します。

AIにフォームを書かせると「happy path」しか実装されません。異常系（ネットワーク断、バリデーションエラー、セッション切れ）のチェックリストを持ちましょう。

重要ポイント

バリデーションはonBlur基準がバランス良し
送信中はdisabledで二重送信防止
異常系のチェックリストを持つ

コーディング演習実際に書く

学んだ知識を使って、実際にバリデーション関数を書いてみましょう。要件: ①nameは必須・50文字以内 ②emailは必須・「@」を含むこと ③passwordは必須・8文字以上・英字と数字を両方含むこと。戻り値は { valid: boolean, errors: オブジェクト } で、エラーメッセージはフィールド名をキーにして格納します（例: errors.name = '名前は必須です'）。

function validateSignup(values) // values = { name, email, password }

模範解答（読んで理解したら、自力で書き直してみましょう）

function validateSignup(values) {
  const errors = {}

  if (!values.name) {
    errors.name = '名前は必須です'
  } else if (values.name.length > 50) {
    errors.name = '名前は50文字以内で入力してください'
  }

  if (!values.email) {
    errors.email = 'メールアドレスは必須です'
  } else if (!values.email.includes('@')) {
    errors.email = 'メールアドレスの形式が正しくありません'
  }

  if (!values.password) {
    errors.password = 'パスワードは必須です'
  } else if (values.password.length < 8) {
    errors.password = 'パスワードは8文字以上で設定してください'
  } else if (!/[a-zA-Z]/.test(values.password) || !/[0-9]/.test(values.password)) {
    errors.password = 'パスワードは英字と数字を両方含めてください'
  }

  return {
    valid: Object.keys(errors).length === 0,
    errors: errors,
  }
}

スキルセルフチェック

このレッスンの内容をどの程度理解できましたか？

弱点マップで全体を確認する

前のレッスン次のレッスン