はじめてのjQueryのプラグインの作り方～5ステップ

今や当たり前に使われているjQuery。
私もWeb制作時には、JavaScriptを利用する時には、かなりの割合で利用させて頂いています。

jQueryの利点はこんな感じ

クロスブラウザ
Write Less, Do More – より少ない書き方で、もっと多くこなす
プラグインが豊富(世界中で作成・公開されている)

自分で書いても少ないコードで多くの要望に応えることができて、さらにプラグインを利用することにより多くのことができる点は、とても素晴らしいと思います。

jQueryを利用していると自分で作った処理をプラグイン化したいな。多くの人に使ってもらいたいなということがありませんか？
プラグインを作るのは、jQueryを利用することができれば、そんなに難しいことはありません。
作法を勉強して、あとは、どんどん作りこむだけで作成が可能です。

本エントリーでは、jQueryプラグインをいくつかのステップを踏むだけでつくれちゃうよーというエントリーです。
では、はじめましょう！

STEP1:自作jQueryプラグインのファイルを作る

最初にファイルを作りましょう。
jQueryプラグインは機能ごとに独立させるので、使いたい時に使う分だけ読み込むのがよいと思います。
そのため、機能としても独立させるのと同様、プラグインごとにファイルを独立させましょう。

ファイル名は通常のJavaScriptと同様に.jsを拡張子にして、jQueryプラグインであることプラグイン名がわかりやすくするとよいと思います。

リスト1:ファイル名フォーマット
jQuery.プラグイン名.js

basicプラグインの場合
jQuery.basic.js

STEP2:無名関数でプラグイン領域を定義する

プラグインは、グローバル領域に定義するべきではありません。
プラグイン名、関数や変数がグローバルを汚染すべきではないですし、他の何からも独立させておきたいです。
無名関数でラップすることにより、ドル記号($)を使用しても、他のJavaScriptフレームワーク(prototype.jsなど)との競合を回避することができます。
また、jQueryキーワードの代わりにドル記号($)を使用することで、プラグイン全体のコード量を減らすことができる、簡潔で保守がしやすくなるなどの利点もあります。

無名関数(ラッパー関数)定義

(function($) {
})(jQuery);

STEP3:jQueryプラグインを定義する

作成した無名関数にメソッドを追加することで、プラグイン呼び出しを可能にします。
ちょっと難しいですが、jQueryのfnプロパティに関数を定義することで、プラグインを割り当てます。
ここまでは、おまじないとしてコピペしてしまっても問題ありません。（プラグイン名は都度、変えてください）

basicプラグインおまじない

(function($) {
	$.fn.basic = function(){
		//ここにプラグインコードを記述する
	};
})(jQuery);

STEP4:メソッドチェーン機能を維持する

jQueryでは、メソッドを連結して呼び出すことができます。
jQueryオブジェクトの取得を何度もしなくてよい点やメソッドを続けて書くことにより読みやすくすることができます。

メソッドチェーン例
idがmyDivの要素をフェードインした後に、削除する処理

$("#myDiv").fadeIn().remove();

作成したjQueryプラグインでもメソッドチェーンに対応することで、jQueryの利点の一つを維持しましょう。

basicプラグインおまじない(メソッドチェーン対応)

(function($) {
	$.fn.basic = function(){
		//ここにプラグインコードを記述する
		
		//メソッドチェーン対応(thisを返す)
		return(this);
	};
})(jQuery);

STEP5:引数とデフォルト値を設定する

いよいよ最後のステップです。
jQueryプラグインでは引数を受け取ることで、そのプラグインの振る舞いを変えていきます。

jQueryプラグインの引数の受け取りは、プラグイン定義の引数で受け取ります。
以下の例では、function(options)のoptionsでオブジェクトを受け取っています。

また、jQueryプラグイン定義の中で、defaultsオブジェクト(変数)を定義し、デフォルト値を設定しておきます。
これは、jQueryプラグイン呼び出し側で引数を渡さない場合でも正常に振る舞いを行うために必ず設定するのがよいです。

optionsで受け取った引数とデフォルト引数であるdefaultsオブジェクトをマージする必要があります。
jQueryでは、$.extendメソッドが定義されています。jQueryの$.extend メソッドは、2つ以上のオブジェクトをマージする時に利用します。

以下のコードでは、defaultsオブジェクトにoptionsオブジェクトを上書きして返却し、settingオブジェクトに代入しています。
これで、これ以降は、settingオブジェクトを利用することで引数を利用することができます。

basicプラグイン完成

(function($) {
	//プラグイン定義
	$.fn.basic = function(options){
		
		//引数を設定する
		var defaults = {
			text   : 'This is basic plugin!!!'
		};
		var setting = $.extend(defaults, options);
		
		//アラートを表示
		alert(setting.text);

		//メソッドチェーン対応(thisを返す)
		return(this);
	};
})(jQuery);

basicプラグイン呼び出し方法

$("#contents").basic({
	text   : 'これはbascプラグインでの表示です！'
});

以上です！

この5ステップだけで基本のjQueryプラグインは完成です。
これは、プラグインのスケルトンとして利用できるので、プラグイン内に様々な処理を記述することで、どんどん便利になります。
jQueryで作るコードをプラグイン化して独自ライブラリを作成することでWebサイト制作が、さらにはかどることを願っています。