JavaScriptのArray.prototype.map()の使い方：引数・戻り値・実例と注意点
Array.prototype.map()で配列の各要素を変換して新しい配列を作る方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。
Array.prototype.map() は、配列の各要素を変換して新しい配列を作るためのインスタンスメソッドです。この記事では基本例と境界条件の例を実行し、結果を確かめながら使い方を学びます。
Array.prototype.map()でできること
活用する場面
価格一覧を税率で変換する例です。元配列は保持されますが、要素がオブジェクトの場合はコールバック内でそのオブジェクトを変更できる点に注意します。
呼び出す対象
対象となる配列・文字列・オブジェクトなどの値に続けて呼び出します。リファレンス名のprototypeを実際の呼び出しに毎回書く必要はありません。
書き方・引数・戻り値
基本構文
次は引数の位置を示す構文です。array や text などの名前は実際の対象の変数へ置き換えます。引数が必要な関数では、構文だけでなく後の完成例を実行してください。
array.map((value, index, array) => result)引数
コールバックに要素、添字、元配列が渡されます。第2引数にthisArgを指定できます。
戻り値と元データへの影響
各呼び出しの戻り値を並べた新しい配列。元配列の穴は穴として残ります。
実行方法はブラウザーとNode.jsの2つ
ブラウザーで試す
開発者ツールのConsoleを開き、後の「基本例」のコードを実行します。繰り返し貼り付けて変数名の再宣言エラーが出る場合は、ページを再読み込みするか、コード全体をブロックで囲みます。出力はページ本文ではなくConsoleに表示されます。
ファイルで実行する場合は index.html と main.js を同じフォルダーへ保存します。次のHTMLをブラウザーで開いてからConsoleを確認します。main.js には基本例のJavaScriptを記述してください。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Array.prototype.map()の練習</title>
<script src="./main.js" defer></script>
</head>
<body><h1>実行結果は開発者ツールのConsoleに表示されます</h1></body>
</html>Node.jsで試す
同じ基本例を main.js に保存し、そのフォルダーのターミナルで次を実行します。HTMLは使いません。結果はターミナルに表示されます。Node.jsが未導入の場合はJavaScript入門の実行環境を先に確認してください。
node --version
node main.jsこの記事はJavaScript標準の関数・メソッドが対象で、DOM操作は使いません。実行環境が対象機能に対応していることを下の互換性情報で確認してください。非同期の例は async function の中で await を使うため、通常のスクリプトとして保存できます。
実行結果で学ぶ基本例
main.jsに書くコード
const prices = [100, 200, 300];
const result = prices.map(price => price * 1.1);
console.log(JSON.stringify(result.map(Math.round)));実行結果と読み方
[110,220,330]価格一覧を税率で変換する例です。元配列は保持されますが、要素がオブジェクトの場合はコールバック内でそのオブジェクトを変更できる点に注意します。
間違えやすい点と境界条件
注意する仕様
波括弧を使うアロー関数ではreturnを忘れないようにします。async関数を渡すとPromiseの配列になり、完了待ちは別途必要です。
別の条件で確かめる
次のコードは基本例とは独立しています。main.js の内容を置き換えて実行してください。
const result = [1, 2].map(value => { value * 2; });
console.log(result.every(value => value === undefined));trueエラーを捕捉する例では、エラー名やメッセージも期待する出力の一部です。成功例だけでなく、空の入力・型の違い・該当なしといった条件を確かめると、実際の画面やデータ処理へ組み込みやすくなります。
ブラウザーとNode.jsの互換性
対応開始版の目安
次はMDN Browser Compatibility Data 8.1.2の記録です。2026年9月21日に確認しました。開始版はサポート中の推奨バージョンを意味しません。実際に配布するコードで使う構文や引数の追加仕様についても、対象環境で確認してください。
- Chrome：1以降
- Edge：12以降
- Firefox：1.5以降
- Safari：3以降
- Android版Chrome：18以降
- iOS版Safari：1以降
- Node.js：0.10.0以降
部分対応・補足条件ありの場合は、MDNの互換性表の注記も確認します。この表はデータに基づく情報で、すべてのブラウザーで実機検証したという意味ではありません。
練習と関連する関数
入力を変えて結果を予測する
基本例の入力を1か所変え、実行前に戻り値を予測します。次に境界条件の例と比べ、元データが変わるか、失敗時に例外が出るか、値として返るかを説明してください。
次に読む記事
Array.prototype.filter()の使い方Array.prototype.reduce()の使い方Array.prototype.find()の使い方Array.prototype.findIndex()の使い方- JavaScript関数・メソッド一覧
- 関数・スコープ・モジュール