JavaScript｜VB.NET-TIPS などプログラミングについて

■JavaScript

[2025/03/13] [PR] (No.)
[2022/12/28] JavaScript jQueryでの each を使った場合の再考 (No.296)
[2021/12/27] JavaScript JQuery crypto-jsを使って暗号化と復号を行う方法について (No.284)
[2021/10/14] JavaScript JQuery HTMLタグの入れ替えで表示を変える方法について (No.283)
[2021/09/29] JavaScript JQuery CSSの値を指定してアニメーションを実行（animate） (No.282)
[2021/09/28] JavaScript JQuery Effects関連のメソッドの使い方（show, hide, toggle, fadeIn, fadeOut, slideUp, slideDown, slideToggle） (No.281)

≪ [1] [2] [3] [4] [5] [6] [7] ≫

- 2025/03/13
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
- CM

2022/12/28

JavaScript jQueryでの each を使った場合の再考

今回は、今更ながら each の使い方を再考してみます。

each には2種類の使い方があります。ひとつは jQuery の セレクタ に対してのものと、もう一つは配列やコレクションやオブジェクトに対するものです。
共にそれぞれが内部に持っているものに対して、順次処理を行うことでは似た感じです。

先ずは jQuery の セレクタ に対しての each の書き方ですが、以下の様になります。

$('セレクタ名').each(function([index[, element]]) {
	// index   : 各要素のインデックス番号(値は 0 から始まる)
	// element : 繰り返し処理中の要素を参照

	各要素に関する処理;

});

これを使った例として以下に HTML ファイル側のソースを示します。

■each を使った例

<html>
<head>
<meta charset="utf-8">
<title>test checkbox</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//TEST関数
function testEach() {
	$('li').each(function(index, element) {
		console.log(index + ':' + $(element).text());
	});
}
</script>
</head>
<body>
    <h2>test each 1</h2>
    <li>ラベル1</li>
    <li>ラベル2</li>
    <li>ラベル3</li>
    <br />
    <button onclick="javascript:testEach();">TEST</button>
</body>
</html>

9行目の .each(function(index, element) { ... }); で each 処理を行っています。
処理は要素の index と element で取得できるテキスト値をコンソールに出力しています。（以下の様になります。）

0: ラベル1
1: ラベル2
2: ラベル3

each の処理で index と element を記述せずに以下の様にしても、同様な処理が行えます。
以下の例では element の代わりに this を使っています。特に index を使う必要が無ければ、いつもは this で記述することが多いです。

この this ですが、each の繰り返しの処理の中で、現在のセレクタ？（オブジェクト）を指し示す変数みたいなものと考えて良いと思います。

<html>
<head>
<meta charset="utf-8">
<title>test checkbox</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//TEST関数
function testEach() {
	$('li').each(function() {	// index , elemnt を省略
		console.log($(this).text());
	});
}
</script>
</head>
<body>
    <h2>test each 2</h2>
    <li>ラベル1</li>
    <li>ラベル2</li>
    <li>ラベル3</li>
    <br />
    <button onclick="javascript:testEach();">TEST</button>
</body>
</html>

この例から少し発展させて <li> 要素がクリックされた時に、クリックされたラベル以外の文字列を表示する様に変更します。

<html>
<head>
<meta charset="utf-8">
<title>test checkbox</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// 初期処理
$(function(){
    // li 要素のクリック時の処理
	$('li').on('click', function() {
		// クリック時の[this]退避
		var this_click = this;
		// li 要素の全てを処理
		$('li').each(function() {
			if (this_click != this) {
				// クリック以外のラベル
				console.log($(this).text());
			}
		});
	});
});
</script>
</head>
<body>
    <h2>test each 2</h2>
    <li>ラベル1</li>
    <li>ラベル2</li>
    <li>ラベル3</li>
</body>
</html>

それでは、配列やコレクションやオブジェクトに対する each について説明します。構文的には以下の様になります。

