読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【HTML5フォームの入力チェックはpatternを使う】

コーディングテクニック

f:id:wp-lesson:20160713221023p:plain

HTML5ではメールフォームなどに使う<input>タグに、
入力チェック用の属性を設定することができる。
 
▼構文

<input type="●●●" pattern="■■■">

typeには、HTML4の頃からあったtext以外に、
email(メールアドレス用)やtel(電話番号用)などが使える。
 
textとの違いは、ブラウザによってはemailを指定するとメールアドレスの書式を自動でチェックしてくれたり、telを指定すると数値やハイフンなど電話番号に使える文字以外をエラーとしてチェックしてくれるというもの。
 
しかし、ブラウザごとにチェックの細かな仕様が異なっていることから、コーディングする人が意図した通りの入力制限を期待することができない。この問題を解決するのがpatternだ。
 
patternはその名から想像できるように、入力できる文字のパターンを強制的に指定するためのもの。
 
▼例:郵便番号の入力欄

<input type="text" pattern="\d{3}-?\d{4}">

\d{3}-?\d{4} という暗号の意味は、
 
「数字3桁と数字4桁をハイフンでつなぐ」
「数字3桁と数字4桁をハイフンでつながない」

 
のどちらでも良いということ。
日本語で言うと、確かに郵便番号のルールと言えるので納得いただけるだろう。
 
ただ、日本語で書いたルールをプログラム的に表すためには、
プログラム用の構文に置き換えないといけない。
 
その結果が \d{3}-?\d{4} というワケだ。
この暗号めいた記法は「正規表現」といって、HTMLに限らずあらゆるプログラム言語に共通する記法である。
 
PHPにもあるし、エクセルのマクロにも。
 
覚えなくてもいい。
 
「HTMLにpatternというフィルター的な機能があるんだな」
 
ってことだけ覚えておいて、ググる
そうすると、こんなページが見つかる。
 
プログラマ御用達、Qiita
qiita.com

 
patternを使えば、HTMLに入力チェックのルールを定義することになるから、
従来のようにJavaScriptでゴリゴリと入力チェック用のプログラムを書く必要がなくなり、
ページ全体のソースコード量が大幅に減らせる。
 
コードが少ないプログラムは、コードが多いプログラムよりも手がかからない。
 
つまり保守性が高いと言える。
 
そして、保守性が高いということは、余計な修正コストの発生を未然に防ぐことにつながる。
 
プログラミングがもたらす、『目には見えない付加価値』だと言えるのではないかと思う。