jQueryプラグインの作り方 ~ 重要な3つのポイント ~

jQuery プラグインの作成方法について書いていきます。

jQueryのプラグインを一言でいうと
「jQueryクラスのメソッド」
ということで、jQueryを一つのクラスと考えそのメソッドを作るということが
「jQuery プラグインを作成する」
ということです。

つまり

javascriptのオブジェクト指向がわかる
javascriptのメソッド作成方法がわかる
jQueryを一つのクラスとして捉える

上記3つのポイントを抑えるだけで、jQueryのプラグインは簡単に作ることができます。
では早速1番目のポイントから書いていきます。

javascriptのオブジェクト指向がわかる

javascriptのオブジェクト指向は少し特殊です。
PHPやJava、rubyなどの場合は

class クラス名 
{
~
}

などのように書きます。
一方javascriptの場合は

var クラス名 = function(){
~
}

と書きます。そうjavascriptの場合
「クラスは関数」
と認識するとかなり楽に入ってきます。
例えば

var dog = function(age, type){
   this.age = age;
   this.type = type;
}
var dog1 = new dog(5, chiwawa);
console.log(dog1.age);
console.log(dog1.type);

とすると5歳のチワワが出来上がります。

ここでのポイントは
「javascriptのクラスは関数」
ということ!

javascriptのメソッドの作成方法がわかる

PHPやrubyであれば

class クラス名
{
    public function メソッド名(){
    }
}

などのようにメソッドを作成します。
javascriptの場合は

var クラス名 = function(){
}
クラス名.prototype.メソッド名 = function(){
}

という風に作成します。
具体的には

var dog = function(){
}
dog.prototype.walk = funtion(){
    this.x += 100;
}

のように書きます。これでdogクラスにwalkというメソッドを追加することが出来ました。

厳密にいうとprototypeは色々ごちゃごちゃした設計があるようですが、簡単のために今はそういう用に書けばいいのだなという理解で充分でしょう!

というわけでここでのポイントは
「javascriptのメソッドは『クラス名.prototype.メソッド名 = 関数』で作成できる!」

jQueryを一つのクラスとして捉える

というわけでここまで来たら簡単ですね。
jQueryはクラス、そしてプラグインはメソッドを作るということ。
それを踏まえると次のようになります。

jQuery.prototype.メソッド名 = function(){
}

しかしjQueryの場合 prototype ではなく fn を使います。

jQuery.fn.メソッド名 = function(){
}

さらに、グローバル変数に影響を与えないために

(function($){
  $.fn.メソッド名 = function(){
  }
})(jQuery)

とすることでグローバル変数に影響を与えないメソッドが出来上がります。
そこで作成したjQuery プラグインがこちら!

(function($){
    $.fn.fade = function(options){
      var target = $(this);
      var options = $.extend({
        fade  : 'out',
        time  : 400,
      }, options);
      var inOut = new Array();
      var timer = new Array();
      inOut['out'] = {'start': 1.0, 'end': 0.0, 'rate': -0.1};
      inOut['in']  = {'start': 0.0, 'end': 1.0, 'rate':  0.1};
      var i = inOut[options.fade].start;
      timer[target] = setInterval(function(){
        i += inOut[options.fade].rate;
        target.css('opacity', Math.floor(i*10)/10);
        if(Math.floor(i*10) == inOut[options.fade].end*10){
          clearInterval(timer[target]);
        }
      }, options.time/10);
    }
  })(jQuery);

というfadeIn(), fadeOut()の再発明的なメソッドを作成しました。
これのいいところはfadeIn(), fadeOut()では
slowやnormalでしか指定できないが、今回作成したものでは
秒数を細かに指定することが出来ます。
また、この関数一つでfadeIn(), fadeOut()どちらも使えます。
極めつけはfadeIn, Outでは終了後、自動的にhide()されるのに対し、
こちらはhide()されません。
つまり相対位置で指定した場合でも崩れないというメリットがあります!!

というようなプラグインを作成しました。
またオプションの指定なんかは上記のプラグイン例を見てください。

最後のポイントは
「jQueryはクラス、プラグインはメソッド、jQuery プラグインを作成するということはjQueryクラスのメソッドを作成するということ!」

というわけで以上、jQuery プラグインを作成するための3つのポイントでした。