jQuery

jQueryのプラグインの作り方

2010-05-20

jQueryのプラグインを作る。と考えるととても大変なことのように考えてしまいがちですが、実は簡単に作ることができるのです。プラグイン用の書き方に従って書けばjQueryを使ったいろいろなコードを書いたことがある方なら誰だって作れます。（プラグインの名前を決めるのが一番難しいかもしれません。）

jQueryのプラグインのお作法

例えばこんなコードがあったとします。

$(function() {
    $('.selector').myPlugin();
});

このようなコードが書かれている場合、プラグインはこんな感じになります。myPluginとなっている部分がプラグインの名前になります。
サンプルのコードはセレクタで指定した要素がクリックされたらアラートを出すというだけプラグインです。

(function($){
    $.fn.myPlugin = function(options) {
        // 初期値を設定
        var defaults = {
            'hoge'    : 'fuga',
            'default' : 'value'
        };

        // オプションの初期値を設定
        var setting = $.extend(defaults, options);

        // プラグインで使用するメソッド
        var method = function() {
            // 処理を書く
            alert(setting.hoge);
        };

        // セレクタで指定した要素を処理
        this.each(function() {
            $(this).click(method);
        });

        // メソッドチェーン用
        return this;
    };
})(jQuery);

コードについて

サンプルコードの説明。書いておかないと僕が忘れてしまうので…

無名関数と名前空間

jQueryのプラグインでは無名関数というものを使って書きます。無名関数の中でjQueryに新しいメソッドを追加します。

($function($) { // 無名関数
    $.fn.myPlugin = function(options) { };
})(jQuery)

デフォルトの値を指定

オプションで内部で使う値を指定できるようにした場合のデフォルトの値を$.extendを使って指定します。

var defaults = {
    'hoge'    : 'fuga',
    'default' : 'value'
};

var setting = $.extend(defaults, options);

ここで設定した値はプラグイン内部でsettingというハッシュになります。

内部メソッド

プラグイン内部でのみ使用するメソッドを書きます。共通で使用するものを書いておくと便利です。

var method = function() {
    // 実際の処理
}

コントローラ

コントローラという呼び方ではないのですが、僕の中ではコントローラと読んでいます。コントローラ部分には、例えばクリックがあったときに内部メソッドを呼び出すなどの処理を書きます。

this.each(function() {
    $(this).click(method);
});

this.eachの部分のthisはプラグインの設定の際に指定したセレクタです。DOMの中にセレクタが複数存在する場合を考えて、eachを使ってセレクタそれぞれにイベントを割り当てています。

メソッドチェーン用の記述

メソッドチェーンを使うために（使えるようにするために）、最後には必ずthisを返します。

return this;

これで明日からプラグインが作れるぞ！

Coder's Note