Pocket

jQueryのプラグインを作る(基本編)

jQueryの基本的なプラグインの作り方を公式サイトのマニュアルを元に自分なりの解釈を交えてまとめておきます。

jQuery: How to Create a Basic Plugin

jQueryのオブジェクトメソッド

jQueryの基本的なメソッドの書き方です。これは全てのa要素にstyle属性がインラインで設定されます。
jQueryのオブジェクトは、$.fnオブジェクトからこれらのメソッドを取得します。このオブジェクトには全てのjQueryオブジェクトメソッドが含まれています。

つまり、jQueryのプラグインを作るには$.fnオブジェクトに独自のメソッドを設定することで作成することができます。

プラグインの基本

以下の例では、$.fnオブジェクトにgreenifyという独自メソッドを設定して、a要素でメソッドをコールしています。

2行目のthisは、greenifyメソッドの一部なので、オブジェクトです。$(this)とすると二重でラップすることになるので、thisを用いる点に注意しましょう。

メソッドチェーンへの配慮

jQueryではメソッドチェーンが使用できますが、独自プラグインを作成する際にメソッドチェーンへの配慮が必要です。以下の例で、6行目のgreenifyメソッドに続けてaddClassメソッドがコールされています。

3行目のreturn thisで自分自身(オブジェクト)をreturnしています。この記述がないとaddClassメソッドは対象のオブジェクトが存在しないことになり、コールしていますが動作しません。お作法として、オブジェクト自身をreturnするようにしましょう。

$エイリアス(別名)の保護とスコープの追加

$変数は、JavaScriptライブラリでも一般的に使われています。jQueryで別のライブラリを使用している場合には、jQuery.noConflict()でコンフリクトが発生しないように配慮する必要があります。$はjQuery関数のエイリアスであるという前提で書かれているので、他のプラグインに影響を与えず、自分のプラグインにスコープを限定させるように、jQuery関数をプラグインに渡して、パラメータを$変数にすることで他への影響をなくします。

プラグインでプライベートな変数を持つこともできます。プラグイン内にshade変数を設定した例が以下のようになります。

プラグインの最小化

プラグインを作成する場合は、$.fnオブジェクト1つで構成されるべきです。以下のコードは悪い例です。

1つの$.fnオブジェクトで実行してパラメータでアクションを制御するほうが良いコードです。

each()メソッドの使用

jQueryのオブジェクトには、任意の数のDOM要素への参照があるため、jQueryオブジェクトはよくコレクションと呼ばれます。特定の要素(データ属性の取得、特定の位置の計算など)を操作する場合は、.each()を使用して要素をループする必要があります。

thisを返すのではなく、.each()の結果を返すことに注意しましょう。.each()はすでにチェーン化可能なので、thisを返します。 これはこれまで行ってきたことよりも連鎖性を維持するためにすぐれた方法です。

オプション設定

オプションを設定できることにより、プラグインのカスタマイズ性が向上します。多くのオプションがある場合は、オブジェクトリテラルを使用することです。 いくつかのオプションを設定できるようにgreenifyプラグインを変更しましょう。

#556b2fのカラーのデフォルト値は、$ .extend()によってオレンジ色にオーバーライドされます。

jQueryのプラグインを作る(高度な設定)

jQuery基本編に続き高度な設定ということで、これも公式サイトのマニュアルを参考にまとめます。

jQuery: Advanced Plugin Concepts

デフォルトのプラグイン設定へのパブリックアクセスを提供

この機能を実現するには、デフォルトのプラグイン設定を公開する必要があります。 これは、プラグインユーザーが最小限のコードでプラグインをオーバーライド/カスタマイズするのが非常に簡単になるために重要です。これが関数オブジェクトを利用し始めるところです。

12行目でdefault設定をパブリック公開しています。これでユーザーはスクリプトで以下のようなプログラムを含めることができます。

foreground値のデフォルト値を「red」から「blue」にオーバーライドしました。これでhilightメソッドを呼び出したら前景色が青に設定されます。

ご覧のように、プラグインのデフォルトのフォアグラウンドカラーを変更するために、1行のプログラムできました。 また、ユーザーは必要に応じてこの新しいデフォルト値を選択してオーバーライドすることができます。

けど、う〜ん正直デフォルト値まで変更必要かな?と思った。プラグインにもよるけど、1回しかコールしない場合であればオプションでコントロールしたほうが良いように思えた。

プライベートな機能を非公開にする

プラグインの一部をオーバーライドする方法を公開することは非常に強力です。 しかし、実装にはどの部分を公開するかを注意深く考える必要があります。 公開されたら、呼び出し側の引数や意味合いの変更によって下位互換性が損なわれる可能性があることに注意する必要があります。

では、ネームスペースを混乱させることなく、実装を公開せずに、もっと多くの関数を定義する方法はあるのでしょうか? これはプライベートの仕事です。 以下のデモでは、プラグインに “debug”という別の関数を追加します。 デバッグ機能は、選択した要素の数をコンソールに記録します。 クロージャを作成するには、関数内にプラグイン定義全体をラップします。

jQueryプラグインのテンプレート

最後にjQueryのプラグインを作成するにあたって、最も基本的な構成をまとめました。これをベースにしてプラグインを作っていこうと思います。

あまりごちゃごちゃ書かずにシンプルにしあげること。関数は必要な分、適宜追加する。

プラグイン作成例

この作成方法を元に作ったプラグインを記事にしました。

GitHub