Javascriptでつくる入力チェックフレームワークの第２回です。
一回目をまだ読んでいない方は、こちらです（Javascriptで作るフレームワーク【フォーム入力チェックＦＷを自作しよう(1)】）
前回は、自作入力チェックフレームワークを使う側での例を示しました。
使った場合は、ソースコードを書く量が格段に減り、それに伴って開発効率があがる、という話でした。
今回は、実際のフレームワーク側の実装を見ていきます。
※実際のフレームワークとそれを利用する部分の全ソースは、ページの下の方にリンクを貼ってあります。
今回作成した入力チェックフレームワーク
入力チェックフレームワークの実装内容
作っているものは、大きく分けて２つです。
１つめは、入力チェック関連の共通関数群。
今回は、必須チェック、メールチェック、電話番号チェックがありますので、文字列を引数にして、その文字列がＯＫかＮＧかをチェックして返すという関数を３チェック分つくりました。
メールと電話番号のチェックは、正規表現を使って、それと合致するかどうかを返すというよくあるパターンで実装しました。
今回のポイントではないので正規表現の詳しい説明は割愛しますが、この部分だけでも単体利用は可能です。
文字列.match(正規表現) で、その文字列が妥当であればtrueを、ＮＧの場合はfalseを返すので、それをチェックしています。
正規表現はJavascriptのルールに従い、/と/でくくっています。
メールチェックの例
var _checkFunc = {};
// メール文字列チェック
_checkFunc['email'] = function(mailaddr) {
var regs = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/;
if (!mailaddr.match(regs)) {
return false;
}
return true;
}
ここで、この関数宣言なに？と思った方は鋭いです。
フレームワーク化するための最大のポイントが、関数定義の部分になります。
_checkFunc['email']=function(mailaddr) {
この１行。
無名関数で定義して連想配列に代入しています。
こう定義することで、この配列にキー（この場合は、【email】)を渡すことで、関数を呼び出せるわけです。
つまり、メールアドレスが正しいかチェックするのであれば、
チェック結果=_checkFunc['email'](入力文字列)
と関数呼び出しができます。
おなじように、必須入力チェックは、_checkFunc['mandatory']で呼び出せますし、電話番号チェックは
_checkFunc['tel']で呼び出せるわけです。
更に付け加えれば、ＵＲＬチェックとかも追加できますし、自分たちだけ独自の例えば社員番号チェックなどを作って登録しておけば、使う時にそのキーを指定するだけで、入力チェックフレームワークが、そのチェック関数を自動で呼び出してチェックすることもできます。
_checkFunc['url']=function(urlstr) {ＵＲＬチェック処理}
_checkFunc['employ-number']=function(empnum) {社員番号チェック処理}
実際に呼び出している部分は、下のコーディングですが、チェックする項目の値(value)を取り出して、チェック関数をコールしているだけです。
ここで、上で書いたように、_checkFunc[chkid]で関数を呼び出していますが、chkidに対して、'email'とか'tel'とかがはいってくるので、定義された関数が呼び出されるというわけです。
for (var j = 0; j < nchk; j++) {
var inpstr = document.getElementById(chkItems[j]).value;
if (!_checkFunc[chkid](inpstr)) {
// エラー発生時の処理
return false;
}
} // end of for
ここで、フレームワークを呼び出すときの定義に戻ってみます。
ckid = ["mandatory","email","tel"];
ＩＤはこのように定義していたので、たとえば、chkid[0]には、"mandatory"がはいっています。これを引数に呼び出せば、必須チェックが動くわけです。
ckitems = [["cm_subject","cm_name", "cm_email"],・・・]
おなじように、ckitems[0]には、項目、名前、メールのＩＤが指定されているから、項目、名前、メールの項目に対して、必須チェックが呼び出されるという仕組みになっています。
フレームワーク的な作り方について
一通りの入力チェックフレームワークの仕組みについて説明しました。
フレームワークといえば、AngulerとかReactとかをイメージして、自分でつくろうと思うと一歩引いてしまうかも知れませんが、実際にはちょっとしたもの、普段プログラムで記述する内容であっても、一定の流れがあるものは、その一連の処理を行うフレームワークとして実装することが可能なのです。
類似するような処理、同じようなフローで実施される処理は、フレームワーク化できるし、類似処理が多ければ多いほど、その生産性向上の効果は、はかりしれません。
かなり前のことになりますが、日本にオブジェクト指向を導入するときのプロジェクトに参加したことがありました。
その時は、まだできたばかりのC++で、がちがちにオブジェクト指向でプログラミングしたら、生産性が5倍という結果になりました。新聞発表もしています。
もちろん、数字は状況によってかわるし、実際にはそう上がるモノでもありません。
今回のコードにしたところで、フレームワークを作らずにコーディングすることで、量は数倍になっても、１つ作ってコピーしながら修正した方が、今回の部分だけならおそらく早くできあがります。
それでも、今回つくったような部品群、フレームワークを自分の共通資産としてもっておくことができたなら、次の開発では数倍の生産性も出すことができそうです。
あわせて、開発した立場でも安心できるんですよね。１つ動けば定義した部分さえ間違ってなければ、他も動くと自信がもてるからです。
もっとも今は、自分で作るよりも世の中でできているものを組み合わせる方が主流なのかも知れません。
だとしたら、自分で作って公開する、という流れが世の中に最も貢献できる話なのかもしれないです。
記事の中では、ソースコードの一部を割愛したりしていますので、全ソースは下記にリンクしておきます。
このままでもある程度は使えますが、実際の業務で利用するには、フォームの二重リクエストチェックとか、戻るボタン制御、エラー以外のカーソル位置制御などもでてくるかも知れません。
今回は考え方をお伝えするために、シンプルなものにしましたので、必要に応じて拡張してお使いください。
利用する側のソース（ＨＴＭＬと入力チェックフレームワークを呼び出す処理）
https://www.simpleonesoft.com/blog/mcode/mailfm01.html
適当な名前のＨＴＭＬファイルを作成してそこにコピーすれば、Javascriptの動作だけであれば、ローカルＰＣでも確認できます。
入力チェック関数群と入力チェックフレームワーク
https://www.simpleonesoft.com/blog/mcode/mailfm02.html
jsファイルにしてＨＴＭＬからインクルードしてください。
※サンプルのＨＴＭＬでは、"inputcheck.js"という名前のファイルで読み込んでいます。
それぞれが開発するプログラムでも、共通化、フレームワーク化を考えることで、プログラミングの世界がひろがるものだと、そう思って今回書いてみました。
最後までお読みいただき、ありがとうございました。
