096. Validation Basics（基本的な入力検証：不備のあるデータを入り口で止める）
原理：正しいデータだけをサーバーへ届ける
なぜ「検証（バリデーション）」が必要か
Webフォームで、名前が空っぽだったり、メールアドレスに @ が入っていなかったり……。
こうした不備のあるデータがサーバーに送られてしまうと、データベースが汚れたり、プログラムがエラーを起こしたりします。
「バリデーション（Validation）」とは、「送られてきたデータが、決められたルール（型や形式）に合っているかを厳しくチェックすること」です。
HTMXでのバリデーションは、大きく分けて二つの壁で行われます。 1. ブラウザの壁（フロントエンド）: 送信ボタンを押す直前に、ブラウザが標準機能でチェックする。 2. サーバーの壁（バックエンド）: 届いたデータを、プログラムが専門的な知識でチェックする。
実践：HTMLの標準機能を最大限に活かす
1. HTML5標準バリデーションとの連携
HTMXは、HTMLが本来持っている「バリデーション機能」を非常に大切にしています。required や type="email" といった属性が付いている場合、HTMXは標準のブラウザと同じように、チェックが通るまでリクエストを送りません。
<form hx-post="/api/register">
<!-- 「必須項目」であることを伝える -->
<input type="text" name="username" required>
<!-- 「メールアドレス形式」であることを伝える -->
<input type="email" name="email" required>
<button type="submit">登録</button>
</form>
2. 「不合格」の時、通信は発生しない
ユーザーが不備のある状態で「登録」を押すと、ブラウザが「ここに値を入力してください」といった吹き出しを出し、HTMXのリクエストは自動的にキャンセルされます。 これにより、サーバーの無駄な負荷を減らすことができます。
3. ステップ・バイ・ステップ解説
- ルールを決める: 「この項目は必須」「これは数字だけ」といったルールを整理します。
- 属性を付ける:
required,minlength,max,patternなどのHTML標準属性を<input>タグに書き込みます。 - スタイルの調整:
:invalidというCSS疑似クラスを使うと、入力ミスがある間だけ枠線を赤くする、といった演出も可能です。
比較：JavaScriptによる検証 vs HTMXの標準検証
JavaScript (jQuery/Reactなど)
- 方法: 送信イベントを横取りし、if文で一つずつ値をチェックするコードを書く。
- 欠点: コードが長くなりやすく、ブラウザ標準の便利な機能（吹き出しなど）と競合することがある。
HTMX (標準連携)
- 方法: HTML属性を書くだけ。
- 利点: ブラウザが最も得意とする「標準の動き」をそのまま利用できるため、動作が軽く、アクセシビリティ（読み上げなど）にも優れている。
まとめ：初心者のための「門番」の立て方
バリデーションは、アプリの「堅牢さ（壊れにくさ）」を証明する大切なステップです。
- まずは標準属性から:
requiredを付ける。ただそれだけで、本格的なバリデーションの第一歩は完了です。 - ユーザーへの優しさ: 間違っていることを「送信した後」に伝えるよりも、「送信する前」に教えてあげる方が、ユーザーはストレスを感じません。
- サーバー側も忘れずに: フロントエンドのチェックは、あくまで「ユーザー体験」のため。セキュリティのために、サーバー側でも同じ（あるいはもっと厳しい）チェックを行うのが鉄則です。
正しいデータで、正しい対話を。バリデーションという門番を適切に配置して、エラーに強く、ユーザーに優しいフォーム体験を提供してください。次の記事では、さらに踏み込んだ「クライアントサイドでの高度な検証（097. Client-side Validation）」をご紹介します。