$.each(collection, function(index, value) {
	// collection : each処理の対象となる配列またはオブジェクト
	// function   : 各繰り返し処理で実行したい関数を指定
	//     index  : 配列であればインデックス番号、オブジェクトであればkey
	//     value  : 繰り返し処理中の値

	各要素に関する処理;

});

$.each で宣言された関数の中で、引数である index, value を利用することが出来ます。
以下に、配列データとオブジェクトの中身を全てコンソールに出力する例を示します。

■配列やコレクションやオブジェクトに対する each 例

<html>
<head>
<meta charset="utf-8">
<title>test checkbox</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//TEST関数
function testEach() {
	// 配列
	var arr = ['A001', 'B002', 'C003'];
	$.each(arr, function(index, value) {
		console.log('index(' + index + ') = ' + value);
	});

	// オブジェクト
	var obj = {
		'key1' : 'A001',
		'key2' : 'B002',
		'key3' : 'C003'
	};
	$.each(obj, function(index, value) {
		console.log('index(' + index + ') = ' + value);
	});
}
</script>
</head>
<body>
    <h2>test each 5</h2>
    <button onclick="javascript:testEach();">TEST</button>
</body>
</html>

コンソールの出力は以下の様になります。オブジェクトの場合 index にキーが渡されることがわかります。

index(0) = A001
index(1) = B002
index(2) = C003
index(key1) = A001
index(key2) = B002
index(key3) = C003

今回の例でも、 index, value を記述せずに this を使うことが出来ます。

■配列やコレクションやオブジェクトに対する each 例

<html>
<head>
<meta charset="utf-8">
<title>test checkbox</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//TEST関数
function testEach() {
	// 配列
	var arr = ['A001', 'B002', 'C003'];
	$.each(arr, function() {
		console.log(this.valueOf());	// [PrimitiveValue]の値
		//console.log(this + "");		// この方法でもOK
	});

	// オブジェクト
	var obj = {
		'key1' : 'A001',
		'key2' : 'B002',
		'key3' : 'C003'
	};
	$.each(obj, function() {
		console.log(this.valueOf());	// [PrimitiveValue]の値
		//console.log(this + "");
	});
}
</script>
</head>
<body>
    <h2>test each 6</h2>
    <button onclick="javascript:testEach();">TEST</button>
</body>
</html>

$.each の中の this にはオブジェクト型で渡されるため、その中の値を取得するには this.valueOf とします。
この方法は面倒なので、一つ前の index, value を用いる方法が良いと思います。

最後に、繰返し処理のなかで for 文の break, continue の様な処理に付いて説明します。
以下の例では、6件の配列データを宣言し、2番目までは処理を continue し、5番目以降で break する処理を行います。

■配列に対する each 処理での break, continue 例

<html>
<head>
<meta charset="utf-8">
<title>test checkbox</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//TEST関数
function testEach() {
	// 6件の配列
	var arr = ['A001', 'B002', 'C003', 'D004', 'E005', 'F006'];
	$.each(arr, function(index, value) {	// indexは[0]から始まることに注意!!
		if (index <= 1) {
			// 2番目までは処理をcontinue
			return true;
		}
		if (index >= 4) {
			// 5番目以降でbreak
			return false;
		}
		console.log('index(' + index + ') = ' + value);
	});
}
</script>
</head>
<body>
    <h2>test each 6</h2>
    <button onclick="javascript:testEach();">TEST</button>
</body>
</html>

コンソールの出力は以下の様になります。

index(2) = C003
index(3) = D004

■オブジェクトを暗号化・復号化の処理

上記の例では文字列を暗号化・復号化することは出来ました。そこでこの処理を拡張して、オブジェクトデータについても暗号化・復号化させてみます。

オブジェクトを先ず JSON 文字列として作成し、それを暗号化します。復号の場合には逆の考えですので、復号化された JSON 文字列をオブジェクトとして戻します。

<html>
<head>
<meta charset="utf-8">
<title>test crypto-js 3</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

