初心者でも分かる！jQueryのプラグインの作り方
こんにちは、@Yuuです。
jQueryのプラグインを作ってみようと思い立ちまして、その方法を調べたので書いてみたいと思います。
今回の記事では、作りながら覚えられるように実際にサンプルとしてjQueryのプラグインを1つ作成します。
「jQueryを多少触り始めたよ」というレベルの人でも分かるように丁寧に書いたので、jQueryを始めたばかりの人・これから作ってみようかなという人もぜひ読んでいって下さい！
スポンサーリンク
jQueryのプラグインを作る
今回は「指定した要素の文字色を変更するだけのプラグイン」を作ってみたいと思います。
以下のように順番に項目を分けて解説を行います。
- プラグイン用ファイルを作成する
- プラグインの基本構文を書く
- プラグインの処理を書く
- each()を使うように修正する
- メソッドチェーンが出来るようにする
- 引数とデフォルト値を設定する
段階を踏んで解説を書いていきますので「そこは分かるぜ！」という人はドンドン読み飛ばしちゃって下さい！
今回サンプルを動かすために、以下のような構成のプロジェクトを作成しました。
とは言っても、すぐにプラグイン用のファイルを追加しちゃうんですが。
index.htmlは以下のような感じ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>jQueryプラグインサンプル</title> </head> <body> <p class="sample1">サンプル1</p> <p class="sample2">サンプル2</p> <p class="sample3">サンプル3</p> <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="script.js"></script> </body> </html> |
14行目でjQueryを読み込み、15行目でルート直下にある「script.js」を読み込んでいます。
「script.js」は自分で追加したjQueryプラグインが動くかどうかを試すために使います。
その際に「サンプル1」・「サンプル2」・「サンプル3」という文字に対して色を付けられるような、そんなプラグインを作ろうと思います。
1. プラグイン用ファイルを作成する
今回は「samplechangecolor」という名前のプラグインを作成したいと思います。
変な名前ですが気にしないで行きましょー！
ファイル名は「jquery.プラグイン名.js」にすると良いとの事なので、今回は「jquery.samplechangecolor.js」というファイルを新たに追加し、以下のようなフォルダ構成にします。
そしてindex.htmlに
<script type="text/javascript" src="jquery.samplechangecolor.js"></script>
という一文を追記し、作成するプラグインファイルを読み込むようにします。
変更後のindex.html全体は以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>jQueryプラグインサンプル</title> </head> <body> <p class="sample1">サンプル1</p> <p class="sample2">サンプル2</p> <p class="sample3">サンプル3</p> <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="jquery.samplechangecolor.js"></script> <script type="text/javascript" src="script.js"></script> </body> </html> |
15行目のマーカーをひいてある行が追加した行になります。
2. プラグインの基本構文を書く
では早速jquery.samplechangecolor.jsを編集していきましょう！
以下の構文がjQueryのプラグインを書くための基本的な構文になります。
|
1 2 3 4 5 |
jQuery.fn."プラグイン名" = function() { // プラグインの内容を書く }; |
上記の「"プラグイン名"」と書かれたところにプラグインの名前を記述します。今回の場合「samplechangecolor」というプラグイン名にしたいので、以下のように書きます。
|
1 2 3 4 5 |
jQuery.fn.samplechangecolor = function() { // プラグインの内容を書く }; |
これだけで「$('div').samplechangecolor();」のように使う事が出来ます。
つまり、これだけで一応プラグイン化が出来ちゃってるわけです！
これだけでプラグインが出来るなんて...簡単ですね！
さて、このままでもjQueryでおなじみの「$」（ドルマーク）が使えます。
ですが、このままだと他のライブラリやフレームワーク（prototype.jsなど）と衝突してしまい、使えない可能性や誤作動を起こす可能性が出てきます。
なので、それを避けるために以下のように無名関数でラップしたものをjquery.samplechangecolor.jsに記述します。
|
1 2 3 4 5 6 7 |
(function($) { $.fn.samplechangecolor = function() { // プラグインの内容を書く }; })(jQuery); |
このように書くことで「$」の衝突を防ぐ事が出来き、安全に「$」を使う事が出来ます。
3. プラグインの処理を書く
基本構文は書けたので、既にプラグイン化は完了。
次は呼び出した際に処理が出来るようにしなきゃ、ですね。
まず「$('.sample1').samplechangecolor();」のように書くと、「$('.sample1')」要素の文字が赤くなるような、そんなプラグインにしたいと思います。
jquery.samplechangecolor.jsの4行目// プラグインの内容を書くと書かれた辺りを変更し、以下のように書き換えます。
|
1 2 3 4 5 6 7 |
(function($) { $.fn.samplechangecolor = function() { // 受け取った要素のcolorを"red"に変更する this.css("color", "red"); }; })(jQuery); |
5行目のthisはsamplechangecolor()を指定した「jQueryオブジェクト」になります。
そして受け取ったjQueryオブジェクトに対して、cssメソッドで「テキストの色を赤くする」ようにしています。
つまり「$('.sample1').samplechangecolor();」と書いた場合、
5行目の「this」が指し示すのが$('.sample1')。
そしてその「$('.sample1')のテキストを赤くして」と命令しているんですね。
次にscript.jsに以下の1文を追記します。
|
1 |
$('.sample1').samplechangecolor(); |
上記の記述は、自分で作ったjQueryプラグイン「samplechangecolor」を「$('.sample1')」に対して使用するよ！という記述です。
これでもう自分で作ったプラグインが動作しているはず・・。
実際にindex.htmlにアクセスすると
sample1クラスの要素に対して、自分で作った「samplechangecolor」を効かせる事が出来たため、「サンプル1」という文字が赤くなりましたね！
よっしゃ！(๑•̀ㅂ•́)و✧
4. each()を使うように修正する
上記のコードだと問題点があります。
それは複数の要素に対して処理を行う事が出来ないという事です。
実際にこんな問題が起きるんだよ、というのを起こしてみます。
index.htmlを以下のように書き換えてみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>jQueryプラグインサンプル</title> </head> <body> <p class="sample1" style="height: 100px">サンプル1</p> <p class="sample2">サンプル2</p> <p class="sample1" style="height: 200px">サンプル3</p> <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="jquery.samplechangecolor.js"></script> <script type="text/javascript" src="script.js"></script> </body> </html> |
sample1クラスを2つにし、それぞれにstyleを用いて高さを指定しました。
そしてjquery.samplechangecolor.jsを以下のように書き換えます。
|
1 2 3 4 5 6 7 |
(function($) { $.fn.samplechangecolor = function() { // 受け取った要素の高さをConsoleに表示する console.log( this.height() ); }; })(jQuery); |
これは「samplechangecolorを指定した要素の高さをコンソールに表示する」という命令になります。
これで先ほどと同じようにscript.js内で「$('.sample1').samplechangecolor();」と書いて実行してみます。
期待する結果としては、2つの要素の高さがConsoleに表示されること。
ですが、実行してみると
このように結果が1つしか表示されません。
では、複数の結果を表示するにはどうしたら良いか？と言いますと.each()メソッドを使用します。
.each()を使って以下のように書きます。
|
1 2 3 4 5 6 7 8 9 |
(function($) { $.fn.samplechangecolor = function() { this.each(function() { // 受け取った要素の高さをConsoleに表示する console.log( $(this).height() ); }); }; })(jQuery); |
こうすることで、4行目で受け取った複数の要素を.each()で回して、1つずつ5行目以降で処理を行えるようになります。
実行してみると
ちゃんと2回分高さが出力されましたね！
注意点としては.each()メソッド内ではthisが「jQueryオブジェクト」ではなく「DOM要素」として処理されるということです。
「jQueryオブジェクト」て何だ？「DOM要素」て何だ？という人への解説は今回は省略しますが、
つまり、今回の例のように.each()メソッド内で、jQueryのメソッドを使用したい場合は「$(this)」のように「$」を使用する必要がある、という事です。
ここまでの点を踏まえて先ほどのコードを書き直すと以下のようになります。
|
1 2 3 4 5 6 7 8 9 |
(function($) { $.fn.samplechangecolor = function() { this.each(function() { // 受け取った要素のcolorを"red"に変更する $(this).css("color", "red"); }); }; })(jQuery); |
5. メソッドチェーンが出来るようにする
次にメソッドチェーンが出来るようにします。
メソッドチェーンとは「何かの処理をした後に、次の処理を行う」というものです。
例えば以下のように書いた場合、
$('.sample1').samplechangecolor().fadeOut();
「テキストの色を変更した後、フェードアウトする」という処理になります。
この処理は受け取った要素(this)を最後にreturnで返せばOK。
なので、先ほどの処理は以下のように書きます。
|
1 2 3 4 5 6 7 8 9 |
(function($) { $.fn.samplechangecolor = function() { return this.each(function() { // 受け取った要素のcolorを"red"に変更する $(this).css("color", "red"); }); }; })(jQuery); |
最後にreturnで返せば・・と書きましたが、結局.each()メソッド内に全ての処理を書くようにするので、this.each()のところでreturnしてやればいいんですね。
これだけでメソッドチェーンが出来るようになります。
6. 引数とデフォルト値を設定する
次は「$('.sample1').samplechangecolor();」のように引数に何も書かなかった場合はテキストを赤く、
「$('.sample2').samplechangecolor({'color' : 'blue'});」と書いた場合は、テキストの色を青くするようにしてみます。
index.htmlは以下のように最初の状態に戻しておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>jQueryプラグインサンプル</title> </head> <body> <p class="sample1">サンプル1</p> <p class="sample2">サンプル2</p> <p class="sample3">サンプル3</p> <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="jquery.samplechangecolor.js"></script> <script type="text/javascript" src="script.js"></script> </body> </html> |
次にjquery.samplechangecolor.jsを以下のように変更します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
(function($) { $.fn.samplechangecolor = function(options) { var settings = $.extend({ 'color' : 'red' }, options); return this.each(function() { // 受け取った要素のcolorをsettingsで定義した色に変更する $(this).css("color", settings.color); }); }; })(jQuery); |
追加した4〜6行目については、後ほど解説します。
最後にscript.jsを以下のように変更します。
|
1 2 3 4 5 |
$('.sample1').samplechangecolor(); $('.sample2').samplechangecolor({ 'color' : 'blue' }); |
これで実行してみると
このようにsample1クラスは赤色、sample2クラスは青色にすることが出来ました！
では、jquery.samplechangecolor.jsに追記したコードの解説をします。
「$('.sample2').samplechangecolor({'color' : 'blue'});」のように指定した場合、
2行目のfunction(options) {...の引数である「options」の中に
{'color' : 'blue'}が入ります。
そして追加した4~6行目の$.extend()で第一引数と第二引数をマージしています。
今回の場合、以下のように書くのと同じ結果が得られます。
|
1 2 3 4 |
var settings = $.extend( {'color' : 'red'}, {'color' : 'blue'} ); |
$.extend()は同じプロパティの場合、値を上書きします。
そのため上記のコードが実行された後、変数settingsの値が{'color' : 'blue'}に変わる、というわけです。
もちろん最初の
「$('.sample1').samplechangecolor();」のように引数を指定せずに書いた場合は、引数であるoptionsの値は空っぽ。
そのため変数settingsの値は$.extend()でマージ作業を行っても、初期値である{'color' : 'red'}のままになります。
最終的に、受け取ったオブジェクトに対して色を変更する10行目で、変数settingsのcolorを指定するように変えたため、渡す引数によって違う色を指定出来るようになった。
というわけです。
あとがき
以上でjQueryプラグインの作り方の基本部分は終了です。
お疲れ様でした！
いかがでしょうか？
僕は、jQueryプラグインの基本部分を作るだけであれば、そこまで難しくないんだなぁと思いました。
ですが、既に公開されている有名なjQueryプラグインのコードを読んでみて、複雑なものを作ろうとすると大変なんだな、と感じました。
ソースコードめちゃくちゃ長いよ・・マジかよ。。。みたいな。
先は長そうだ・・( ºωº )
それでもjQueryプラグイン、作ってみたいと思います。
プラグインを作った際にはこちらで宣伝すると思うので、よろしくお願いします。
今回作ったサンプルファイルはGitHubに上げておいたので、もしよろしければ何かの参考にしてみて下さい。
meganedogYuu/jQueryPluginSample: jQueryプラグインを作成するためのサンプルプロジェクト - GitHub
ではでは
今回はこの辺で！ヽ(•̀ω•́ )ゝ✧
今回この記事を書くにあたって参考にさせて頂いたサイト
この記事が気に入ったらいいね！
して最新情報をチェックしよう！
