フォームの入力チェックを実装していると、「文字数が0じゃないか」「メールの形式が正しいか」「数値の範囲内か」といった条件を、if文で1つずつ積み重ねていくことがあります。項目数が増えるほど読みにくくなるこのやり方を、少し整理してみます。

if文を積み重ねると起きること

// 悪い例: if文の積み重ね
function validateForm(data) {
  if (!data.email || data.email.length === 0) return "メールを入力してください";
  if (!data.email.includes("@")) return "メールの形式が正しくありません";
  if (!data.age || data.age < 18) return "18歳以上を入力してください";
  if (!data.age || data.age > 120) return "年齢が正しくありません";
  return null;
}

項目が2〜3個のうちは問題ありませんが、5項目、10項目と増えていくと、どの条件がどの項目のためのものか、コード全体を読まないと把握しづらくなります。項目を1つ追加するたびに、既存の条件文の間に新しいif文を挟み込む作業も発生します。

パターン1: 項目ごとにチェックをまとめる

// 良い例: スキーマとして1箇所にまとめる（Zodの例）
import { z } from "zod";

const formSchema = z.object({
  email: z.string().email("メールの形式が正しくありません"),
  age: z.number().min(18, "18歳以上を入力してください").max(120, "年齢が正しくありません"),
});

Zodのようなライブラリを使うと、「この項目はどんな条件を満たすべきか」を1つのオブジェクトとして宣言できます。条件がif文として散らばるのではなく、項目ごとにまとまるので、後から見返した時に構造が把握しやすくなります。

パターン2: エラーメッセージも一緒に定義する

先ほどの例のように、.email("メールの形式が正しくありません")のように、条件とエラーメッセージをセットで書けます。悪い例のif文では、条件とエラーメッセージが別々の行にあり、メッセージだけ後から見直そうとすると、対応する条件を目で追う必要がありました。まとめて書けることで、この対応関係のズレが起きにくくなります。

パターン3: チェック結果をまとめて受け取る

const result = formSchema.safeParse(data);
if (!result.success) {
  console.log(result.error.issues); // 全項目のエラーをまとめて取得
}

safeParseを使うと、最初のエラーで処理を止めるのではなく、全項目のエラーを一度にまとめて受け取れます。悪い例のif文では最初に引っかかった条件のメッセージしか返せませんでしたが、複数項目に同時に不備がある場合でも、まとめてユーザーに伝えられます。

AIに依頼する時のポイント

AIに「フォームのバリデーションを追加して」と依頼すると、if文を積み重ねる形で返ってくることも、スキーマ形式で返ってくることもあります。項目数が少ないうちはどちらでも大きな差はありませんが、「今後項目が増える見込みがある」と伝えておくと、スキーマ形式でまとめた実装を優先して提案してもらいやすくなります。返ってきたコードがどちらの形かを見分けられるようになると、AIの提案をそのまま受け取るだけでなく、状況に合わせて頼み方を変える力が育っていきます。

面談なしで、今日から始められます

この講座は 未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を全20セッションで体系化した教材付きプランです。無料相談を挟まず、申し込んだその日から教材で学習を始められます。AIが学習パートナーになって何度でも質問でき、つまずいた所だけチャットで直接サポートします。

  • 今日から始める（教材完全版＋月5,500円・チャット質問し放題・いつでも解約OK）→ https://menta.work/plan/20251?ref=menta-knowledge
  • いきなりは不安な方へ：無料の教材体験版もあります（最初の数セッション分）→ プラン詳細をご覧ください