【jQuery】each()で配列やオブジェクトをループで処理する

こんにちは、Ryohei（@ityryohei）です！

jQueryのeach()で配列やオブジェクトをループで処理する方法のご紹介です。

ほとんどのプログラミング言語には繰り返し処理（ループ）というものが用意されています。ループ処理は、同じように繰り返して実行する処理をシンプルに記述することができる構文です。大量のデータを短いコードで処理することができますので、プログラミング言語にはなければならない構文です。プログラミング言語によって名称は異なりますが、同じような構文が用意されています。

もちろんJavaScriptやjQueryでも繰り返し処理（ループ）を使用することができます。JavaScriptには色々なループ処理が存在しますが、jQueryでは主にeachというメソッドを使用します。

本記事では、jQueryで配列やオブジェクトの値を取得する際にeachメソッドを使って処理する方法をご紹介できればと思います。

では、解説していきます。

eachメソッドとは？

eachメソッドはjQueryでの繰り返し処理をシンプルに書くことができるメソッドです。セレクタや配列、オブジェクトを指定して、引数を指定するだけでループを実現することができます。

eachメソッドには下記の2種類が存在します。

each()
jQuery.each()

each()はjQueryオブジェクト（HTML要素）を扱い、jQuery.each()他のオブジェクトも扱うことができるメソッドとなっています。

each()

each()はjQueryオブジェクトを扱うことができるメソッドです。
$(selector)に指定した要素をループしてHTML要素を参照することができます。

$(selector).each(function(index, element) {
  //ここに処理
});

例えば下記のようなリストがあるとします。

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

ループしてリストアイテムのテキストを取得したい場合は下記のように記述します。

$("li").each(function(index, elem) {
  console.log(index + ': '+ $(elem).text());
});

indexはループする際のインデックス番号が、elemには参照される要素が入ります。また、要素だけを参照したい場合、引数を省略してthisで取得することも可能です。

$("li").each(function() {
  console.log($(this).text());
});

jQuery.each()

配列やオブジェクトを扱うことができるメソッドです。
arrayに指定した配列やオブジェクトをループして参照することができます。

jQuery.each()の指定はとても簡単です。下記のように記述するだけで、arrayに指定した配列やオブジェクトのインデックスと値を簡単に取得することができます。

$.each(array, function(index, value) {
  //ここに処理
});

上記でご紹介したように、each()メソッドには2種類あり、jQueryオブジェクトかそれ以外かで記述方法が変わってきます。本記事では配列やオブジェクト（jQueryオブジェクトではない）のループ方法をご紹介できればと考えていますので、jQuery.each()メソッドを使って解説を進めていきます。

配列をループで処理する

まずは検証用に簡単な配列を定義します。usersという変数には日本の代表的な名字を持つ4名の名前が入っています。

const users = ['田中', '鈴木', '佐藤', '山田'];

上記をjQuery.each()でループします。

$.each(users, function(index, user){
  console.log(index + ': ' + user);
});

//出力結果
0: 田中
1: 鈴木
2: 佐藤
3: 山田

第二引数を省略してthisを使うことも可能です。（引数を省略しなくてもthisで参照することができます。）

$.each(users, function(index){
  console.log(index + ': ' + this);
});

//出力結果
0: 田中
1: 鈴木
2: 佐藤
3: 山田

オブジェクトをループで処理する

オブジェクトをループする場合も上記で紹介した配列をループすると同じです。まずは検証用に簡単なオブジェクトを定義してループしてみます。

こちらは配列とほとんど同じ記述方法になります。オブジェクトはキーを持っているため、index(key)も取得してみます。

const person = {
  name: '田中',
  age: '18',
  gender: 'male',
  from: 'Tokyo'
}

$.each(person, function(index, val){
  console.log(index + ': ' + val);
});

//出力結果
"name: 田中"
"age: 18"
"gender: male"
"from: Tokyo"

配列時と同様に第二引数を省略してthisを使うことも可能です。

$.each(person, function(index){
  console.log(index + ': ' + this);
});

//出力結果
"name: 田中"
"age: 18"
"gender: male"
"from: Tokyo"

連想配列をループで処理する

続いて連想配列をループで処理してみます。JSONデータを処理する場合に使えるかと思います。まずは検証用に数人分のユーザー情報を持つ連想配列を定義してみます。

const users = {
    user01: {
        name: '田中',
        age: '18',
        gender: 'male',
        from: 'Tokyo'
    },
    user02: {
        name: '鈴木',
        age: '24',
        gender: 'female',
        from: 'Osaka'
    },
    user03: {
        name: '佐藤',
        age: '32',
        gender: 'male',
        from: 'Aichi'
    },
    user04: {
        name: '山田',
        age: '40',
        gender: 'female',
        from: 'Fukuoka'
    }
};

上記の連想配列をループしてみたいと思います。

連想配列や階層の深いオブジェクトを参照する方法には下記の種類があります。

ドット演算子
ブラケット演算子

ドット演算子

まずはドット演算子でオブジェクトのプロパティを参照してみます。

$.each(users, function(index, user){
    console.log(
        index,
        'name: ' + user.name,
        'age: ' + user.age,
        'gender: ' + user.gender,
        'from: ' + user.from
    );
});

//出力結果
"user01" "name: 田中" "age: 18" "gender: male" "from: Tokyo"
"user02" "name: 鈴木" "age: 24" "gender: female" "from: Osaka"
"user03" "name: 佐藤" "age: 32" "gender: male" "from: Aichi"
"user04" "name: 山田" "age: 40" "gender: female" "from: Fukuoka"

プロパティをドットでつなぐため、チェーンと呼ばれたりします。可読性が良いため、一般的にはドット演算子で参照することが多いと思います。

ブラケット演算子

もう一つはブラケット演算子です。こちらは他のプログラミング言語でも使用されている一般的な方法かと思います。

$.each(users, function(index, user){
    console.log(
        index,
        'name: ' + user['name'],
        'age: ' + user['age'],
        'gender: ' + user['gender'],
        'from: ' +user['from']
    );
});

//出力結果
"user01" "name: 田中" "age: 18" "gender: male" "from: Tokyo"
"user02" "name: 鈴木" "age: 24" "gender: female" "from: Osaka"
"user03" "name: 佐藤" "age: 32" "gender: male" "from: Aichi"
"user04" "name: 山田" "age: 40" "gender: female" "from: Fukuoka"

ブラケット演算子を使用するメリットは、プロパティの指定に変数が使用できる点になります。使い分ける基準として、基本的にはドット演算子を使い、変数を使用して動的にプロパティへアクセスする必要がある場合はブラケット演算子を使用すると良いかもしれません。