refirio.org

プラグインにする前のプログラム

• サンプル

重要な部分を取り出すと以下のとおりです。

<script src="../jquery.js"></script>
<script>
$(document).ready(function() {
  $('.sample').click(function() {
    return false;
  });
});
</script>

<a href="http://www.google.co.jp/" class="sample">テスト2</a>

class="sample" に対するclickイベントで return false; を返すようにしています。つまり、リンクをクリックしても何も起きないプログラムとなっています。これをプラグインにする手順を例にしてみます。

プラグインを作ってみる

まずはプラグインの名前を決めます。今回は「test」という名前にしますが、半角英数字で適当な名前を付けられます。（ファイル名などに使用するので、記号や日本語は含まないようにします。）

次にプラグインの内容を実際に書くファイルを作成します。このファイルは jquery.プラグインの名前.js というファイル名にします。他のファイル名でも大丈夫ですが、ほとんどのjQueryプラグインはこの規則に従っているので長いものに巻かれておきましょう。そうすれば他の人が見た時、「これはjQueryのプラグインなんだ」とすぐに判断してもらえます。

このファイルには以下の形式で命令を書きます。

$.fn.プラグインの名前 = function() {
  プラグインの処理内容
};

今回の場合は以下のようになります。

$.fn.test = function() {
  $(this).click(function() {
    return false;
  });
};

$('.sample') の部分が $(this) になっていますが、こうしておくとプラグインを呼び出す際に指定したセレクタを、プラグイン内で参照できます。すぐ下で具体例が出てきます。

これでプラグインは完成です。

プラグインを使ってみる

• サンプル

重要な部分を取り出すと以下のとおりです。

<script src="../jquery.js"></script>
<script src="jquery.test.js"></script>
<script>
$(document).ready(function() {
  $('.sample').test();
});
</script>

<a href="http://www.google.co.jp/" class="sample">テスト2</a>

あらかじめjQueryと、先に作成した jquery.test.js を読み込んでおきます。その後 $('.sample').プラグインの名前(); と書くと、プラグインを使用することができます。$('.sample') という指定は、プラグイン内の $(this) に引き継がれます。

プラグインによって、class="sample" を指定したリンクをクリックしても何も起きないようになっています。

このプラグインの使い方は以上です。

より好ましい書き方

これでプラグインとして動作するものが作れますが、以下の2つを決まり文句として付けておくといいです。

まず、プラグインの内容全体を (function($) { と })(jQuery); で囲うようにします。こうしておくと、プラグイン内で使われている変数名とプラグイン外で使われている変数名が被っても大丈夫になります。（余計なトラブルを防止できます。）

また、プラグインの処理内容の最後に return this; を付けておきます。jQueryは

$('.sample').test1().test2().test3();

のように命令をつなげて書くことができる（メソッドチェーンと呼ばれます）のですが、プラグイン側で return this; を付けておかないとこの書き方に対応できません。

という訳で、プラグインは

(function($) {
  $.fn.プラグインの名前 = function() {
    プラグインの処理内容
    return this;
  };
})(jQuery);

このように書いておく方が好ましいです。先ほどのtestプラグインの場合、以下のようになります。

(function($) {
  $.fn.test = function() {
    $(this).click(function() {
      return false;
    });
    return this;
  };
})(jQuery);

これで完成です。

• サンプル

後編に続きます。