nigoblog

暫定無職のブログ

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

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

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

つまり

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

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



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

javascriptオブジェクト指向は少し特殊です。
PHPJavarubyなどの場合は

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のメソッドの作成方法がわかる

PHPrubyであれば

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つのポイントでした。

関連図書

オブジェクト指向JavaScript

オブジェクト指向JavaScript

javascriptオブジェクト指向を実装する本。

パーフェクトJavaScript (PERFECT SERIES 4)

パーフェクトJavaScript (PERFECT SERIES 4)

javascriptの定番本

JavaScript 第6版

JavaScript 第6版

javascriptの定番本2

JavaScript Enlightenment

JavaScript Enlightenment

javascriptを深く知りたければこちら。
英語だけどかなり読みやすい!