動的 Web にバリデーションをいちいち追加するのが面倒くさ過ぎる、という話

動的な Web アプリを作ってるとき、毎回「このフィールドに数字以外が入ってないか」「この値、空じゃないよね？」みたいなチェックを書くの、いい加減にうんざりしてきませんか？私はしてます。というか、もう嫌気がさしてます。

1. バリデーション地獄へようこそ

最初は軽い気持ちで作り始めたフォーム。React でも Vue でも Svelte でもいいんですが、なんかこう、さっとできる気がしたんですよね。でも気づいたら、全てのインプットに required だの minLength だの、ちょっと凝ったやつになると「この ID は既に存在しています」とかサーバーに問い合わせる非同期バリデーションとかまで始まって、もうフォームの方がアプリ本体より複雑じゃない？ってなるわけです。

「ちゃんとバリデーションしないとユーザーが困る」とか「セキュリティ的に良くない」とか、耳にタコができるほど聞きました。でもなあ、ちょっと数字入れるだけの欄に isNaN チェック書いて、エラーメッセージ表示して、スタイル変えて、ついでに入力途中は無視したりして…って、人生の貴重な 30 分が消えてるんですよ。

2. それでも書かねばならぬ

バリデーションをサボった未来は、必ず地獄です。サーバー側でエラー吐かれて「お客様の操作が正しくありませんでした」的な謎のエラーを出す羽目になる。あるいは、 SQL に ''（空文字）が突っ込まれて「なんかデータ壊れてね？」みたいな事態になる。で、結局デバッグに 1 時間吸われて「最初にバリデーション書いときゃよかった」ってなるの、もう様式美ですよね。

3. じゃあどうすりゃいいのか？

理想は「全部自動でやってくれ」なんですが、現実はそんなに甘くない。TypeScript 使って型ベースでバリデーションするライブラリ（zodとかyupとか）を使うのがせいぜい。でもこれも、最初にスキーマ書くのがめんどくさい。しかも変更あるたびに更新しないとエラーになるし、結局保守の手間はある。

フロントとバックでスキーマを共有できる仕組み（tRPC とか）も増えてきたけど、それでも「バリデーションは魔法のように勝手にやってくれるもの」にはなってない。毎回「このフィールドも追加しとくか〜」って感じで、結局人力ですよ。しかも、その「ちょっとした変更」が一番めんどくさい。

結論：やっぱりめんどい

バリデーションは大事。大事なんだけど、めちゃくちゃめんどくさい。でもやらないと後で地獄を見る。だから、今日も私は半泣きになりながら、input 要素にonChangeで検証関数をつけているわけです。