<script type="text/javascript">
//暗号・復号テスト
function crypto() {
	//オブジェクト宣言
	var obj = {
		data1: "12345ABCDE",
		data2: "あいうえお",
		data3: 12345
	}

	//JSON文字列に変換
    var src = JSON.stringify(obj);
	//暗号化
    var des = CryptoJS.AES.encrypt(src, "testkey");
    console.log('source:' + src);
    console.log('Crypto:' + des);

	//復号化
    var decrypted = CryptoJS.AES.decrypt(des, "testkey");
	//UTF-8文字列変換
    var decrypt = decrypted.toString(CryptoJS.enc.Utf8);
    console.log('utf8     :' + decrypt);
	//オブジェクトに戻す
	var objDes = JSON.parse(decrypt);
	console.log('obj.data1:' + objDes.data1);
	console.log('obj.data2:' + objDes.data2);
	console.log('obj.data3:' + objDes.data3);
}
</script>
</head>
<body>
    <h2>test crypto-js 3</h2>

    <button onclick="crypto();">crypto</button>
</body>
</html>

これをブラウザで表示し、「crypto」ボタンをクリックするとブラウザの開発ツールのコンソールウインドウで見ると以下の様に表示されます。
確かにオブジェクトが暗号化されて、その後復号化しオブジェクトの各項目を参照できることが分かります。

source:{"data1":"12345ABCDE","data2":"あいうえお","data3":12345}
Crypto:U2FsdGVkX19pPVoeRzc/ZjN1jKNIzi13I543cTbiNhMQ4Q3Tnn6AD0GILW1a4LCoN3b8Zh5qhbCul1RTymiwPMZFkiIGlweGu0vukHq2YD8=
utf8     :{"data1":"12345ABCDE","data2":"あいうえお","data3":12345}
obj.data1:12345ABCDE
obj.data2:あいうえお
obj.data3:12345

■このページの内容

先ずはオブジェクトの表示・非表示の簡単な例
各種の JQuery メソッド
easing の指定（変化速度）
easing の指定（変化速度）jQuery UI Effect プラグインを導入
フェードイン・アウト処理（コールバック関数の例を含む）

■先ずはオブジェクトの表示・非表示の簡単な例

JQuery メソッドの show, hide を使い div HTMLオブジェクトを表示・非表示の処理を行います。

<html>
<head>
<meta charset="utf-8">
<title>先ずはオブジェクトの表示・非表示の簡単な例</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//表示処理
function fncShow() {
    $("#menu").show();
}
//非表示処理
function fncHide() {
    $("#menu").hide();
}
</script>
</head>
<body>
    <h2>先ずはオブジェクトの表示・非表示の簡単な例</h2>
    <div id="menu" style="display:none">
      <ul>
        <li>menu-1</li>
        <li>menu-2</li>
        <li>menu-3</li>
      </ul>
	</div>
    <br />
    <button onclick="fncShow();">表示</button>
    <button onclick="fncHide();">非表示</button>
</body>
</html>

この show, hide には引数が指定でき、表示・非表示にアニメーション的な動きを付加できます。アニメーションと言っても漫画的な動きでは無く、表示していく動作の時間を指定したりして、画面上では連続的な変化が付けられます。

それでは、以下に各種の JQuery メソッドの説明を記します。

■各種の JQuery メソッド

関数	書式	説明
show	.show() .show( duration [, callback] ) .show( [duration] [, easing] [, callback] ) .show( [options] ) duration:フェードするアニメーション時間を指定 easing :アニメーションの変化の種類を指定 callback:アニメーション完了後に実行したい関数を指定 options :duration等をオブジェクトで指定	表示処理を行う
hide	.hide() .hide( duration [, callback] ) .hide( [duration] [, easing] [, callback] ) .hide( [options] ) ※引数は show と同様	非表示処理を行う
toggle	.toggle() .toggle( duration [, callback] ) .toggle( [duration] [, easing] [, callback] ) .toggle( [options] ) ※引数は show と同様	表示・非表示の反転
fadeIn	.fadeIn( duration [, callback] ) .fadeIn( [duration] [, easing] [, callback] ) .fadeIn( [options] ) ※引数は show と同様	フェードイン
fadeOut	※書式は fadeIn と同様	フェードアウト
slideUp	※書式は fadeIn と同様	スライドアップ
slideDown	※書式は fadeIn と同様	スライドダウン
slideToggle	※書式は fadeIn と同様	スライドアップ、またはダウン

