Jqueryで独自プラグインを自作してみました

2021年9月14日2023年4月21日

ホームページ屋にとって、JqueryやJavascriptといったブラウザ側での表示操作は必須スキルです。
なので、ちょこちょこJqueryを使って構築することも多々あります。

ある日、ふと思いました。
作ったソースをプラグイン化できないかなぁ。

画像のスライド表示プラグインなど、Jqueryプラグインは多々あります。
これらは呼び出すだけで動きます。

Jqueryで自作したものは、その都度修正を入れたりしていますが、プラグイン化して変更する部分はパラメータ渡しにすれば、制作上の利便性が向上します。

というわけで、今回はJqueryプラグイン構築について、ググって調べて実践してみました。

今回の内容

1. 今回プラグイン化するサンプル
2. とはいえプラグイン化する方法がさっぱりわかりません
3. プラグインの基本的なこと
- 3.1. 理解すべき点その1：基本フォーマット
- 3.2. 理解すべき点その2：引数渡しの方法
4. これらを踏まえてプラグイン化したものがこちらです
5. Jqueryプラグインで最初よくわからなかったこと

今回プラグイン化するサンプル

サンプルはこちらです。

お手数ですが、サンプルを見ていただければ幸いです。
サンプルは現在時刻を表示するだけの代物です。
Jqueryで組み込んでいます。

今回これをプラグイン化します。
ちなみにソースを以下に記載します。

<!doctype html><html><head><metacharset="shift_jis"><title></title><style>body
{
	text-align: center;
}
p
{
	font-size: 24px;
	text-align: center;
	border-top-width: 3px;
	border-bottom-width: 3px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #999;
	border-bottom-color: #999;
	padding-top: 20px;
	padding-bottom: 20px;
}

input[type=button]
{
	font-size: 30px;
	padding: 10px;
	text-align: center;
}

</style><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script>
$(document).ready(function()
{
	$("input[type=button]").click(function()
	{
		if ($(this).attr("name") === "off")
		{
			$(this).attr("name", "on");
			$(this).val("表示を消す");

			$("#message").css("color", "#FF0000");
			$("#message").text(date_get());
			timecode = setInterval(function()	{	$("#message").text(date_get());		},1000);
		}
		else
		{
			clearInterval(timecode);

			$("#message").text();
			$("#message").css("color", "#000000");
			$(this).attr("name", "off");
			$(this).val("現在時間を表示");
		}
	});

	functiondate_get()
	{
		date = newDate();
		y = date.getFullYear();
		m = ("0"+(date.getMonth()+1)).slice(-2);
		d = ("0"+date.getDate()).slice(-2);
		h = date.getHours();
		i = ("0"+date.getMinutes()).slice(-2);
		s = ("0"+date.getSeconds()).slice(-2);

		return (y+"/"+m+"/"+d+" "+h+":"+i+":"+s);
	}

});
</script></head><body><pid="message"></p><inputname="off"type="button"value="現在時間を表示"></body></html>Code language:HTML, XML(xml)

とはいえプラグイン化する方法がさっぱりわかりません

Jqueryをそこそこ知っていても、プラグインとなるとさっぱりわかりません。
C言語ベースのプログラム屋からすると、次のことがよくわかりませんでした。

プラグインとサブルーチンは何が違うの？
パラメータの引き渡しをどうやって受け取っているの？

これらを踏まえて調べてみました。

プラグインの基本的なこと

Jqueryプラグインを使ったことはありますが、作るとなると途端にとっつきにくくなります。
でも調べてみると、たった2つのことを理解すればよいことがわかりました。

理解すべき点その1：基本フォーマット

プラグインにも文法があります。
作るときには、以下の記述をします。

(function($)
{
	$.fn.独自名称1 = function(options)
	{
		var 独自名称2 =
		{
		}

		// パラメータを配列化var 独自名称3 = $.extend(独自名称2, options);

		returnthis;
	}
})(jQuery);Code language:JavaScript(javascript)

独自名称部分には、オリジナルの名前を付けてOKです。
プラグインを呼び出す場合、以下のように記述します。

$("#sample").独自名称1();Code language:JavaScript(javascript)

これを実現するために、「$.fn.独自名称1」という記述をします。
プラグイン名称の設定といったところです。

おおよそこのひな形をベースに構築すればプラグインになります。

理解すべき点その2：引数渡しの方法

プラグインといえば、独自の引数渡しがあります。
例えば以下のような記述です。

$("#sample").独自名称1({
color: "#ff0000",
size: 300,
loop: true
});Code language:JavaScript(javascript)

スライド系プラグインでよく見かける形です。
この引数をプラグインではどうやって受け取っているのでしょうか?

それが以下の部分の記述になります。

$.fn.独自名称1 = function(options)
{
	var 独自名称2 =
	{
	color: "#00ff00",
	size: 600,
	loop: false
	}

	// パラメータを配列化var 独自名称3 = $.extend(独自名称2, options);
}Code language:JavaScript(javascript)

デフォルトパラメータは記述しなくてもエラーにはなりませんが、呼び出し側で省略できるようにするためには、デフォルト値を設定しておいたほうが無難です。

$.fn.独自名称1 = function(options) の記述で、optionsの部分が、呼び出し側から渡される引数です。
$.extendは差分上書き関数で、「デフォルト値」に「引数」を上書きしています。

これで必要な引数すべての値を取得することができます。

これらを踏まえてプラグイン化したものがこちらです

先ほどのサンプルをプラグイン化したものがこちらです。

ソースはこちらです。

