JavaScriptのmap()メソッド徹底解説！基本構文からReactでの活用例まで

プログラマーはコードの重複を避けることを好みます。コードの繰り返しが増えるほど保守性が低下し、プログラムの実行速度も遅くなります。そのため、JavaScriptにはデータセットを反復処理するためのさまざまなメソッドが用意されています。

その中の一つがmap()メソッドです。このメソッドは既存の配列をループ処理し、配列内のすべての要素に対して特定の関数を実行します。

このガイドでは、JavaScriptのmap()関数の使い方について解説します。実際によく使われる3つの具体例を通じて、map()関数の活用方法を学んでいきましょう。

map()関数とは？

JavaScriptのmap()メソッドは、配列内の各要素に対して特定の関数を呼び出します。そして、その関数の実行結果は新しい配列に格納されます。

たとえば、配列内のすべての要素を2倍にしたい場合を考えてみましょう。「配列の各要素を2倍にする関数」を作成し、それをmap()メソッドに渡すことで実現できます。

map()関数の構文は以下のとおりです。

const newArray = oldArray.map(function, thisValue);

functionは、配列の各要素に対して実行されるコールバック関数です。thisValueは、関数内でthis変数として参照されるデフォルト値で、省略した場合はundefinedになります。

mapメソッドは、コールバック関数の実行結果をもとに新しい配列を作成する点が重要です。元の配列は変更されません。

map()メソッドにはさまざまな用途があります。最も一般的なのは、配列要素のリストに対して関数を呼び出すことです。たとえば、数値リストのすべての数値を乗算したり、文字列リストの各文字列の長さを求めたりするケースが挙げられます。

また、ReactやVue.jsなどのJavaScriptライブラリでリストをレンダリングする際にも、この関数が頻繁に使われます。

map()で関数を呼び出す

map()メソッドを使うと、リスト内のすべての要素に対して繰り返し作業を実行できます。これは多くの場面で役立ちます。

たとえば、あなたがクッキー店を経営していて、すべてのクッキーの価格を5%値上げするとしましょう。新しい価格を一つずつ手動で計算する代わりに、map()メソッドを使えば一括で処理できます。

以下がそのコードです。

const cookiePrices = [1.50, 1.75, 1.60, 2.00, 2.05, 1.45];
const newCookiePrices = cookiePrices.map(cookie => {
	var price = cookie * 1.05;
	return price.toFixed(2);
});

console.log(newCookiePrices);

このコードの出力結果は次のとおりです。

["1.58", "1.84", "1.68", "2.10", "2.15", "1.52"]

この例では、すべてのクッキーの価格を5%引き上げました。まず、「cookiePrices」という変数にクッキーの価格リストを宣言します。次に、map()メソッドを使い、各クッキーの価格を5%上げる計算を行う関数を適用しました。

「cookie * 1.05」で値上げ後の価格を計算し、その結果をtoFixed(2)で小数点以下2桁に丸めて返しています。最後に、console.log()メソッドで新しい配列をコンソールに出力しました。

また、関数を独立させて定義することで、コードをより読みやすくすることもできます。

function calculateIncrease(cookie) {
	var price = cookie * 1.05;
	return price.toFixed(2);
}

const cookiePrices = [1.50, 1.75, 1.60, 2.00, 2.05, 1.45];
const newCookiePrices = cookiePrices.map(calculateIncrease);

console.log(newCookiePrices);

このコードも先ほどと同じ結果を返しますが、処理内容が関数名から把握できるため、格段に読みやすくなっています。

["1.58", "1.84", "1.68", "2.10", "2.15", "1.52"]

配列の要素を変換する

map()メソッドは、配列内の要素を変換する際にもよく使われます。ここでは、クッキー店が顧客向けのポイントプログラムを導入する場合を考えてみましょう。購入したクッキー1枚につき10ポイントが付与され、100ポイント貯まると無料でクッキーと交換できる仕組みです。

このタスクを実現するプログラムは以下のとおりです。

var customers = [
	{ name: "Hannah Geoffrey", cookiesPurchased: 2 },
	{ name: "Peter Clarkson", cookiesPurchased: 3 },
	{ name: "Steven Hanson", cookiesPurchased: 7 }
]

