※JavaScriptのforEach()については『JavaScriptにおけるforEach()とは？基本的なループの使い方と注意点』をご参照ください。
配列の内容を関数で処理する際に、jQueryではeach()を、プレーンなJavaScriptではforEach()を使います。
気を付けなければならないことは、プレーンなJavaScriptにはeach()というメソッドは存在しません。each()メソッドはjQueryに実装されています。
- JavaScriptではforEach()関数が利用可能
- jQueryではeach()関数が利用可能
- JavaScriptではfor()を使うことも出来る
each()とforEach()を混同してしまい、利用するシーンでどちらか分からなくなることがあるので整理しておきましょう。
JavaScriptのforeach()については別途記事にしてありますので、併せてご参照ください。
ループってプログラミング初心者には少しハードル高いんだよね
forEachとeachが使えれば何とかなりますよ！
jQueryにおけるeach()のチートシートと使い方
jQueryのeach()の最も簡単な構成サンプルを記載します。
$('li').each(function(index) {
$(this).text(index + '番目のリストです');
});上記例だとページ内のすべての<li>に対して、中身が「n番目のリストです」という表記に書き換えられます。例えば、sideMenuというクラス内の<li>だけに適応したい時は、
$('.sideMenu li').each(function(index) {
$(this).text(index + '番目のリストです');
});と書けば、sideMenuの配下にある<li>のみを書き換えることが可能です。
実務（仕事）で最も登場するeach()の事例
実際の業務では<li>の中身を全部書き換えるなんて使い方はまずしません。
特定のセレクタのDOMに対して何かの処理を行う業務で、each()を一番使うと考えられるのはjQueryプラグインの実装時です。
jQueryのプラグインの使い方は、slickスライダーであれば、
$('.slider-main').slick();Owl Carouselであれば、
$(".slider-main").owlCarousel();のように記述すると、そのプラグインを実行することが出来ますね。
ただ、この記述の仕方だと、スライダーは1か所しか動作しません。よく見かけるのは以下のように書いて複数のスライダーを動かしているあまり賢くない例です。
$('.slider-main-01').slick();
$('.slider-main-02').slick();
$('.slider-main-03').slick();同じオプションを指定することが前提とはなりますが、この複数の記述を1つにまとめることが出来ます。
そこで登場するのがeach()関数です。
スライダーを実装したい要素のクラスを統一させ（例えば「slider-container」とします）、そのクラス名を使いまわしてスライダーを複数（1つでも可）実装することが可能になります。以下のようにプログラムコードを書くことで実現できます。
$('.slider-container').each(function(){
$(this).slick();
});こういったeach()を使った書き方であればコードがスッキリしますし、オプションを指定する場合には複数個所を修正しなくてよくなるので効率的です。
念のためオプションを付与した例を紹介しますと、
$('.slider-container').each(function(){ // slickコンテナ全部に適用させて実行
$(this).slick({
autoplay: true,
arrow: false,
dots: true
});
});という具合になります。同一オプションであれば、修正する際に1か所直せばすべてのプラグインの実行に反映されるので修正の手間が減ります。
便利なので今まで「…01」「…02」「…03」のようなクラスで別々に実行させていた方は、是非each()を使ってみてください。
$.each()の利用シーン
jQueryのeach()関数には、$(セレクタ).each()ではなく、$.each()という使用方法もあります。
セレクタを指定しないバージョンですね。
セレクタを指定しないのでDOM操作ではなく、よくJavaScriptの配列に用います。次のサンプルコードは先ほど紹介したJavaScriptのforEach()のサンプルコードをjQueryに置き換えたものです。
let sampleArray = [1, 2 , 4, 5, 8192];
$.each(sampleArray, function(index, value) {
console.log('value : ' + value);
console.log('index : ' + index);
});上記の例では、配列をコンソールに出力しているだけです。これならプレーンなJavaScriptのforEach()で書いた方がベターです。
せっかくjQueryを使っているので、ループの中でDOM操作するのが一般的ですね。実際の業務でもjQueryの$.each()を利用する場合はDOM操作を伴うことが普通です。
let sampleArray01 = [1, 2 , 4, 5, 8192];
$.each(sampleArray01, function(index, value) {
$('#anyList').append(` // テンプレートリテラルはバッククォートで囲む
<li>${index} : ${value}</li>
`);
});こんな感じで実装します。append()の「`」はバッククォートなので改行出来ていることに注意してください。この記述方法はテンプレートリテラルという書き方になります。テンプレートリテラルについては下記に紹介していますので、気になる方は参考にしてみてください。
テンプレートリテラルを使うと${index}や${value}という記法で変数を呼び出すことが可能になります。非常に利便性が高いので知っておいて損はないはずです。
ちなみにテンプレートリテラルを利用しないと以下のような記述になります。
let sampleArray01 = [1, 2 , 4, 5, 8192];
$.each(sampleArray01, function(index, value) {
$('#anyList').append('<li>' + index + ' : ' + value + '</li>');
});この場合、<li>の中身が単純なのでこれでも良いと思います。ただ、<li>の中に<span>が入ったり、<p>が入ったりすると複雑な構造を一行に書かないといけなくなくので、テンプレートリテラルを使うことをおすすめします。
$('#anyList').append('<li><span>' + index + '</span> : <span>' + value + '</span></li>');どこで切れているのか分からなくなり、ミスが頻発するのでテンプレートリテラルが有効ですね。
まとめ
each()はjQueryの関数、forEach()はJavaScriptの関数なのでごっちゃにならないようにご注意ください。
| 何の関数か？ | 主な利用シーン | |
| forEach() | JavaScript | 配列の処理 |
| each() | jQuery | DOM操作 |
自戒の意味も込めて記事としてまとめてみました。皆さんのお役に立てたら光栄です！
