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>
<meta charset="shift_jis">
<title>Jquery　プラグイン</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>
<script src="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("現在時間を表示");
		}
	});

	function date_get()
	{
		date = new Date();
		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>
<p id="message">ボタンを押すと現在時刻が表示されます</p>
<input name="off" type="button" value="現在時間を表示">
</body>
</html>

<!doctype html>

<html>

<head>

<title>Jquery　プラグイン</title>

<style>

body

{

text-align: center;

}

{

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>

$(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("現在時間を表示");

}

});

function date_get()

{

date = new Date();

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>

<p id="message">ボタンを押すと現在時刻が表示されます</p>

</body>

</html>

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

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

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

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

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

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

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

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

(function($)
{
	$.fn.独自名称1 = function(options)
	{
		// パラメータデフォルト設定
		var 独自名称2 =
		{
		}

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

		return this;
	}
})(jQuery);

(function($)

{

$.fn.独自名称1 = function(options)

{

// パラメータデフォルト設定

var 独自名称2 =

{

}

// パラメータを配列化

var 独自名称3 = $.extend(独自名称2, options);

return this;

}

})(jQuery);

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

$("#sample").独自名称1();

1	$("#sample").独自名称1();

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

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

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

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

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

$("#sample").独自名称1({

color: "#ff0000",

size: 300,

loop: true

});

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

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

$.fn.独自名称1 = function(options)
{
	// パラメータデフォルト設定
	var 独自名称2 =
	{
	color: "#00ff00",
	size: 600,
	loop: false
	}

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

$.fn.独自名称1 = function(options)

{

// パラメータデフォルト設定

var 独自名称2 =

{

color: "#00ff00",

size: 600,

loop: false

}

// パラメータを配列化

var 独自名称3 = $.extend(独自名称2, options);

}

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

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

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

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

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

ソースはこちらです。

<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>Jquery　プラグイン</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>
<script src="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);
		}

		function date_get()
		{
			date = new Date();
			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);
		}

		return this;
	}
})(jQuery);
// プラグインここまで▲▲▲▲▲－－－－－－－－－－－－

</script>
</head>
<body>
<p id="message02">ボタンを押すと現在時刻を表示します</p>
<input name="off" type="button" value="現在時間を表示します">
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

<!doctype html>

<html>

<head>

<title>Jquery　プラグイン</title>

<style>

body

{

text-align: center;

}

{

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>

$(document).ready(function()

{

$("input[type=button]").click(function()

{

// ① 呼び出し側の記述

$("#message").time_disp({

color: "#22ac38",

btn: $(this),

btn_msg_off: "現在時間を表示します",

btn_msg_on: "表示を消します",

def_msg: "ボタンを押すと現在時刻を表示します"

});

// プラグイン部分▼▼▼▼▼－－－－－－－－－－－－

(function($)

{

// ② 基本的な記述

$.fn.time_disp = function(options)

{

// ③ デフォルトパラメータ設定

var default_para =

{

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);

}

function date_get()

{

date = new Date();

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);

}

return this;

}

})(jQuery);

// プラグインここまで▲▲▲▲▲－－－－－－－－－－－－

</script>

</head>

<body>

<p id="message02">ボタンを押すと現在時刻を表示します</p>

</body>

</html>

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

（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: "ボタンを押すと現在時刻を表示します"
		});
	});
});

$(document).ready(function()

{

$("input[type=button]").click(function()

{

// ⑥ 呼び出し側の記述

$("#message").time_disp({

color: "#22ac38",

btn: $(this),

btn_msg_off: "現在時間を表示します",

btn_msg_on: "表示を消します",

def_msg: "ボタンを押すと現在時刻を表示します"

});

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

（２）基本的な記述部分

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

		// 中略
	}
})(jQuery);

(function($)

{

// ② 基本的な記述

$.fn.time_disp = function(options)

{

// 中略

}

})(jQuery);

プラグインの基本フォーマットを記述しています。
プラグインの呼び出し名称は 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: "ボタンを押すと現在時刻が表示されます"
}

// ③ デフォルトパラメータ設定

var default_para =

{

color: "#FF0000",

def_color: "#000000",

btn: "input[type=button]",

btn_msg_off: "現在時間を表示",

btn_msg_on: "表示を消す",

def_msg: "ボタンを押すと現在時刻が表示されます"

}

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

（４）パラメータ取得

// ④ パラメータ取得
var para = $.extend(default_para, options);

1 2	// ④ パラメータ取得 var para = $.extend(default_para, options);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Posted by OBATA

2024年11月
月	火	水	木	金	土	日
				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