オブジェクト指向 システム開発 プログラミング

Javascriptで作るフレームワーク【フォーム入力チェックFWを自作しよう(2)】

Javascriptでつくる入力チェックフレームワークの第2回です。

一回目をまだ読んでいない方は、こちらです(Javascriptで作るフレームワーク【フォーム入力チェックFWを自作しよう(1)】

前回は、自作入力チェックフレームワークを使う側での例を示しました。

使った場合は、ソースコードを書く量が格段に減り、それに伴って開発効率があがる、という話でした。

今回は、実際のフレームワーク側の実装を見ていきます

※実際のフレームワークとそれを利用する部分の全ソースは、ページの下の方にリンクを貼ってあります。

 

今回作成した入力チェックフレームワーク

Javascriptフレームワーク

入力チェックフレームワークの実装内容

作っているものは、大きく分けて2つです。
1つめは、入力チェック関連の共通関数群。

今回は、必須チェック、メールチェック、電話番号チェックがありますので、文字列を引数にして、その文字列がOKかNGかをチェックして返すという関数を3チェック分つくりました。

メールと電話番号のチェックは、正規表現を使って、それと合致するかどうかを返すというよくあるパターンで実装しました。

今回のポイントではないので正規表現の詳しい説明は割愛しますが、この部分だけでも単体利用は可能です。

文字列.match(正規表現) で、その文字列が妥当であればtrueを、NGの場合は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) {

この1行。

無名関数で定義して連想配列に代入しています。

こう定義することで、この配列にキー(この場合は、【email】)を渡すことで、関数を呼び出せるわけです。

つまり、メールアドレスが正しいかチェックするのであれば、

チェック結果=_checkFunc['email'](入力文字列) 

と関数呼び出しができます。

おなじように、必須入力チェックは、_checkFunc['mandatory']で呼び出せますし、電話番号チェックは
_checkFunc['tel']で呼び出せるわけです。

更に付け加えれば、URLチェックとかも追加できますし、自分たちだけ独自の例えば社員番号チェックなどを作って登録しておけば、使う時にそのキーを指定するだけで、入力チェックフレームワークが、そのチェック関数を自動で呼び出してチェックすることもできます。

_checkFunc['url']=function(urlstr) {URLチェック処理}

_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"];

IDはこのように定義していたので、たとえば、chkid[0]には、"mandatory"がはいっています。これを引数に呼び出せば、必須チェックが動くわけです。

ckitems = [["cm_subject","cm_name", "cm_email"],・・・]
おなじように、ckitems[0]には、項目、名前、メールのIDが指定されているから、項目、名前、メールの項目に対して、必須チェックが呼び出されるという仕組みになっています。

フレームワーク的な作り方について

一通りの入力チェックフレームワークの仕組みについて説明しました。

フレームワークといえば、AngulerとかReactとかをイメージして、自分でつくろうと思うと一歩引いてしまうかも知れませんが、実際にはちょっとしたもの、普段プログラムで記述する内容であっても、一定の流れがあるものは、その一連の処理を行うフレームワークとして実装することが可能なのです。

類似するような処理、同じようなフローで実施される処理は、フレームワーク化できるし、類似処理が多ければ多いほど、その生産性向上の効果は、はかりしれません

 

かなり前のことになりますが、日本にオブジェクト指向を導入するときのプロジェクトに参加したことがありました。

その時は、まだできたばかりのC++で、がちがちにオブジェクト指向でプログラミングしたら、生産性が5倍という結果になりました。新聞発表もしています。

もちろん、数字は状況によってかわるし、実際にはそう上がるモノでもありません。

今回のコードにしたところで、フレームワークを作らずにコーディングすることで、量は数倍になっても、1つ作ってコピーしながら修正した方が、今回の部分だけならおそらく早くできあがります。

それでも、今回つくったような部品群、フレームワークを自分の共通資産としてもっておくことができたなら、次の開発では数倍の生産性も出すことができそうです。

あわせて、開発した立場でも安心できるんですよね。1つ動けば定義した部分さえ間違ってなければ、他も動くと自信がもてるからです

もっとも今は、自分で作るよりも世の中でできているものを組み合わせる方が主流なのかも知れません。
だとしたら、自分で作って公開する、という流れが世の中に最も貢献できる話なのかもしれないです。

記事の中では、ソースコードの一部を割愛したりしていますので、全ソースは下記にリンクしておきます。

このままでもある程度は使えますが、実際の業務で利用するには、フォームの二重リクエストチェックとか、戻るボタン制御、エラー以外のカーソル位置制御などもでてくるかも知れません。

今回は考え方をお伝えするために、シンプルなものにしましたので、必要に応じて拡張してお使いください。

利用する側のソース(HTMLと入力チェックフレームワークを呼び出す処理)
https://www.simpleonesoft.com/blog/mcode/mailfm01.html

適当な名前のHTMLファイルを作成してそこにコピーすれば、Javascriptの動作だけであれば、ローカルPCでも確認できます。

入力チェック関数群と入力チェックフレームワーク
https://www.simpleonesoft.com/blog/mcode/mailfm02.html
jsファイルにしてHTMLからインクルードしてください。
※サンプルのHTMLでは、"inputcheck.js"という名前のファイルで読み込んでいます。

それぞれが開発するプログラムでも、共通化、フレームワーク化を考えることで、プログラミングの世界がひろがるものだと、そう思って今回書いてみました

最後までお読みいただき、ありがとうございました。

-オブジェクト指向, システム開発, プログラミング
-,

Copyright© SIMPLEONESOFT (BLOG) , 2022 All Rights Reserved.