jQuery　プラグインの作り方

これまでjQueryでできているプラグインを利用してきましたが、自分でプラグインを作ってみたことがありませんでした。そこで、今回プラグインを作ってみようと調べてみると、以外にも簡単にプラグインを作ることができることが判った。
プラグインの形式は次のとおりです。これでプラグインが出来上がります。
ここで注意する点は次の点です。
1.$がjQueryである事を期待しない
他のJavaScriptフレームワークとの競合を回避するために(function($)～(jQuery)はドル記号($)を使用する。
2.$.fnにメソッドを定義する
プラグインは$.fn.プラグイン名とし、無名関数にメソッドを追加することで実現する。
3.実行コンテキストthisはjQueryオブジェクト
「実行コンテキスト」つまりthisは、メソッドを呼び出しているjQueryオブジェクトになる。
4.thisをreturnする
メソッドチェインのためにreturn時にはjQueryオブジェクトを返すようにする。

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

作ったサンプル

<style type="text/css">
#main {
    height:50px;
    width:600px;
}
</style>
</HEAD>
<BODY>
<div id="main">
 <p>プラグインの作成</p>
</div>
<p id="height"></p>
<p id="width"></p>
<script type="text/javascript">
(function( $ ){
  $.fn.getSize = function() {
    height_size = $(this).height();
    width_size = $(this).width();
    return { height: height_size, width: width_size};
  };
})( jQuery );
var size = $('#main').getSize(); 
$('#height').text('height ' + size.height);
$('#width').text('width ' + size.width);
</script>

上記サンプルはgeiSizeプラグインを定義し、その後で$(‘#main’)で得た要素を処理するために呼び出しています。
このサンプルはプラグインとその呼び出しを同一ファイル内に記述していますが、汎用的に利用するためにはプラグインの部分を別ファイルにしておくのがよいでしょう。
ファイル名は通常のJavaScriptと同様に.jsを拡張子にして、jQueryプラグインであることプラグイン名がわかりやすくするために次のファイル名フォーマットに従うとよいと思います。
jQuery.プラグイン名.js