【jQuery】.map()の使い方。

jQueryでの.map()の使い方を書いていきます。

HTMLから取得したデータで配列を作りたいと思って調べると、.map()というメソッドが出てきました。

結果、無事に思ったような配列が作れたので、備忘録として残しておきます。

実務では、作った配列を再度HTML要素内に出力する必要があったので、作成した配列を出力する方法も書いておきます。

.map()メソッドとは。

.map()は、HTML要素や配列・オブジェクトに繰り返し処理を実行して、新たに作成した配列を返してくれます。

例えば、以下のようなHTML要素があるとします。

<input class="text" value="テキストA">
<input class="text" value="テキストB">
<input class="text" value="テキストC">

上記の要素に対して、.map()を使って配列を作ってみます。

let array = $('.text').map(function(index, el) {
  return el.value;
});
console.log(array);

inputタグに特に意味はありません！

私が実務で使用したときに、たまたまinputタグだっただけです。

pタグなどでも構いません。

出力内容は、以下の通りです。

//コンソール
[テキストA,テキストB,テキストC]

上記のように「該当のタグから」指定した要素を取得して、新しい配列として返してくれます。

取得した配列は、テキストとして変換してHTML要素の中に出力したりなど、配列を利用してさまざまなことが行えます。

私は、実務で以下のように.gat()を使用して、inputタグのvalueの値に出力して使いました。

<input class="text" value="テキストA">
<input class="text" value="テキストB">
<input class="text" value="テキストC">

<input class="all_text" value="">

let array = $('.text').map(function(index, el) {
  return el.value;
}).get();
$('.all_text').val(array);

ここで、調べていて疑問に思ったのが、.get()も配列を作って返してくれます。

つまり、やってくれることは.map()と同じです。

ただ、上記の記述の場合、.get()をつけないと、inputタグのvalueへ出力することができませんでした。

生成される配列の種類が違うのか、それともメソッド自体の問題なのか、また調べて記事にしたいと思います。

.map()の構文

前置きが長くなりましたが、以下が.map()の構文です。

$('HTML要素').map(function(index, element) {

 return （実行したい処理）

});

indexでindex番号を、elementでHTML要素を取得できます。

returnで処理した値を返してあげることで、配列として取得することができます。

さきほど、以下の処理で配列として出力できたのは、returnで返してあげたからです。

let array = $('.text').map(function(index, el) {
  return el.value;
});
console.log(array);

＄.map()で配列やオブジェクトに対して処理を行う。

実務で使いませんでしたが、調べていたら出てきたので書いておきます。

$.map()は、既にある配列に対して、なにかしら手を加えたい場合に使います。

＄.map()の構文

まずは、構文をみてみましょう。

$.map(配列もしくは、オブジェクト, function(value, index) {
  return （実行したい処理）
});

以上が、構文です。

対象としたい配列を第一引数に指定します。

//配列を定義
let array = [テキストA,テキストB,テキストC];

//第一引数に配列を指定。
$.map(array, function(value, index) {
  return （実行したい処理）
});

配列を定義して、第一引数に指定したら、実行したい処理を書いて、returnで返してあげます。

let result = $.map(array, function(value, index) {
  return '処理した' + value + 'です！'
});
console.log(result);

上記とすることで、以下のように配列に手を加えることができます。

[処理したテキストAです！,処理したテキストBです！,処理したテキストCです！]

.map()と同じでreturnするのを忘れないようにしてください！

.each()との違い。データを操作・変換したいのか。それとも、処理のみをしたいのか。

似たようなメソッドにeachがあると思います。

しかし、それぞれに適した使い方があるので、説明しておきます。

実際、私も調べている際に迷ったので。

.each()とは。

eachメソッドは、jQueryで配列やオブジェクトをループ処理するために使います。eachを使うと、配列の要素やオブジェクトのプロパティを1つずつ反復処理し、各要素にアクセスできます。forやforEachメソッドと異なり、eachはjQueryオブジェクトに特化しており、thisを使って要素自体にアクセスすることができます。

$('.item').each(function(index, element) {
  console.log(index, element);
});

このコードは、.itemクラスを持つ要素を順番に処理します。

.each()と.map()の主な違いは、戻り値の扱い。

.each(): 配列やオブジェクトの各要素を反復処理しますが、戻り値を返しません。

要素をその場で処理（例: DOM操作）する際に使用します。

.map(): 各要素に対して操作を行い、その結果を新しい配列として返します。データを変換して返したい場合に使用します。

違いについてまとめと・・・

.each()は処理を行うだけ、.map()は新しいデータを生成。

と、いった感じです。

どのような結果を求めているか。で使用するメソッドを使い分けます。

.each()のメリット・デメリット

メリット

• 
  DOM操作やイベントを伴う操作に向いている。
• 
  新しい配列を返さず、処理の結果をその場で利用できる。

デメリット

• 
  返り値がないため、処理結果を新たに格納したり、別の処理に利用することができない。

.map()のメリット・デメリット

メリット

• 
  各要素に変換を加え、新しい配列として結果を返す。
• 
  配列操作やデータ変換に便利。

デメリット

• 
  不要なデータ構造（新しい配列）が返されるので、効率性に欠けることがある。