画像スライドショーでjQueryプラグインの基本を学ぶ：jQuery×HTML5×CSS3を真面目に勉強（2）（1/4 ページ）

jQueryでUIコンポーネントの作り方を学ぶ前に、jQueryプラグインの作り方と仕組みをしっかりとおさえよう。

» 2013年04月22日 18時00分 公開
[山田　直樹，クラスメソッド]

はじめに

　この連載で取り扱っているjQueryはJavaScriptのライブラリエンジンです。

　世の中には実にさまざまなプログラミング言語があります。昨今主流となっているものの大半は、オブジェクト指向プログラミング言語と呼ばれているものです。

　代表的な例を挙げると、Java、C#、Ruby、Python、Objective-Cといったところでしょう。これらの言語はクラスベースというカテゴリに属しています。クラスベースはアプリケーションにおけるさまざまな機能をクラスと呼ばれる単位でキッチリと分割することで、プログラム全体をキレイに整理整頓できるという特徴を持っています。大規模な開発になるほど、この特徴が威力を発揮するため、先に挙げたプログラミング言語が積極的に採用される要因の1つとなっているわけですね。

　一方のJavaScriptですが、オブジェクト指向プログラミング言語ではあるものの、こちらはクラスベースではなくプロトタイプベースというカテゴリに属しています。詳しい解説は省きますが、プロトタイプベースはクラスのような仕組みを持っていないため、機能ごとにキッチリ分割して整理整頓することができません。もちろん先人たちの知恵と努力によってそれらしく見せかけるノウハウはありますが、あくまで擬似的な域を超えられていません。

　もともと、JavaScriptはWebブラウザ上で動作する軽量なスクリプト言語として世に出てきたため、昨今に見られるような大規模開発に用いられることは想定されていませんでした。

　しかし時代は変わって、Webブラウザ上でリッチなアプリケーションが提供されることがトレンドとなった今、おのずとJavaScriptでの大規模開発が迫られています。プログラマたちはどうにかして JavaScriptでも効率良く開発が進められるようにクラスベースのようなアーキテクチャを構築できないかと試行錯誤してきました。その動きは今もなお活発で、今回紹介するjQueryプラグインもそんなアーキテクチャの1つです。

　随分と前置きが長くなってしまいました。今後、この連載ではjQueryでさまざまなUIコンポーネントの作り方をご紹介していく予定ですが、そのためにはまずjQueryプラグインの作り方についてしっかりと学んでおく必要があります。仕組みさえ分かってしまえばそれほど難しいものでもありませんし、手間の掛かるものでもありません。

プログラムを書く準備

　以下の環境を用意しましょう。

  • UTF-8 が扱えるテキストエディタ
  • Webブラウザ　※当連載ではChromeを標準として進めていきます

サンプルファイルのダウンロード

　今回のサンプルファイルはwakamsha/learning-jqueryplugin - GitHubからダウンロードできます。必要に応じてご参照ください。

jQueryの読み込みについて

　HTMLファイルにてjQueryファイルを読み込む際は、以下のコードのようにオフィシャルサイトのCDNを利用します。

  1. <script src="http://code.jquery.com/jquery-latest.min.js"></script>
HTML

　ファイルそのものを直接ローカル環境にダウンロードしても問題ありませんが、管理するファイルが増えるのも手間なので、ネットワーク上から直接読み込む方を推奨します。

はじめに - jQuery プラグインの構造

　細かい差はあれど、基本的にjQueryプラグインは以下のような構造で成り立っています。

  1. // 匿名関数で全体をラップ - (5)
  2. (function($) {
  3.   // このプラグインの名前 - (1)
  4.   $.fn.name_space = function() {
  5.  
  6.     //要素を退避 - (2)
  7.     var elements = this;
  8.  
  9.     // 要素を1つずつ処理 - (3)
  10.     elements.each(function() {
  11.       // 具体的な処理をここに記述
  12.     });
  13.  
  14.     // method chain用に要素を返す - (4)
  15.     return this;
  16.   };
  17.  
  18. }) (jQuery);
JavaScript
  1. $.fnオブジェクトをプラグイン名（※カスタムjQueryメソッド）で拡張する
  2. thisには指定された要素が格納されており、これを変数に退避しておく
  3. 指定された要素すべてに処理が適用されるように、each() を使って1つずつ同様の処理を行う
  4. method chainが途切れないように、最後にreturn thisを書く
  5. 全体を匿名関数でラップする

　では実際にサンプルを作りながら詳しく見ていきましょう。

jQueryプラグインの第一歩

　まずは最小規模なものから。やはり最初に実行するプログラムということで、K＆R以来の伝統にのっとって "Hello, World!" から始めたいと思います。「またかよ……」と思われる方もいらっしゃるかもしれませんが、新しいものを学ぶには、"Hello, World!"はとても重要なのです。

　テキストエディタで新規ファイルを作成し、"jquery.myplugin.js"と名前を付けて保存します。一般的にjQueryプラグインのファイル名にはjquery.という接頭辞を付けることで、中身を見ずともそれがjQueryプラグインであることが分かるようにするのがお決まりとなっています（※すべてのプラグインがそうなっているわけではなく、あくまで慣習的なものです）。ファイルが作成できたら以下のコードを書いてみましょう。

  1. // このプラグインの名前
  2. $.fn.myplugin = function() {
  3.  
  4.   //要素を変数に退避
  5.   var elements = this;
  6.  
  7.   // 要素を1つずつ処理
  8.   elements.each(function() {
  9.     $('body').append('<p>Message: ' + this.innerHTML + '</p>');
  10.   });
  11.  
  12.   // method chain用に要素を返す
  13.   return this;
  14. };
  15.
