※弊社記事はたぶんにPRが含まれますので
話半分で受け取ってください。

jQueryでは「クラス」ではなく「プラグイン」を作成するらしい

 javascriptをmootoolsからjQueryに書き換えるときにちょっと迷ったのでメモ。WordPressだと標準でjQueryが入っているようなので、jQueryに統一しようと思ったのですが、実際、書換の際に非常に困ったのがクラス定義。jQueryではあんまりクラスを使わない?

 というか、WordPressに、とあるプラグイン入れたらjQueryが読み込まれて、「似たような機能のmootoolsとjQuery、両方読み込んでるのってなんか気持ち悪くね?」と思ったのがmootoolsからjQueryに書き換えようっと持ったきっかけだったりします。

 ただ、prototype.jsやmootoolsでは、クラス定義のためのフレームワークが用意されていますが、jQueryではそれに該当するようなものがありません。「jQuery クラス」というようなキーワードで検索しても、ぴんと来るものは出てこないし、jQuery使ってる人はクラスとか作らないんですか?

 …と思い悩みながら調べていったところ、どうやらjQueryでは「クラスを定義して使う」のではなくて、「プラグインを作って使う」という形をとっているようです。
 「jQuery プラグイン」で検索したら、いっぱい出てきました。

 以下が、基本的なプラグインの形。

(function() {

	// プラグインを設定 //
	// 「myplugin」はプラグイン名。
	//「jQuery.fn.myplugin」と書いているところと
	//「$.fn.myplugin」と書いているところがありましたが、
	//動作は同じっぽいです。
	//ただ、prototype.jsなどをjQueryと使う場合に
	//$.fnだと不具合が起きるかも?
	jQuery.fn.myplugin = function(config){

		// 引数のデフォルト値を渡してます //
		//configのデフォルト値を
		//function(config)で受け取ったconfigの値で
		//上書きしてるみたいです。
		config = jQuery.extend({
				value1: "Default value 1",
				value2: "Default value 2"
			},config);

		// プラグイン内のthis は、
		//$("div.target") など指定したHTML要素
		var target = this;

		// 関数の定義 //
		//特になにか特別な書き方はしなくても大丈夫です
		//プラグイン内で定義した関数は
		//このプラグイン内でしか使えないようなので、
		//他のプラグインで定義されている関数と
		//関数名が衝突する恐れはなさそう。
		function myfunction() {
			target.append("Hello jQuery Plugin !<br />"
				 + config.value1 + "<br />"  + config.value2);
		}
		//関数を実行します。
		myfunction();
	};
})(jQuery);

 このプラグインの機能を使用するには、htmlファイルの中やjavascriptファイルの中で、次のように記述すればOK。

// DOMがreadyになったときに実行 //
//「$(function() {});」意外に、
//「jQuery(function() {});」という書き方でもOKらしいです。
//「$(document).ready(function() {});」は古い書き方。
$(function(){
	//プラグインを使うときは、
	//$(divとか).プラグイン名(引数)
	//というふうにします。
	$("div.target").myplugin({value1: "This is value 1"});
});

 クラスを定義するというよりは、「プラグイン」でメソッドを追加するという感じなのですね。
 「プラグイン」という考え方が分かってしまうと、jQueryのプラグインは作りやすい感じがします。

参考

関連リンク

jQuery標準デザイン講座

  • メーカー:翔泳社
  • カテゴリ:Kindle版
  • 発売日:2015/12/15

関連する記事