「map()」の活用などの応用的な使い方に関しても解説していきます。「map()」は、HTML要素や配列・オブジェクトなどに対して繰り返し処理を実行して新しい配列要素を返してくれるのが特徴です。2種類の使い方があるので混乱しないようにしましょう!1つ目は、主にHTML要素などのjQueryオブジェクトを対象にする「.map()」メソッドとしての使い方です。2つ目は、配列やオブジェクトに対して実行する「$.map()」メソッドとしての使い方になります。それぞれの用途に応じて使い分ける必要があるので、本記事でその基本と応用についてしっかりと学習をしていきましょう!HTML要素での「.map()」の使い方この章では、HTML要素を対象にした「.map()」の基本的な使い方について見ていきましょう!一般的な構文から実際の繰り返し処理の方法について学んでいきます。基本的な構文と書き方についてまずは、もっとも基本となる構文から見ていきましょう!「.map()」は主にHTML要素を対象に実行することで繰り返し処理を行うことができます。処理})「.map()」のなかで実行したい処理を記述した関数を設定することができます。引数に「index(インデックス番号)」と「element(HTML要素)」を取得できるので、複数の要素に対して繰り返し処理が実行できるわけです。「return」を使うことで処理を行った結果を返すことができ、最終的に配列として取得できるのが大きな特徴と言えるでしょう。次のようなHTML要素があると考えて下さい。<p>サンプルサンプル1</p><p>サンプルサンプル2</p><p>サンプルサンプル3</p>単純なp要素が3つ並んでいますね。"サンプルサンプル3"]サンプルサンプル1この例では、p要素に対して「.map()」を使い繰り返し処理を実行しています。関数内の処理では「return」を使い、引数のelementで「innerHTML」プロパティを呼び出すことでテキスト文字を返しています。一般的な構文や実際のプログラミング手法について学んでいきます。基本的な機能は先ほどのHTML要素を扱う「.map()」と同じですが、配列・オブジェクトを扱う「$.map()」は指定方法が少し異なります。関数の引数には「value(値)」「index(インデックス番号)」を取得できますが、indexが第2引数である点に注意しましょう。(前章の「.map()」では第1引数がindexでした)「return」を使うことで処理した結果を返すことができ、最終的に配列として取得できる点は同じです。そこで、次のような配列を用意します。'メロン'];この配列に対して、各要素に任意の文字列を追加して新しい配列を取得してみましょう!次のサンプル例を見て下さい。"メロンです"]この例では、配列に対して「$.map()」による繰り返し処理を実行しています。関数内では、引数の「value」を使い「です」という文字列を追加しているのが分かりますね。これをreturnすることで、実行結果のように新規の配列を取得することができるわけです。今度は、オブジェクトに対して「$.map()」を実行してみましょう!そこで、次のようなオブジェクトを用意します。area」という3種類だけのデータが格納された単純なオブジェクトです。"Tokyo"]基本的な使い方は配列の時と同じで、オブジェクトを第1引数に指定して関数内に処理を記述します。関数内では単純に「value」をreturnしているだけなので、オブジェクトの「値」だけが返されます。最終的に実行結果のように値だけが抽出された配列を取得することができます。オブジェクトの場合は、配列に変換されるという点に注意しておきましょう!「map()」の活用この章では、「map()」を活用したプログラミング手法について見ていきましょう!主に、「null」を使った条件分岐の方法と「each()」との使い分けについて学んでいきます。nullを使って条件分岐する方法まずは、「null」を活用した条件分岐の方法について見ていきましょう!「null」というのは値が空っぽという意味を持っているのですが、map()のreturnに利用すると処理をパスするという意味にもなるのです。'イチゴ'」という条件式にすることで、配列内に「イチゴ」という値があれば真の処理を実行することになります。このように記述することで、配列内に「イチゴ」という値があれば処理をパスするという意味になります。実行結果のように「イチゴ」以外の値を抜き出して配列化しているわけです。分かりやすい大きな違いとしては、新規に配列を作成するかどうか?という点になります。"田中"]この例では、同じ配列を使って「map()」「each()」それぞれの繰り返し処理を実行しています。処理内容としては、各配列の値に「さん」という文字列を追加しているだけですが実行結果を見て下さい!「map()」は新規に配列を作成するのでそれぞれの値に「さん」が付与されているのが分かります。「each()」の場合は元の配列のままですね。最後に、もう一度ポイントをおさらいしておきましょう!「.map()」はHTML要素に続けて実行することで繰り返し処理を実行できる「$.map()」は配列・オブジェクトを第1引数に指定することで繰り返し処理を実行できる「null」を使うと繰り返し処理をパスする条件分岐が可能になる類似メソッドの「each()」との違いは新規に配列を作れるかどうか上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。