[作って学ぶ！jQuery] 第6回プラグインを作ってみよう!

作って学ぶ！jQuery

minami

2010.05.07

イメージ

ゴールデンウィークはお台場でリアル脱出ゲームに参加して脱出できなかったminamiです。

jQuery連載も最終回、最後はプラグインを作ってみましょう！

プラグインとは？

jQueryのプラグインとは、 jQuery本体と併せて使うライブラリのことです。様々な拡張機能を手軽に使うことが出来ます。

例えば以下のページにも多数のjQueryプラグインが登録されています。自分で作ったプラグインを公開することもできます。

http://plugins.jquery.com/

プラグインの使い方

プラグインを使うために必要なのは以下の手順です。

1.jQuery本体を読み込む
2.プラグインを読み込む
3.プラグインを実行する

拍子抜けするくらい簡単ですね!ソース上では以下のような記述になります。

<!-- 1.jQuery本体を読み込む -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- 2.プラグインを読み込む -->
<script type="text/javascript" src="js/jquery.test.js"></script>
<!-- 3.プラグインを実行する -->
<script type="text/javascript">
<!--
$(function(){
	$("div.test").test();
});
//-->
</script>

プラグインの書き方

基本形

$.fn.メソッド名 = function(){
    エレメントに対する処理
}

基本は上の通りですが、下記のように書いてみましょう。

$.fn.メソッド名 = function(){
    return this.each(function(){
        エレメント１つに対しての処理
    });
}

ポイントがいくつかあります。

return this

return thisした場合、メソッドを実行したときの戻り値がエレメント自身になります。プラグインの機能を実行後、メソッドチェーンで命令を次々行いたいときなど便利です。

each(function(){...})

each()で対象が複数であっても処理できます。セレクタをうまく使うと多数の処理を1行で書くこともできます。

サンプルとしてマウスを載せると要素の幅と高さをとってきて、2倍の大きさに拡大するアニメーションする機能をプラグインにしてみました。

jQueryプラグインのサンプル

プラグインの中では$(this)は、セレクタで選択されたエレメント自身をさしています。 div.testセレクタに対してzoom()を行うだけでこの機能が実現できています。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.zoom.js"></script>
<script type="text/javascript">
<!--
$(function(){
	$("div.test").zoom();
});
//-->
</script>

プラグイン化しておけば、ややこしい命令でもまとめてスッキリと書くことができて、変更する箇所もわかりやすいですね。さらに同じような処理は使いまわすことで利便性がアップします。