WIZ-CODE.blogMENUWIZ-CODE.blogについてWIZ-CODE.blogJavaScriptやAjaxをテーマとしたブログです。2015/11/13私はどちらかというとPrototype.jsライブラリをよく使ってきたのですが、最近はjQuery寄りになっていて、プラグインをいくつか作る機会が出てきました。今回は自分が参考にしたサイトなどを頼りにjQueryプラグイン作成方法をまとめてみたいと思います。独自のプラグインを作成する内容はややデベロッパー向けですが、以下のWeb技術を扱った一連のドキュメント群も非常にためになります。別に強制力があるわけではないですが、jQueryサイドで最低限守ってほしいという規則を載せておきます。1、ファイル名はjquery.「あなたのプラグイン名」.jsとする。jquery.clickablecanvas.js2、メソッドはjQuery.fnオブジェクトにアタッチし、関数はjQueryオブジェクトにアタッチすること。プラグインのメソッドと関数の違いは、メソッドが$(‘#element_id’).myMethod()のようにjQueryセレクターを受け取る形式で呼び出すのに対し、関数では$.myFunction()のようにjQueryオブジェクトに直接ドットシンタックスで結ぶ形式で呼び出す点です。3、thisキーワードはすべてjQueryオブジェクトを参照すること。jQuery.fnにアタッチしたメソッドでは、自動的にコード内のthisキーワードがjQueryオブジェクトを参照します。4、jQueryのメソッドチェーンを断ち切らないために、すべてのメソッドはjQueryオブジェクトを返す(returnする)こと。一致した要素に対してくり変えし処理を行うときはthis.each()のループを使う。5、コード内ではショートカットの「$」ではなく、必ず「jQuery」を使用すること。自分のプラグインでこれをやっていないので偉そうにいえないですが、「$」を使用する他のライブラリ(たとえばPrototype.js)との競合を防ぐのに重要な点です。jQueryにはnoConflictメソッドというのがあって、これを呼び出すことで「$」の役割をjQuery以外のライブラリに引き渡すことができます。「$」がjQueryプラグインのコード内で使われていると、noConflictメソッドが機能しなくなってしまうわけです。複数のプラグインの使用を前提とする場合は必須になるでしょう。)(jQuery)のように、プラグインコード全体が無名関数のなかに記述され、さらにプラグインが読みこまれたらすぐに実行するように、その関数にjQueryオブジェクトを引数に渡す形になっています。2015/11)コメントにご指摘がありましたが、即時実行の関数の仮引数は$としても外部を汚染する可能性がないので、記述の簡略化のため、仮引数を$とする方を推奨します。このような記述方法にする利点は、プラグインのコード内でグローバル変数を一切使わなくて済むということです。プラグインで定義される変数をこの無名関数内で宣言すれば、すべてローカル変数になるので、グローバル名前空間を汚さずに済むわけです。次にプラグインコード内で使用するメソッドは、任意で外部/内部メソッドに分けることができます。プラグインを呼び出すメソッドは、当然外部からアクセスできなければならないので外部メソッドになります。一方で内部の作業などで使用されるだけであれば、外部からアクセスできない内部メソッドとして登録します。前回書いたようなクロージャの特性を利用して、外部/内部メソッドの作成は次のようにします。hensu3;//外部からアクセス可能なメソッドはjQuery.fnにアタッチする。{........................};//内部的に使用されるメソッドは、無名関数内で関数定義する。メソッドのthisと戻り値jQuery.fnにアタッチしたプラグインメソッドでは、thisキーワードがjQueryオブジェクトに変換された要素になるはずです。このメソッドの連鎖が切れないように、メソッドの戻り値はthisキーワードか、あるいはthis.each()による処理の結果を指定します。通常は後者のthis.each()を返すよう推奨されています。{//myPlugin1メソッドとmyPlugin2メソッドでしていることは同じ。myPlugin2メソッドの方法が推奨されている。オプションを受け取る多くのプラグインは最初に呼び出すとき、オプションを設定できるように作られています。複数のオプションがあるときは、大抵オブジェクト形式で受け取ります。ここで使用するのが、オブジェクトを拡張するメソッドjQuery.extendです。ユーザー側がオプションを指定するには、プラグインを呼び出したとき次のようにメソッドの引数にオブジェクトを渡します。})のようにしても同様の働きをします。作成に必要な最低限のまとめになりました。AM大変参考になりました。ついてお教えいただければ助かります。5、コード内ではショートカットの「$」ではなく、必ず「jQuery」を使用すること。次のように、無名関数がjQueryを$で受け取れば、$でもよいのではないでしょうか。AMシマダさんコメントありがとうございます。このページの5項目目についてですが、調べてみると確かにそうでした。ご指摘ありがとうございます!無名関数のクロージャを使っている時点で、5項目目を守る必要がなくなるんですね。この項目(というか全部)はIBMの受け売りなんですが、このページでは擬似的なプライベート・メソッドを設定するためにクロージャを使っていて、そのクロージャが自動的に5項目目対策にもなっていたという......。無名関数の実引数にショートカットでないjQueryを渡す必要がありますが。ここでなぜIBMが必ず「jQuery」をしようすることとしたのかを考えたのですが、無名関数でラップしない、つまりクロージャを使わない方法でプラグイン・コードを書くケースを想定したのかもしれません。一般に出回るどのプラグインを見てもほぼすべてクロージャを使っているので、そのかぎりではそのプラグインが五項目目を守っていなくても実質的に弊害はないと見られます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。半年ぶりの投稿になります。Canvasバージョン0.7公開しました。前回紹介した宇宙フライトシミュレーションに、いくつかの機能を追加しました。音楽プレイヤーカテゴリーJavaScript/AjaxPHPTipsゲームブラウザアーカイブ2018年7月2017年7月2016年12月2016年11月2016年10月2016年3月2016年1月2015年12月2015年11月2015年10月2015年9月2015年8月2014年7月2014年6月2014年4月2014年2月2014年1月2013年12月2013年10月2013年8月2013年6月2013年4月2013年3月2013年1月2012年11月2012年8月2012年6月2012年5月2012年4月2012年3月2011年12月2011年10月2011年9月2011年8月2011年7月2011年6月2011年5月2011年4月2011年3月2011年2月2011年1月2010年12月2010年11月2010年10月2010年9月2010年6月2010年5月2010年4月2010年2月2010年1月2009年12月2009年11月2009年10月jQueryプラグイン作成法のまとめJavaScriptやAjaxをテーマとしたブログです。