<!doctype html><html><head><metacharset="shift_jis"><title></title><style>body
{
	text-align: center;
}
p
{
	font-size: 24px;
	text-align: center;
	border-top-width: 3px;
	border-bottom-width: 3px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #999;
	border-bottom-color: #999;
	padding-top: 20px;
	padding-bottom: 20px;
}

input[type=button]
{
	font-size: 30px;
	padding: 10px;
	text-align: center;
}

</style><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script>

$(document).ready(function()
{
	$("input[type=button]").click(function()
	{
		
		$("#message").time_disp({
			name: "#message02",
			color: "#22ac38",
			btn: $(this),
			btn_msg_off: ,
			btn_msg_on: ,
			def_msg: 
		});
	});
});



(function($)
{
	// ② 基本的な記述
	$.fn.time_disp = function(options)
	{
		var default_para =
		{
			name: "#message",
			color: "#FF0000",
			def_color: "#000000",
			btn: "input[type=button]",
			btn_msg_off: "現在時間を表示",
			btn_msg_on: "表示を消す",
			def_msg: 
		}

		var para = $.extend(default_para, options);

		// ⑤ 直接指定部分をパラメータに置き換えるif ($(para.btn).attr("name") === "off")
		{
			$(para.btn).attr("name", "on");
			$(para.btn).val(para.btn_msg_on);

			$(para.name).css("color", para.color);
			$(para.name).text(date_get());
			timecode = setInterval(function()	{	$(para.name).text(date_get());		},1000);
		}
		else
		{
			clearInterval(timecode);

			$(para.btn).attr("name", "off");
			$(para.btn).val(para.btn_msg_off);

			$(para.name).text(para.def_msg);
			$(para.name).css("color", para.def_color);
		}

		functiondate_get()
		{
			date = newDate();
			y = date.getFullYear();
			m = ("0"+(date.getMonth()+1)).slice(-2);
			d = ("0"+date.getDate()).slice(-2);
			h = date.getHours();
			i = ("0"+date.getMinutes()).slice(-2);
			s = ("0"+date.getSeconds()).slice(-2);

			return (y+"/"+m+"/"+d+" "+h+":"+i+":"+s);
		}

		returnthis;
	}
})(jQuery);
</script></head><body><pid="message02"></p><inputname="off"type="button"value=></body></html>Code language:HTML, XML(xml)

もともとのソースをプラグイン用に書き換えしてみました。
意外とちゃんと動きました。

（1）呼び出し部分

$(document).ready(function()
{
	$("input[type=button]").click(function()
	{
		// ⑥ 呼び出し側の記述
		$("#message").time_disp({
			name: "#message02",
			color: "#22ac38",
			btn: $(this),
			btn_msg_off: ,
			btn_msg_on: ,
			def_msg: 
		});
	});
});Code language:JavaScript(javascript)

呼び出し部分は、一般的なプラグインと同じです。
＜div id="message">＜／div＞部分に時刻を出力するため、$(“#message").time_disp()で呼び出しします。
time_disp()は、任意につけた名称です。

（２）基本的な記述部分

(function($)
{
	// ② 基本的な記述
	$.fn.time_disp = function(options)
	{

		// 中略
	}
})(jQuery);Code language:JavaScript(javascript)

プラグインの基本フォーマットを記述しています。
プラグインの呼び出し名称は time_disp()です。
$.fn.time_disp　とプラグインの頭でプラグイン名を指定します。

（３）デフォルトパラメータ設定部分

var default_para =
{
	name: "#message",
	color: "#FF0000",
	def_color: "#000000",
	btn: "input[type=button]",
	btn_msg_off: "現在時間を表示",
	btn_msg_on: "表示を消す",
	def_msg: 
}

Code language:JavaScript(javascript)

デフォルトパラメータを設定します。
「default_para」は任意の名称でOKです。
よくよく見ると、ただの配列を記述しているだけです。

（４）パラメータ取得

var para = $.extend(default_para, options);Code language:JavaScript(javascript)

デフォルトパラメータに、呼び出し側から渡されたパラメータを上書きしています。
プラグインへの引数渡しを省略できる仕掛けです。

（５）要素名をパラメータに置き換える

もともとは直接指定していた要素名を取得したパラメータに置き換えます。
例えば以下のようにします。

$(“#message").text() → $(para.name).text()

これにより直接指定を無くすことができ、汎用性を高くすることができます。
固定記述は、特定コーディングであることを制限しますが、汎用記述であれば、クラス名など自由に変更できます。

Jqueryプラグインで最初よくわからなかったこと

基本文法と、パラメータ渡しの部分が最初なかなか理解できず最初の一歩を作り出すことができませんでした。
それは、一般的なプログラム言語の呼び出し（サブルーチン）と異なる形だからです。

しかし、Jqueryは要素名を指定してから呼び出しします。
（例えば、$(“#message").time_disp();　）

サブルーチンだとこのような呼び出しができません。
また一般的なプログラム言語でも、このような呼び出し方がありません。

そこがJquery独自の部分であり、分かりにくいところでした。

パラメータ渡しについても、一般的なプラグインの渡し方が、プラグイン独自の記述方法だと思っていました。
しかし今回分かったのは、単に配列を記述しているだけということでした。

Javascriptの配列記述方法は、少々変わっており、そこがとっつきにくいだけでした。

今回、プラグインの記述方法を調べ実践したことで、理解することができました。
良い経験をいたしました。

備忘録,JqueryJquery,独自プラグイン,パラメータ渡し,自作

Posted by OBATA

月	火	水	木	金	土	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31