(Sample)
Webアプリケーションを作るとき、「ユーザーが正しく情報を入力してくれないと困るなあ…」と思ったことはありませんか？
たとえば「メールアドレスを入力してください」と書いてあるのに、「abc」だけ入れて送信されたら、困りますよね。
今回は、HTMLと正規表現（せいきひょうげん）を使って、フォーム入力のチェック、つまりバリデーションについて解説します。
バリデーションとは？
入力内容が「正しいかどうか」をチェックすること
「バリデーション（validation）」とは、入力されたデータがルールに合っているかどうかをチェックする仕組みのことです。
たとえば次のようなルールがあります：
| 入力項目 | チェックする内容（バリデーション） |
|---|---|
| メールアドレス | @と.が含まれているか |
| 電話番号 | 日本の形式「XXX-XXXX-XXXX」かどうか |
| 郵便番号 | 「123-4567」の形式になっているか |
| ユーザー名 | 英数字のみ・6〜12文字か |
| パスワード | 大文字・小文字・数字を含み8〜20文字か |
こうしたバリデーションを**フロントエンド（入力画面）**で設定すると、サーバーに間違ったデータが送られず、ユーザーもすぐ気づけます。
HTMLでのバリデーションの基本
<input>タグの属性でルールを指定！
HTMLでは<input>タグに以下のような属性を使うと、簡単にバリデーションができます。
| 属性名 | 説明 |
|---|---|
type | 入力の種類（email, tel, passwordなど）を指定 |
required | 入力を必須にする |
pattern | 正規表現を使って細かいルールを指定 |
特にpattern属性がポイントです。
正規表現って何？
特別な「記号の言語」で文字のパターンを指定できる！
正規表現（せいきひょうげん）は、文字の並び方にルールをつけるための方法です。
たとえば、以下のようなルールがあります：
| 正規表現 | 意味 | わかりやすい日本語説明 |
|---|---|---|
\d | 数字 | digit（ディジット）の略 |
. | 任意の1文字 | なんでも1文字OK |
{n,m} | n〜m回繰り返す | 例：{3,4}なら3〜4桁 |
[A-Za-z0-9] | 英数字のみ | 大文字・小文字・数字OK |
^ $ | 始まりと終わりを表す | 曖昧さをなくすために使うことが多い |
「パズルのピースが特定の形をしているか確かめる」ような感覚です！
実際のバリデーション例と解説
それでは、あなたが提示してくれたコードの例を使って、1つずつ解説していきましょう。
メールアドレスのチェック
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required />
type="email"だけでもある程度チェックされますpatternでさらに厳密に制限（例：.com,.co.jpなど）
解説
[a-z0-9._%+-]+：@の前の文字（メール名）@：@マークが必要[a-z0-9.-]+：ドメイン名\.：ピリオド[a-z]{2,}：末尾のトップレベルドメイン（例：com）
電話番号（日本形式）
<input type="tel" pattern="\d{2,4}-\d{2,4}-\d{4}" required />
- ハイフン区切りで、
03-1234-5678のような形だけ許可 - 数字部分の桁数は柔軟に設定（
{2,4}）
解説
\d{2,4}：2〜4桁の数字-：ハイフンが必要\d{4}：4桁の数字
郵便番号（日本形式）
<input type="text" pattern="\d{3}-\d{4}" required />
123-4567の形に限定
ユーザー名（英数字6〜12文字）
<input type="text" pattern="[A-Za-z0-9]{6,12}" required />
- 漢字やひらがなはNG
user123のようなIDを作るイメージ
パスワード（強度あり）
<input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}" required />
解説
(?=.*\d)：数字を1つ以上含む(?=.*[a-z])：小文字を含む(?=.*[A-Z])：大文字を含む.{8,20}：全体で8〜20文字
これはちょっと難しめですが、「強いパスワードを作ってね」というルールです。
よくある質問（FAQ）
Q. JavaScriptでのチェックと何が違うの？
HTMLだけでバリデーションすると「簡単」「すぐ反応する」メリットがありますが、複雑なルールには限界があります。
一方、JavaScriptを使えば、たとえば「同じパスワードを2回入れて比較する」などもできます。用途に応じて使い分けることが大切です。
メリットとデメリットをまとめると？
| 比較項目 | HTMLバリデーション | JavaScriptバリデーション |
|---|---|---|
| 速度 | 速い | やや遅いことも |
| 記述量 | 少ない | 多くなる傾向 |
| カスタマイズ性 | 限られる | 高い柔軟性あり |
| 初心者向き | 向いている | 難しめ |
まとめと今後の学び方
バリデーションは「ユーザーに優しく、システムに安全」を実現するための大事な技術です。
新人エンジニアのうちは「この入力で本当に大丈夫かな？」という視点を持つことがとても大切です。
次のステップとしては、
- JavaScriptでのバリデーション方法
- サーバーサイドでの再チェック
- 正規表現をもっと深く学ぶ
このあたりを少しずつ学んでいくと、実践で活きる知識になります！