JavaScriptの人気ライブラリ『jQuery』は豊富な機能とクロスブラウザな点がとても良く、私も頻繁に活用しています。
むしろJavaScript開発には欠かせないものとなっています。
そんなjQueryですが、プラグイン開発も盛んで、世界中のエンジニアが様々なプラグインを作成・公開しています。
それも、jQueryはプラグイン開発がとても簡単に出来る事に起因しているのではないでしょうか？
簡単だからこそ、独自にプラグインを追加する方達の理由としては、
新たな便利な機能を追加する方もいれば、ある程度纏まった処理を汎用的にする為にプラグイン化する方もいるでしょう。
プラグイン開発の理由は人それぞれですが、プラグインの作成方法を知らない事にははじまりません。
今回は、そんな『jQuery』の独自プラグインの作成方法を、分かりやすく4ステップに分けて解説したいと思います。
即時実行の無名関数でプラグイン領域を隔離する
まずはプラグイン定義内でjQuery表記でおなじみの『$』を仕様出来る様に即時実行の無名関数として引数を指定してあげます。
これにより、jQuery以外のライブラリで$を使用していたとしても衝突せずに、領域が護ら、グローバル領域にも影響しないので安心です。
早速、無名関数を定義しましょう。
(function($) {
// この中に処理を書く
})(jQuery);
即時実行の無名関数を定義し、引数にjQueryを指定して$で受け取るといった宣言になります。
この中ではjQueryを$として表現する事が出来、お馴染みの使い方が出来る用になります。
また、他のライブラリとも干渉しないので、責任範囲を狭める事も出来て安心です。
プラグインを作成する際には、絶対に定義しておきましょう。
jQueryにプラグインメソッドを追加する
jQueryにおけるプラグイン開発では、新しいメソッドを追加する事がメインとなります。
メソッドを追加する事により、追加された機能を簡単に呼び出せるようになり、連続して処理させたい時にメソッドチェインとして組み込む事も出来る様になります。
メソッドの定義の方法は下記の様に行ってください。
$.fn.プラグイン名 = function( 引数 ){
// プラグインの処理
}
『プラグイン名』の所がメソッド名となり、ここで設定した名前をプラグインを使用する側が利用します。
使い方としては、例えば
$.fn.testPlugin = function( args ){
// プラグインの処理
alert("起動");
}
と作成したとすると、使用する側では
$("#id").testPlugin();
の様に使用します。
今回の例だと、上記の様に書く事で『起動』とアラート表示がされるはずです。
無名関数で囲むと、下記の様な実装になるかと思います。
(function($) {
// この中に処理を書く
// プラグインを定義
$.fn.testPlugin = function( args ){
// プラグインの処理
alert("起動");
}
})(jQuery);
引数の値とデフォルト値
jQueryのプラグインでは引数を受ける事も出来ます。
その引数を使用した内容のプラグインの場合は、毎回引数としてプラグインへ渡すのも構いませんが、
設定しなくても使用出来る用にした方が便利です。
その為に、値のデフォルト値を設定する事が出来ます。
これは、引数とデフォルト値をマージして、引数として該当する値が無かった場合はデフォルトの値を設定する様にする処理です。
(function($) {
$.fn.testPlugin = function( options ){
// プラグインの処理
// デフォルト値を構築
var defaults = {
'name' : "hamada",
'sex' : "men"
};
// 引数とデフォルト値を比較し、変数[setting]へ格納する
var setting = $.extend( defaults, options );
// プラグインの処理
alert(setting['name']+" : "+setting['sex']);
}
})(jQuery);
この様に実装する事によって、
$("#id").testPlugin();
とすれば『hamada : man』とアラートが表示され、$("#id").testPlugin({name:"yamada",sex:"woman"});
とすれば『yamada : woman』とアラートが表示される様になります。メソッドチェインに対応しよう
jQueryの醍醐味の一つが、処理をどんどん繋げていくメソッドチェインです。
$("#id").fadeIn().fadeOut();の様に繋げていく書き方です。
今回独自に作成したプラグインも、このメソッドチェインの中に組み込む事があるかもしれません。
しかし、そのまま何も考えずに作成すると、独自プラグインの処理を挟んだ事によってチェインが途切れてしまいます。
これは不便です。
まれにチェインを崩してでも返却値を処理内容として返却する場合もありますが、
なるべくでしたらメソッドチェイン対応の作り方にしておいた方が良いでしょう。
そんなメソッドチェイン対応の実装方法ですが、
これは単純にjQueryオブジェクトを返却する事で対応可能です。
記述の仕方としては、『return』で『this』を返却して下さい。
(function($) {
$.fn.testPlugin = function( options ){
// プラグインの処理
// デフォルト値を構築
var defaults = {
'name' : "hamada",
'sex' : "men"
};
// 引数とデフォルト値を比較し、変数[setting]へ格納する
var setting = $.extend( defaults, options );
// プラグインの処理
alert(setting['name']+" : "+setting['sex']);
// メソッドチェインに対応させる為にthisを返却する
return( this );
}
})(jQuery);
これらの4つのステップを踏む事で、基本的なプラグインは構築出来ます。
後はプラグインの内容（処理）を皆さんそれぞれで構築して下さいね。
プラグイン作成の本番はココからです。
今回の記事をプラグイン作成のテンプレートとして使って頂けたら幸いです。
作ったプラグインは社内ライブラリとして使用したり、一般公開するも自由です。
しかし、プラグインを作成出来る様になって広がる世界は大きいものでしょう。
是非、積極的にプラグインを開発して下さいね。
Categories:
