.map（）を使用してJavaScriptの配列アイテムを反復処理する方法

序章

従来のforループからforEach()メソッドまで、さまざまな手法とメソッドを使用して、JavaScriptのデータセットを反復処理します。最も一般的な方法の1つは、.map()方法です。 .map()は、親配列の各項目で特定の関数を呼び出して、配列を作成します。 .map()は、呼び出し元の配列にのみ変更を加える変異メソッドとは対照的に、新しい配列を作成する非変異メソッドです。

この方法は、配列を操作するときに多くの用途があります。このチュートリアルでは、JavaScriptでの.map()の4つの注目すべき使用法を見ていきます。配列要素の関数の呼び出し、文字列の配列への変換、JavaScriptライブラリでのリストのレンダリング、配列オブジェクトの再フォーマットです。

前提条件

このチュートリアルではコーディングは必要ありませんが、例に沿ってフォローすることに興味がある場合は、 Node.jsREPLまたはブラウザー開発者ツールのいずれかを使用できます。

Node.jsをローカルにインストールするには、Node.jsをインストールしてローカル開発環境を作成する方法の手順に従います。
Chrome DevTools は、最新バージョンの GoogleChromeをダウンロードしてインストールすることで利用できます。

ステップ1—配列内の各アイテムで関数を呼び出す

.map()は、引数の1つとしてコールバック関数を受け入れます。この関数の重要なパラメーターは、関数によって処理されているアイテムの現在の値です。これは必須パラメーターです。このパラメーターを使用すると、配列内の各項目を変更して、新しい配列の変更されたメンバーとして返すことができます。

次に例を示します。

const sweetArray = [2, 3, 4, 5, 35]
const sweeterArray = sweetArray.map(sweetItem => {
    return sweetItem * 2
})

console.log(sweeterArray)

この出力はコンソールに記録されます。

Output[ 4, 6, 8, 10, 70 ]

これをさらに簡略化して、次の方法でクリーンにすることができます。

// create a function to use
const makeSweeter = sweetItem => sweetItem * 2;

// we have an array
const sweetArray = [2, 3, 4, 5, 35];

// call the function we made. more readable
const sweeterArray = sweetArray.map(makeSweeter);

console.log(sweeterArray);

同じ出力がコンソールに記録されます。

Output[ 4, 6, 8, 10, 70 ]

sweetArray.map(makeSweeter)のようなコードを使用すると、コードが少し読みやすくなります。

ステップ2—文字列を配列に変換する

.map()はアレイプロトタイプに属することがわかっています。このステップでは、これを使用して文字列を配列に変換します。ここでは、文字列を処理するメソッドを開発していません。むしろ、特別な.call()メソッドを使用します。

JavaScriptのすべてはオブジェクトであり、メソッドはこれらのオブジェクトにアタッチされた関数です。 .call()を使用すると、あるオブジェクトのコンテキストを別のオブジェクトで使用できます。したがって、配列内の.map()のコンテキストを文字列にコピーすることになります。

.call()には、使用するコンテキストの引数と、元の関数の引数のパラメーターを渡すことができます。

次に例を示します。

const name = "Sammy"
const map = Array.prototype.map

const newName = map.call(name, eachLetter => {
    return `${eachLetter}a`
})

console.log(newName)

この出力はコンソールに記録されます。

Output[ "Sa", "aa", "ma", "ma", "ya" ]

ここでは、文字列で.map()のコンテキストを使用し、.map()が期待する関数の引数を渡しました。

これは、文字列の .split（）メソッドと同じように機能しますが、個々の文字列文字を配列に返す前に変更できる点が異なります。

ステップ3—JavaScriptライブラリでのリストのレンダリング

React のようなJavaScriptライブラリは、.map()を使用してリスト内のアイテムをレンダリングします。ただし、.map()メソッドはJSX構文でラップされているため、これにはJSX構文が必要です。

Reactコンポーネントの例を次に示します。

import React from "react";
import ReactDOM from "react-dom";

const names = ["whale", "squid", "turtle", "coral", "starfish"];

const NamesList = () => (
  <div>
    <ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
  </div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);

これはReactのステートレスコンポーネントであり、divをリストとともにレンダリングします。個々のリストアイテムは、.map()を使用してレンダリングされ、names配列を反復処理します。このコンポーネントは、rootのIdを持つDOM要素でReactDOMを使用してレンダリングされます。

ステップ4—配列オブジェクトの再フォーマット

.map()を使用して、配列内のオブジェクトを反復処理し、従来の配列と同様に、個々のオブジェクトのコンテンツを変更して、新しい配列を返すことができます。この変更は、コールバック関数で返される内容に基づいて行われます。

次に例を示します。

const myUsers = [
    { name: 'shark', likes: 'ocean' },
    { name: 'turtle', likes: 'pond' },
    { name: 'otter', likes: 'fish biscuits' }
]

const usersByLikes = myUsers.map(item => {
    const container = {};

    container[item.name] = item.likes;
    container.age = item.name.length * 10;

    return container;
})

console.log(usersByLikes);

この出力はコンソールに記録されます。

Output[
    {shark: "ocean", age: 50},
    {turtle: "pond", age: 60},
    {otter: "fish biscuits", age: 50}
]

ここでは、角かっことドット表記を使用して、配列内の各オブジェクトを変更しました。このユースケースは、フロントエンドアプリケーションで保存または解析される前に、受信したデータを処理または圧縮するために使用できます。

結論

このチュートリアルでは、JavaScriptでの.map()メソッドの4つの使用法について説明しました。他の方法と組み合わせて、.map()の機能を拡張することができます。詳細については、 JavaScriptで配列メソッドを使用する方法：反復法の記事を参照してください。