jQueryプラグインの作り方についてまとめ

jQueryを使っていると自分で書いたスクリプトをプラグイン化したいと思うはずです。スクリプトが書けるようになったらプラグイン化はとても簡単です。今回は、jQueryプラグインの作り方につていて説明します。

無名関数でプラグイン領域を定義

無名関数でプラグイン領域を定義することで「$」記号を使用しても他のプラグインやフレームワークとの競合を避けることが可能です。jQueryオブジェクトが$に書き換わることで「$」記号を自由に使うことができます。

(function($) {
    //ここにスクリプトを記述する
})(jQuery);

jQueryプラグインを定義する

次にjQueryのfnプロパティに関数を定義してプラグインを割り当てます。

(function($) {
    $.fn.hoge = function(){
        //ここにスクリプトを記述する
    };
})(jQuery);

メソッドチェーンの持続をさせる

プラグインでメソッドチェーンを持続させるために、thisを返すように設定します。

(function($) {
    $.fn.hoge = function(){
        //メソッドチェーンの持続
         return this.each(function() {
              var $this = $(this);
              //ここにスクリプトを記述する
         });
    };
})(jQuery);

デフォルトとオプションを定義する

プラグインを使用する時にオプションが利用できるようにします。$.extendを利用しデフォルト値を設定しオプション値が指定されている場合、併合出来るようにします。

(function($) {
    $.fn.hoge = function( options ){
        //デフォルトを設定する
         var settings = $.extend( {
             'baseWidth'   : '960',
             'baseHeight'  : '522'
         }, options);

         return this.each(function() {
              var $this = $(this);
              //ここにスクリプトを記述する
         });
    };
})(jQuery);

プラグインを呼び出す時にオプション値を定義します。以下の場合、baseWidthは1280にbaseHeightは720にオプション値は変更されます。

$("#hoge").hoge({
     //オプションを設定する
     'baseWidth'   : '1280',
     'baseHeight'  : '720'
});