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

No Photo

イメージ

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

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

プラグインとは?

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

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

プラグインの使い方

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

  • 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(){
        エレメント1つに対しての処理
    });
}

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

return this

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

each(function(){...})

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

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

プラグインの中では$(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>

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

まとめ

既に便利なプラグインがたくさん作られていますが、 自分で作ってみるのも意外と簡単です。 よく使う機能はプラグイン化してはいかがでしょうか!

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