プログラミング言語の中でも、高頻度で使用するのが「for文」などを代表とする「繰り返し処理」ではないでしょうか？Java Scriptの便利なライブラリである「jQuery」にも、繰り返し処理のメソッドが存在し「eachメソッド」で実装可能です。
本記事では、そんなeachメソッドの使用方法や使い分けについて、解説していきます。
eachメソッドとは
「eachメソッド」とは、オブジェクトに対して繰り返しの処理をおこなうための、jQueryメソッドです。
繰り返しを使用することで、同じ処理や応用できる処理は、1度だけ記述すればよく、何度も書く必要がなくなるため、プログラミングの記述を大幅に減らせます。
使いこなせば、非常に効率的で見やすいコードになるため、jQueryを使用する方にとっては、必須とも言える、是非とも身につけていただきたいメソッドのひとつが「eachメソッド」なわけです。
種類と使い分け
each メソッドには
- .each() メソッド
- jQuery.each() メソッド
の大きく2種類があり、状況によって、最適なメソッドを選択する必要があります。
それぞれの適した活用シーンは以下の通りです。
.each() メソッド
引数で指定したオブジェクトをループ処理したい時
jQuery.each() メソッド
jQuery オブジェクトをループ処理したい時
更にここから、それぞれの each メソッドの使い方について詳しく説明していきます。
.each()メソッドの使い方
この章では、引数で指定したオブジェクトのループ処理に最適な「.each()メソッド」の使い方について解説します。
繰り返し処理の配列
最も利用頻度が高い、配列(Array)を繰り返し処理する方法について見ていきましょう。
var array = [‘pen1’, ‘pen2’, ‘pen3’, ‘pen4’, ‘pen5’];
$.each(array, function(index, value) {
console.log(value);
})
このプログラムのコンソール出力結果は、以下になります。
pen1
pen2
pen3
pen4
pen5
「コールバック関数」は引数が無くても成立します。値は「this」で指定できます。
例）
var array = [‘pen1’, ‘pen2’, ‘pen3’, ‘pen4’, ‘pen5’];
$.each(array, function() {
console.log(“ペンの名前：” + this);
//↑文字列として認識できるように注意
})
Arrayに対しての最も基本的な繰り返し処理は以上のとおりです。
連想配列の繰り返し処理
連想配列にも、eachメソッドは対応できます。
例）
obj = {
name: ‘pen1’,
price: 5000,
theme: ‘stylish’
};
$.each(obj, function(index, value) {
console.log(index + ‘→ ‘ + value);
})
出力結果は以下になります。
name→ pen1
price→5000
theme→stylish
多次元配列の繰り返し処理
もちろん多次元配列にも.each()メソッドが活用できます。
例）
var pens = [
{ name: ‘pen1’, price: 5000, theme: ‘Stylish’ },
{ name: ‘pen2’, price: 7000, theme: ‘Practical’ },
{ name: ‘pen3’, price: 500, theme: ‘Simple’ },
{ name: ‘pen4’, price: 80000, theme: ‘Artistic’ },
{ name: ‘pen5’, price: 3000, theme: ‘Normal’ }
];
$.each(pens,
function(index, val) {
console.log(‘ペンの名前：’ + val.name + ‘ 価格：’ + val.price + ‘ テーマ：’ + val.theme);
}
);
出力結果は以下のとおり。
名称: pen1 値段: 5000テーマ: Stylish
名称: pen2 値段: 7000テーマ: Practical
名称: pen3 値段: 500テーマ: Simple
名称: pen4 値段: 80000テーマ: Artistic
名称: pen5 値段: 3000テーマ: Normal
jQuery.each()メソッドの使い方
続いて、jQuery オブジェクトをループ処理したい場合に最適な「jQuery.each() メソッド」の使い方を例と供に解説していきます。
以下が基本的な構文となります。
jQueryオブジェクト.each(function(index) {
実行処理(繰り返し)
});)
each() メソッドの引数には呼び出し先処理から返される「コールバック関数」を使用します。
「index」を第1引数に指定して取得します。
尚、この引数も省略可能です。
$(‘li’).each(function(index) {
$(this).text(“リスト” + index);
});
この際に「this」を使用するのは「.each() メソッド」と同様です。
繰り返し処理の終了とスキップ（break・continue）
jQueryの「eachメソッド」には、通常多くのプログラム言語で使用される「break」や「continue」がありません。
それでは、どのようにループ処理を終了させるのか、というと
・「break」→「return false」
・「continue」→「return true」
がそれぞれ対応しています。
それぞれ具体的な使用方法を確認してみましょう。
繰り返し処理の終了
ここでは、HTML文を例に、その相場が6000円以下のペンを太字にする処理をjQueryでおこなった上で処理を終了してみましょう。
[HTML]
<h2>
ペン価格
</h2>
<p>pen6 <span>100</span>円</p>
<p>pen7 <span>400</span>円</p>
<p>pen8 <span>2000</span>円</p>
<p>pen9 <span>7000</span>円</p>
<p>pen10 <span>100000</span>円</p>
[jQuery]
$(‘p span’).each(function(){
if($(this).text() > 6000) return false;
var html = $(this).html().replace(/(d*)/g,”$1“);
$(this).html(html);
})
実行結果を確認してみましょう。
ペン価格
pen6 100円
pen7 400円
pen8 2000円
pen9 7000円
pen10 100000円
上記の例では、$(this).text()でペンの価格を取得し、if文を用いて、その値を’6000’と比較した上で、条件に合わないケース(6000を上回ったケース)の場合「return false」し、繰り返しを終了します。
「pen9」は7,000円であり、6,000円以下という予算以上の金額であるため、候補から除外された(太字ではない)というプログラムが完成しました。
上記のように、return falseはifと同時に使用することで、条件を定義し、eachメソッドの終了ができます。
繰り返し処理のスキップ
勘の良い方は気づかれたかもしれませんが、先ほど処理方法では、例えば、
<p>pen6 <span>100</span>円</p>
<p>pen8 <span>2000</span>円</p>
<p>pen9 <span>7000</span>円</p>
<p>pen10 <span>100000</span>円</p>
<p>pen7 <span>400</span>円</p>
上記のように文章が並んでいた場合、上から処理して、pen9に処理が差し掛かった時点でreturn falseしてしまい、pen7は400円と、6,000円以下であるにもかかわらず、太字にならずに終了してしまいます。
このように一定の条件下で処理をスキップしたい場合は「return true」を使用します。
そこで次は、家賃の相場が1,000円から10,000円のペンのみ太字にする処理をおこなってみましょう。
[HTML]
<h2>
ペン価格
</h2>
<p>pen6 <span>100</span>円</p>
<p>pen7 <span>400</span>円</p>
<p>pen8 <span>2000</span>円</p>
<p>pen9 <span>7000</span>円</p>
<p>pen10 <span>100000</span>円</p>
[jQuery]
$(‘p span’).each(function(){
if($(this).text() < 1000 || $(this).text() > 10000) return true;
var html = $(this).html().replace(/(d*)/g,”$1“);
$(this).html(html);
})
実行結果を見てみましょう。
ペン価格
pen6 100円
pen7 400円
pen8 2000円
pen9 7000円
pen10 100000円
if文の条件にて、価格が1000円未満、1万円以上の場合は「return true」で、処理をスキップしています。あくまで繰り返しは終了していないため、途中だけ太字にするというような処理も可能です。
まとめ
この記事では「jQuery」で使用できる2種類の「eachメソッド」ついて、それぞれ具体例を用いて解説しました。
プログラミングはただコピーするのではなく、要素の意味まで理解して使用していくことで、さまざまな応用ができる力が身につきます。
理解が難しかった点は、是非「自分で実行し、微妙にコードを変えたりしながら、処理がどのように変化するか」という「実験思考」でトライしてみてください。
必ずあなたのプログラミング力向上に役立つはずですよ！
