現在、JavaScriptのライブラリであるjQueryは多くのWebサイトで使われ、フロントエンドのコーディングを支えています。ただ、様々な関数が用意されているとはいえ、デフォルトで用意されている関数だけでは実現できない処理があったり、処理をコンパクトに記述したいことがあると思います。
そのような場合はjQueryのプラグインを作ってしまい、処理をjQueryの関数の一つとして使うことをお勧めします。
本コラムでは、jQueryプラグインの作り方と基本的なサンプルをお伝えします。
jQueryプラグインの例
それでは、早速jQueryプラグインの例を見てみましょう。
|
1 2 3 4 5 |
(function($) { $.fn.sample = function(options){ return("sample"); }; })(jQuery); |
jQueryをロード後、上記のようなコードを追加することでプラグインの完成です。
使い方は下記のようにjQueryオブジェクトに「.」でプラグインの関数を呼び出すことで実行できます。
|
1 |
console.log($("body").sample()); |
それぞれ注意すべきポイントは以下になります。
1.即時関数で囲む
|
1 2 3 |
(function($) { })(jQuery); |
上記のようなコードを即時関数と言います。
JavaScriptは関数スコープと言って、スコープを限定する際は関数で囲む必要があります。即時関数で囲まれた内部で定義された変数はローカル変数になります。
それによって、外部のグローバルな変数を上書きして汚染することが無いため、安全に変数定義を行うことができます。
また、即時関数には引数を持たせることができ、上記の例では、即時関数内では$という変数にjQueryという値を入れていることになります。
jQueryではjQueryオブジェクト内に関数が定義されており、$という名前で置き換えているため、jQueryのオブジェクトに関数を追加するためです。
2.「$.fn.関数名」で定義
即時関数内で「$.fn.関数名」とすることで、jQueryプラグインの関数として認識されます。
jQueryオブジェクトのfnプロパティに関数を定義するような決まりになっているので、そのまま使ってしまいましょう。
メソッドチェーン
jQueryでは、関数を「.」でつなげることで連続した処理を実現するメソッドチェーンという機能があります。
例えば
|
1 |
$("#sample").slideUp(2000).slideDown(2000); |
とすると、初めにスライドインした後にスライドダウンをする、という連続した動作になります。
カスタムで作ったプラグインでも、上記のようなメソッドチェーンを実現するために、以下のようにします。
|
1 2 3 4 5 6 |
(function($) { $.fn.sample = function(options){ console.log("test"); return(this); }; })(jQuery); |
このようにreturn(this)として自分自身（jQueryオブジェクト）を返り値とすることで、
|
1 |
$("#p1").sample().slideUp(2000).slideDown(2000) |
のようにsample()の動作をした後にスライドインとスライドアウトを連続して動作させることができます。
DOMオブジェクトのプロパティの取得
DOMオブジェクトのプロパティを利用したい場合はthisから取得しましょう。
|
1 2 3 4 5 6 7 8 9 10 |
(function($) { $.fn.sample = function(){ var color = this.css("color"); console.log(color); return(this); }; })(jQuery); $("#test").sample(); |
上記の例では$.fn.sampleの中のthisはjQueryオブジェクト、すなわち$(“#test”)を表します。上記のようにthis.css(“color”)とすると、idがtestのDOMのcolor情報を取得することができます。
変数を受け渡す
プラグインにはJavaScriptオブジェクトの引数を渡すことができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
(function($) { $.fn.sample = function(options){ var defaults = { name : 'Suzuki Taro', age : 20 }; var params = $.extend(defaults, options); console.log(params.name + ":" + params.age); return(this); }; })(jQuery); $("#test").sample({ name : 'Tanaka Jiro', age : 18 }); |
上記の例では、nameとageの値が入ったオブジェクトをプラグインの引数に持たせています。プラグイン内ではoptionsという変数に引数が入れられます。
通常は、optionsが空で呼び出された場合もエラーを起こさないように、デフォルト値を指定しておくことが普通です。defaultsというデフォルトの用の値をプラグイン内で定義しておき、$.extendで渡された引数とマージさせます。
最後に
本コラムでは、jQueryの機能を拡張することできる、プラグインの作成方法について解説をしました。今まで使っていたjQueryの処理をプラグインとして内含することで、よりコンパクトに、より構造的にコードを記述ができるのではないかと思います。