これらのメソッドはちょっと引数がいろいろあって、複雑にみえますが先ずは duration について説明します。
duration はそのメソッドのアニメーションの時間を指定します。指定する引数は数値型と文字列型があります。
数値型はミリ秒の値の指定で、文字列型は "slow" "fast" の値を指定します。（以下の様な感じです）

//数値型
object.show(200);
object.hide(400);

//文字列型
object.show("slow");	//show(600)の場合と同様
object.hide("fast");	//hide(200)の場合と同様

object.hide();			//hide(400)の場合と同様（デフォルト値）

//ここでの「object」はJQueryオブジェクト

それでは show, hide, toggle を使った例（メニューブロックの表示・非表示）を示します。

<html>
<head>
<meta charset="utf-8">
<title>test show/hide/toggle</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//表示処理
function animateShow() {
    $("#menu").show(400);   	// 表示
}
//非表示処理
function animateHide() {
    $("#menu").hide("slow");	// 非表示
}
//表示・非表示の反転処理
function animateToggle() {
    $("#menu").toggle("fast");	// 表示・非表示
}
</script>
</head>
<body>
    <h2>test show/hide/toggle</h2>
    <div id="menu" style="display:none">
      <ul>
        <li>menu-1</li>
        <li>menu-2</li>
        <li>menu-3</li>
      </ul>
	</div>
    <br />
    <button onclick="animateShow();">show</button>
    <button onclick="animateHide();">hide</button>
    <button onclick="animateToggle();">toggle</button>
</body>
</html>

上の例は、メニューの様なものを表示する div で囲まれた領域を表示・非表示の処理を行います。表示する時には下方向にするすると下がってくる感じで表示され、隠す時には上方向にさっと上がる感じで消えていきます。

■easing の指定（変化速度）

easing はHTMLオブジェクトの変化の種別を指定します。 linear を指定すると直線的に変化し swing を指定すると最初ゆっくり動きだし最後の方は早く変化します。尚、省略した場合は swing になります。
jQuery UI Effect プラグインを導入することでその他のイーシングを用いることが可能な様です。

<html>
<head>
<meta charset="utf-8">
<title>test show/hide easing</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//表示処理
function fncShowSwing() {
    $("#menu").show("slow", "swing");		// swing 表示
}
function fncShowLinear() {
    $("#menu").show("slow", "linear");		// linear 表示
}
//非表示処理
function fncHideSwing() {
    $("#menu").hide("slow", "swing");   	// swing 非表示
}
function fncHideLinear() {
    $("#menu").hide("slow", "linear");   	// linear 非表示
}
</script>
</head>
<body>
    <h2>test show/hide easing</h2>
    <div id="menu" style="display:none">
      <ul>
        <li>menu-1</li>
        <li>menu-2</li>
        <li>menu-3</li>
      </ul>
	</div>
    <br />
    <button onclick="fncShowSwing();">show swing</button>
    <button onclick="fncHideSwing();">hide swing</button>
    <br />
    <button onclick="fncShowLinear();">show linear</button>
    <button onclick="fncHideLinear();">hide linear</button>
</body>
</html>

■easing の指定（変化速度）jQuery UI Effect プラグインを導入

jQuery UI Effect プラグインを導入した例を以下に示します。

