JavaScriptでユーティリティクラスを作成

2013/09/04

JavaScriptでユーティリティクラスの作成

アプリケーションが大きくなるとJavaScriptの保守性が悪くなってきます。。特に業務システムの場合、何万コードのJavaScriptが元気に絡み合いながら動いています。
開発初期から保守性や可読性を気にしていれば良かったのですが、どうしても開発当初はデスマになるのがSIの常でしょうか。。その場合「動けばOK」なノリでプログラミングしてしまいます。。

とは言うものの、私たちは明るい未来に向かって歩まないといけません。そういった負債を返却していく必要があります。
ということで、絡み合ったソースをこれ以上ひどくならないように対処するとき、効果的なのがユーティリティクラスの作成。コピペで大量に作成された処理達はユーティリティメソッドとして扱うことができそうです。
ユーティリティクラスはstaticなメソッドの集まりですので、こんな感じで書いています。


var AClassUtils = function(){};
AClassUtils.methodA = function() {
  alert('methodA');
}
AClassUtils.methodB = function() {
  alert('methodB');
}

ユーティリティクラスの継承

JSが肥大化していくと、どうしても似た処理が出てきますね。引数にフラグを渡してメソッドの中でちょこざいな分岐入れたりするのは嫌です。。そんな時のために継承を登場させています。


var XClassUtils = function(){};
XClassUtils.methodA = function() {
  alert('methodXA');
}
XClassUtils.methodB = function() {
  alert('methodXB');
}

var YClassUtils = $.extend(true, function(){}, XClassUtils);
YClassUtils.methodA = function() {
  XClassUtils.methodA();
  alert('methodYA');
}
YClassUtils.methodC = function() {
  alert('methodYC');
}

こういったやり方を継承と呼んで良いか分かりませんが、とりあえず親クラスの静的メソッドを兼ね備えた子クラスを作りたかったので目的はこれで果たせます。
キモは$.extendを使用して親クラスをコピーするところでしょうか。そうすれば子クラスを拡張しても親クラスは何も影響しないですからね。

ちなみに上記例のYClassUtilsクラスの各メソッドの動作は以下のようになります。
・YClassUtils.methodA:親クラスXClassUtilsのmethodAを実行して、alert('methodYA')を実行
・YClassUtils.methodB:親クラスXClassUtilsのmethodBを実行
・YClassUtils.methodC:alert('methodYC')を実行

JavaScriptの世界は奥が深いので日々勉強と実践が必要そうです。でも知れば知るほど良い解決策が見つかりそうなのでそれがやっていて楽しいですね。

  • このエントリーをはてなブックマークに追加
Related

PHPで動画の撮影日を取得

PHPで動画の撮影日を取得 概要 PHPからffprobeコマンドを実行し、動画の撮影日時を取得します。 コード $posted_at = ...

FullCalendarでGoogleカレンダーのようなUIを実装

jQueryプラグインFullCalendarのサンプル 概要 FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を...

PHP Laravel5.2でmulti-auth(複数テーブルでの認証)を実装

Laravel5.2でマルチ認証 概要 LaravelとはPHPの中で今最も伸びているフレームワークです。 処理速度が遅いなどありますが、かなり使い安く拡...

PHP 正規表現でIPアドレス形式の文字列か判定

正規表現でIPアドレスの入力チェック 概要 フォームで入力されたIPアドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...

rbenv環境でRuby on Railsのアプリケーションを一瞬で自動生成

アプリケーション構築時に最初に行う手順 概要 アプリケーションを作成するまでの手順を記載しています。 rbenvなどの環境が設定済と仮定して話を進めま...

Rails devise・authority・rolifyで権限付きの認証機能

devise・authority・rolify 概要 3つのGemを使用して、権限付き認証機能を実装します。 gem インストール Gemfile ...
トップへ戻る