2013年7月14日日曜日

JavaScriptでstatic風なutilクラスを作成

お久しぶりです。
株式会社ジェニシス 技術開発事業部の遠藤 太志郎(Tacy)です。

業務多忙により更新が滞ってしまいましたが、また復活して更新を続けていきたいと思います。

前回から間が空いてしまいましたので、今回は単発の小ネタをご紹介しようと思います。
対象言語はJavaScriptです。

実は我々技術開発事業部では、もうすぐ社内企画としてとあるWebシステムを作ろうとしています。
Webシステムで必ず付いてくる機能と言えば、入力チェックです。

  • 必須項目が空欄だった場合、「○○を入力して下さい」とアラートを出す。
  • 半角数値項目に数値以外が入力されていた場合、「○○には半角数値を入力して下さい」とアラートを出す。
  • 日付項目に存在しない日付が入力されていた場合、「○○に正しい日付を入力して下さい」とアラートを出す。

よくある機能です。
こういった入力チェックはシステム全体で使い回しすることが多く、大抵の場合は「common.js」のような共通ファイルを作って、その中に以下のようなファンクションを作ったりします。

function isEmpty(str){
 return (str == null || str == "");
}

この例は「文字列の空白チェック」です。
他にも「isHankakuNum:半角数値チェック」「isDate:日付チェック」など入力チェックfunctionをズラッと作っていくことでライブラリ化するわけです。

しかし、こうやって単純にfunctionをバンバン作っていってしまいますと、名前空間が汚れてしまいます。
さらに言えば、そのfunctionがcommon.jsから呼び出したものなのか、画面個別に書いたものなのか、パッと見て分かりません。

つまるところ、機能としては出来ているのかもしれないが、イマイチ洗練されていないソースという状態なわけです。

そこで、もうちょっとスマートなやり方をご紹介しましょう。

まず、例としてJavaのケースを挙げてみます。
Javaでは「StringUtils」というライブラリが普及しておりまして、「StringUtils.isEmpry("aaa")」と記述してパラメータの空白チェックを行います。
「StringUtils」というクラスにパッケージされているのでメソッド名が被ったりしないですし、そもそも何のライブラリを呼び出しているのかも一目瞭然です。

これはStringUtilsクラスのisEmptyというメソッドがstaticなメソッドだから、このような記述方法が出来るわけです。
これと同じように、「JavaScriptでもstaticなメソッドを作ればスッキリする」というのが今回の記事の趣旨でございます。

JavaScriptの場合、以下のように書きます。

var StringUtils = new function(){
 this.isEmpty = function(str) {
  return (str==null || str=="");
 };
}

JavaScriptでは関数も変数の一つに過ぎません。
functionを「new」して作成し、StringUtilsという変数に代入することが出来ます。
(JavaScriptに「new」とかあるの?みたいな話も偶に聞きますが、普通にあります。)

これで「なんちゃってstaticメソッド」の完成です。
まあ、JavaScriptにstaticという概念はありませんので、プログラマーの使い勝手がstaticっぽいというだけですが。。。

これを共通JSファイルに書いておけば、後は「StringUtils.isEmpry("aaa")」と書いて空白チェックが行えるという寸法です。
ファイル名は「StringUtils.js」として保存しておけば、どこから呼び出されてきているのかも一目瞭然。
JavaScriptの可読性が少し上がりそうですね。

追伸

さらに小技ですが、型を意識するJavaならStringUtilsという名前のクラスで良いですけれども、型判定が大雑把なJavaScriptではそんなことをしても無駄に複雑化するだけ、という考え方もあります。

文字列チェック用にStringUtils、数値チェック用にIntegerUtils、日付チェック用にDateUtils、なんて細かく分けても面倒なだけです。

というわけで、私は「InputCheckUtils」として『入力チェック用』という機能単位で一括りにすることが多いです。
Javaのようにガチガチにせず、これくらいの緩い制約でクラス設計するのが開発しやすいのではないかと思います。

文字通り、型に囚われない自由自在なコーディングテクニックです。

0 件のコメント:

コメントを投稿