<html>
<head>
<meta charset="utf-8">
<title>test show/hide easing</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
//表示処理
function fncShowEaseInQuad() {
    $("#menu").show("slow", "easeInQuad");		// easeInQuad 表示
}
function fncShowEaseInElastic() {
    $("#menu").show("slow", "easeInElastic");	// easeInElastic 表示
}
//非表示処理
function fncHideEaseInOutQuad() {
    $("#menu").hide("slow", "easeInOutQuad");   // easeInOutQuad 非表示
}
function fncHideEaseInCubic() {
    $("#menu").hide("slow", "easeInCubic");   	// easeInCubic 非表示
}
</script>
</head>
<body>
    <h2>test show/hide easing</h2>
    <div id="menu" style="display:none">
      <ul>
        <li>menu-1</li>
        <li>menu-2</li>
        <li>menu-3</li>
      </ul>
	</div>
    <br />
    <button onclick="fncShowEaseInQuad();">show easeInQuad</button>
    <button onclick="fncHideEaseInOutQuad();">hide easeInOutQuad</button>
    <br />
    <button onclick="fncShowEaseInElastic();">show easeInElastic</button>
    <button onclick="fncHideEaseInCubic();">hide easeInCubic</button>
</body>
</html>

easing として指定できるパラメータは以下のものがあります。動作がどの様になるかは詳しく調べていませんが、後々調べたいと思います。

linear
swing
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInExpo
easeOutExpo
easeInOutExpo
easeInSine
easeOutSine
easeInOutSine
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

■フェードイン・アウト処理（コールバック関数の例を含む）

フェードイン、フェードアウト処理の例を以下に示します。フェードインとは徐々に表示が現れて完全に見える様になる処理であり、フェードアウトとは徐々に表示が薄れていき最後に完全に見えなくなる処理です。
フェードイン、フェードアウトには処理時間が長くないと実感できませんので fadeIn, fadeOut, fadeToggle メソッドの第一引数には「2000」（2秒）と指定します。

また fadeToggle メソッドにはコールバック関数の指定をしています。コールバック関数はメソッドの処理が終わった時点で呼ばれます。今回の関数は div 領域が表示・非表示の状態をアラートしています。

<html>
<head>
<meta charset="utf-8">
<title>test fadeIn/fadeOut/fadeToggle</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//表示処理
function fncFadeIn() {
    $("#menu").fadeIn(2000, "swing");	//2秒でフェードイン
}
//非表示処理
function fncFadeOut() {
    $("#menu").fadeOut(2000, "linear");	//2秒でフェードアウト
}
//表示・非表示反転処理
function fncFadeToggle() {
    $("#menu").fadeToggle(2000, "linear", fncCallback);
}
//fadeToggle 処理後に呼ばれる関数宣言
function fncCallback() {
	if ($("#menu").css("display") == "block") {
		alert("表示");
	} else {
		alert("非表示");
	}
}
</script>
</head>
<body>
    <h2>test fadeIn/fadeOut/fadeToggle</h2>
    <div id="menu" style="display:none">
      <ul>
        <li>menu-1</li>
        <li>menu-2</li>
        <li>menu-3</li>
      </ul>
	</div>
    <br />
    <button onclick="fncFadeIn();">fadeIn swing</button>
    <button onclick="fncFadeOut();">fadeOut linear</button>
    <button onclick="fncFadeToggle();">fadeToggle linear</button>
</body>
</html>

VB.NET-TIPS などプログラミングについて

■each を使った例

■配列やコレクションやオブジェクトに対する each 例

■配列やコレクションやオブジェクトに対する each 例

■配列に対する each 処理での break, continue 例

関連する記事

■オブジェクトを暗号化・復号化の処理

関連する記事

■empty メソッドでの処理

■タグの書き換えで連続的な処理を行う様にする

関連する記事

■このページの内容

■animate メソッドの書式

■animate メソッドの簡単な例

■CSS プロパティを複数設定する

関連する記事

■このページの内容

■先ずはオブジェクトの表示・非表示の簡単な例

■各種の JQuery メソッド

■easing の指定（変化速度）

■easing の指定（変化速度）jQuery UI Effect プラグインを導入

■フェードイン・アウト処理（コールバック関数の例を含む）

関連する記事