function calculateLoyaltyPoints(customer) {
	var newCustomer = {
		name: customer.name,
		cookiesPurchased: customer.cookiesPurchased,
		points: customer.cookiesPurchased * 10
	}

	return newCustomer;
}

var customersWithPoints = customers.map(calculateLoyaltyPoints);

console.log(customersWithPoints);

このコードの出力結果は次のとおりです。

[{ cookiesPurchased: 2, name: "Hannah Geoffrey", points: 20 }, { cookiesPurchased: 3, name: "Peter Clarkson", points: 30 }, { cookiesPurchased: 7, name: "Steven Hanson", points: 70 }]

この例では、各顧客が購入したクッキーの数に基づいて、付与すべきポイントの合計を計算しています。

まず、「customers」というオブジェクトの配列を宣言します。このリストには、key:valueペアを使って顧客の名前と購入したクッキーの枚数が格納されています。

次に、calculateLoyaltyPoints()という関数を宣言します。この関数は、各顧客データに「points」という新しい項目を追加します。ポイントは、購入したクッキーの枚数に10を掛けて算出されます。

そして、map()メソッドを使って顧客リストを反復処理し、calculateLoyaltyPoints()関数を適用します。最後に、更新された顧客リストを出力します。このリストには、各顧客のエントリーに追加された「points」の値が反映されています。

ライブラリでリストをレンダリングする

map()メソッドは、ReactなどのJavaScriptライブラリでも広く使われています。主な目的は、リスト内の項目をレンダリングすることです。ここでは、Reactにおけるmap()の使用例を見てみましょう。

たとえば、店舗で販売しているクッキーのリストをWebサイトに表示したいとします。以下のコードで実現できます。

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

var cookies = ["Raspberry Chocolate Chip", "White Chocolate Chip", "Oat", "Milk Chocolate Chip"];

const CookieList = () => (
	<div>
		<ul>{cookies.map((cookie, i) => 
			<li key={i}>{cookie}</li>
		       )}
		</ul>
	</div>
);

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

このコードは、Reactでリストを表示するコンポーネントを作成します。各リスト項目は<li>タグで囲まれ、map()によって描画されます。map()はリスト内の各項目に対して個別の<li>タグを生成し、変数「i」は各リスト項目に一意のkeyを割り当てます。このkeyは、Reactがリストの各要素を効率的に識別・管理するために必要なものです。

map()と他のイテレータメソッドの違い

mapは、JavaScriptのイテレータメソッドの一例です。イテレータメソッドを使うと、リスト内のすべての項目をループ処理して何らかの操作を行えます。

map()関数を使用するかどうかを判断する際は、まず「別のイテレータメソッドの方が適切ではないか？」と自問するのが良い習慣です。これにより、目的に合った正しいツールを選択できます。

JavaScriptには、map以外にも以下のようなイテレータメソッドがあります。

• reduce(): 配列を単一の値に集約できるメソッドです。配列内のすべての項目を合計するような処理に最適です。
• filter(): 特定の条件を満たさない項目をリストから除外できるメソッドです。
• forEach(): リスト内のすべての項目に関数を実行するメソッドです。forループと同様に、配列をループ処理して各項目にタスクを実行できます。

「mapはforEach()メソッドととても似ているように聞こえるけど、同じものなの？」と思った方もいるかもしれません。良い質問です。実は、この2つのメソッドには微妙ながら重要な違いがあります。

map()関数はリストを反復処理し、各項目を変換して新しい配列を返します。一方、forEach()関数はリストを反復処理し、副作用としてリストに何らかの操作を加えますが、戻り値として新しい配列は返しません。

map()関数は、リスト内のすべての項目に関数を適用したい場合、Reactなどのフレームワークでリストコンポーネントを宣言したい場合、またはリストの内容を変換した新しい配列が必要な場合に最適です。

まとめ

map()メソッドは、繰り返しのタスクを効率的に実行したい場合に非常に便利です。また、Reactでリストなどのコンポーネントを宣言する際にも欠かせない存在です。

このチュートリアルでは、map()メソッドの3つの主要な使用例（関数の適用、配列要素の変換、Reactでのリスト表示）を紹介しました。これで、あなたもプロの開発者のようにJavaScriptのmap()メソッドを使いこなせるようになったはずです！