最近のホームページはJqueryを使った装飾処理が増えてきました。
先日も装飾処理を制作していた時に、同じ記述を3回記述していることにきづきました。
なにか無駄だなと思い、一つにまとめる方法がないか模索しました。
PHPならばループ処理で一つにまとめることができます。
でもJqueryにはさすがにループ処理はないだろう・・と思っていました。
ところが調べてみたら、Jqueryにもループ処理があることがわかりました。
今回はeachを使って、queryでループする方法について記述いたします。
eachを使ったループ処理のやり方
PHP等の言語を知っておられる方ならば「foreach」ループを知っておられるかと思います。
Jqueryの「each」は他言語の「foreach」と同じです。
配列等の要素の数だけループします。
each処理の具体例
each処理のサンプルを用意いたしました。
こちらを見ていただければ幸いです。
<li>タグの数だけループし、<li></li>の中身を読み取っています。
ソースはこちらです。
コピーしてHTMLに張り付けしていただければ、そのままでも動作します。
<html lang="ja">
<head>
<meta charset="shift_jis">
<title>Jqueryでループ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
var out_buff = "";
$.each($(".box ul li"), function(count, value_data)
{
// liタグの中身を取得
out_buff = out_buff+"(" + count + ")"+$(value_data).text() + " ";
});
// 画面に表示
$("#disp").text(out_buff);
});
</script>
<style type="text/css">
#disp
{
border: 2px solid #F00;
padding: 10px;
display: inline-block;
}
</style>
</head>
<body>
<h1>北陸3県（タグ要素から読み取る）</h1>
<div class="box">
<ul>
<li>富山県</li>
<li>石川県</li>
<li>福井県</li>
</ul>
</div>
<h2>Jqueryループで読み取った内容</h2>
<div id="disp"></div>
</body>
</html>eachの文法解説
■文法
$.each(①ループ要素, function(②ループカウンタ, ③個別要素)
{
});
■具体的な記述例
$.each($(“.box ul li”), function(count, value_data)
{
});
①ループ要素
ループしたい配列を記述します。
他言語では主に配列を記述しますが、Jqueryの場合だと「タグ」でもOKです。
つまり、特定タグの要素数だけループします。
例えばサンプルは.boxクラスの<li>タグの数だけループします。
<li>タグ以外に<p>タグ<div>タグといったものでもループできます。
②ループカウンタ
何回目のループであるかの数字が入ります。
1回目ならば「0」、10回目ならば「9」が入ります。
Jqueryの場合は、これらの要素がサブルーチンの引数として渡されます。
それが解りにくい感を出していますが、意味が分かれば大丈夫です。
③個別要素
①のループ要素から分解された1行のデータが渡されます。
例えばサンプル例であれば1回目のループ時にはvalue_data変数に「<li>富山県</li>」が渡されます。2回目のループ時には「<li>石川県</li>」が値として入ります。
配列要素のループも可能です
タグ要素でのループのやり方はわかりました。
でも私が実際にやりたかったのは「配列によるループ」です。
Javascriptにも一応配列指定方法があります。
配列の数だけループをしたいと考えました。
どうやればできるのでしょう?
調べました。
each配列要素の具体例
配列をループするeachサンプルを用意しました。
こちらをご覧いただければ幸いです。
配列の数だけループし、県名を出力します。
ソースコードはこちらになります。（スクリプト部分のみ）
$(document).ready(function()
{
var out_buff = "";
var prefecture = new Array("富山県", "石川県", "福井県");
$.each(prefecture, function(count, value_data)
{
out_buff = out_buff+"(" + count + ")"+value_data + " ";
});
// 画面に表示
$("#disp").text(out_buff);
});違いはループ要素のみ
最初のサンプルとほぼ同じですが、違いは「①ループ要素」です。
最初のサンプルでは 「$(“.box ul li”) 」でしたが、今回は配列名「prefecture 」を指定しています。
タグ要素の場合は「$()」で記述しますが、配列要素の場合は「$()」がいりません。
あとは同じです。
Jqueryのループ方法はいろいろあります
Jqueryでのループ方法は、eachのほかにforもあります。
必要に応じて使いやすい方でよいと思います。
またeachの記述方法についてですが、以下のような記述もできます。
$( ①ループ要素 ).each( function(②ループカウンタ, ③個別要素)
{
});
①のループ要素を文頭に記述するやり方もあります。
Jqueryは文頭に要素名を記述する方法が一般的です。
ただ私はeachに関して、最初理解できませんでした。
それは命令文（each）の外側に①ループ要素を記述している点です。
プログラマー気質から、他の言語と類似性のある記述のほうがわかりやすいため、eachの後ろに①ループ要素を記述するようにしています。
同じ処理はループで一つにまとめたほうが不具合が出にくくなります
プログラムで同じ処理の記述を複数回書くということは、メンテナンスの手間が増えるということです。
どういうことかというと、その部分に不具合があり修正が必要となった場合、複数個所に同じ修正を入れなければならなくなるためです。
過去に作ったプログラムは、どのように作ったか忘れているものです。
それでいて複数個所修正があると、修正漏れが出る可能性が高くなります。
事実、私もプログラマー駆け出しのころ、同じ処理を複数個所に記述してしまい、不具合修正で修正漏れが発生し問題になったことがあります。
ただ、急を要する場合など「修正時間が限られている場合」はループ処理にこだわる必要はありません。後日時間のある時にゆっくり修正すればよいのです。
このように、ループ処理を活用して、同じ処理の記述を1カ所にまとめるとメンテナンスの手間を減らすことができます。