JavaScript

　では上記のコードを1つずつ解説していきましょう。

　jQueryプラグインはカスタムjQueryメソッドとしてjQueryを拡張したものです。定義するには$.fnオブジェクトをプラグインの名前（カスタムメソッド名）で拡張します。

　thisには指定された要素が格納されています。これを変数に退避しておきます（※必須というわけではありません。していないプラグインもたくさんあります）。

　jQueryオブジェクトは要素が複数含まれていることが前提となっています。そのためelementsにも複数の要素が含まれていると考え、それらに対してすべて同様に処理しなくてはなりません。ということで each() を使ってelementsをループに掛けて、要素を1つずつ処理してきます。

　jQueryにはMethod chainという処理を連鎖させるアーキテクチャがあります。

Method chainの例

  1. $('div') // div要素を取得
  2. 	.text('new context') // 隠したdiv要素にテキストを'new context'にする
  3. 	.addClass('update') // クラスを追加する
  4. 	.show(); // div要素を表示する

　このような書き方が成立するのは、hide()やtext()といったメソッドが処理の最後に対象となった要素を丸ごと返しているからです。jQueryプラグインでカスタムメソッドを定義する際も、最後に要素を返すことで処理を連鎖（chain）させられます。返す方法はカスタムメソッド内の最後にreturn this;と書くだけです。決まり文句として覚えておきましょう。

　これで初めてのjQueryプラグインができました。使い方はjQueryデフォルトの関数とまったく同じです。HTMLファイルで作成したjQueryプラグインファイルを読み込んだ後、以下のように新しいメソッド名を指定すれば実行されます。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>My plugin | Learning jQuery plugin</title>
  6. <style>
  7. p { color: #4c5069; font-size: 3em; }
  8. </style>
  9. </head>
  10. <body>
  11. <div>Hello, world!</div>
  12. <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  13. <script src="js/jquery.myplugin.js"></script>
  14. <script>
  15. $('div').myplugin();
  16. </script>
  17. </body>
  18. </html>
HTML

View sample

jQuery プラグインにオプションを渡す

　カスタムメソッドにオプションを渡すことで、プラグインの利便性を何倍にも高めることができます。オプションを渡す方法は、optionsオブジェクトを通じてカスタムメソッドに渡すのが一般的です。optionsオブジェクトにすることで、複数のパラメータをまとめて渡すことができるようになるからです。

　プラグインにオプション機能を追加する際は、デフォルト値を定義するのがセオリーです。そのデフォルト値に対してプラグインのユーザーは任意のオプションを渡して（※必須というわけではありません。していないプラグインもたくさんあります）上書きできるようにします。

　jquery.shake.jsというファイルを新規に作成し、以下のコードを記述します。

  1. $.fn.shake = function(options) {
  2.  
  3.   // 要素を退避
  4.   var elements = this;
  5.  
  6.   // 渡されたオプションとデフォルトをマージする
  7.   var opts = $.extend({}, $.fn.shake.defaults, options);
  8.  
  9.   // 要素を1つずつ処理
  10.   elements.each(function() {
  11.     for (var i=0; i<opts.shakes; i++) {
  12.       $(this).animate({marginLeft: opts.x}, opts.speed)
  13.         .animate({marginLeft: opts.x * -1}, opts.speed);
  14.     }
  15.  
  16.     // 要素を元に戻す
  17.     $(this).animate({marginLeft: 0}, opts.speed);
  18.   });
  19.  
  20.   // method chain用に要素を返す
  21.   return this;
  22. };
  23.  
  24. // shakeプラグインのデフォルトオプション
  25. $.fn.shake.defaults = {
  26.   speed: 'slow',
  27.   shakes: 2,
  28.   x: 10
  29. };
JavaScript

　デフォルトオプションは上記のようにして定義します。これを extend() メソッドを使って、ユーザーが指定したオプションで上書きします。extend() の第一引数に {} （空オブジェクト）を指定すると、デフォルトオプションそのものは上書きされずにデフォルトオプションとユーザー指定オプションがマージされたものが作られます。ちょっとした小技ですが、覚えておいて損はありません。

　デフォルトオプションを定義することで、プラグインのユーザーは必要なオプションのみを指定することができます。

  1. // オプションを1つだけ指定
  2. $('div').shake({speed: 'fast'});
  3. // オプションをすべて指定
  4. $('div').shake({speed: 'fast', shakes: 10, x: 20});
  5. // オプションを指定しない
  6. $('div').shake();
JavaScript

View sample

　　　　　　 1|2|3|4 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

スポンサーからのお知らせPR

HTML5�偽X 險倅ｺ九Λ繝ｳ繧ｭ繝ｳ繧ｰ

譛ｬ譌･譛磯俣

注目のテーマ

4AI by ＠IT - AIを作り、動かし、守り、生かす
Microsoft ＆ Windows最前線2025
AI for エンジニアリング
ローコード／ノーコード セントラル by ＠IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by ＠IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

@ITについて

RSSについて

アイティメディアIDについて

メールマガジン登録

＠ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。