【JavaScript】配列データを自在に加工！mapメソッドで新しい配列を生成する技術

2026年1月28日

概要

APIから取得したデータリストから「IDだけを抜き出したい」、あるいは「商品価格に消費税を加えた新しいリストを作りたい」といった場合、map メソッドが最も適しています。

このメソッドは、配列のすべての要素に対して指定した関数を実行し、その結果を集めた新しい配列を生成します。元の配列を変更せず（非破壊的）、データの変換・抽出を行う際の基本テクニックです。

仕様（入出力）

`map` メソッド

配列の全要素を変換し、同サイズの新しい配列を返します。

引数・戻り値	説明
`callbackFn`	各要素に対して実行する関数。 `(element, index, array) => 戻り値`
戻り値	コールバック関数の戻り値で構成された新しい配列。

入力: 変換前の配列
出力: 変換後の新しい配列
特徴: 入力配列と出力配列の要素数（長さ）は必ず同じになります。

基本の使い方

1. 値を加工する

各要素に文字列を結合したり、計算を行ったりします。

const ids = [1, 2, 3];

// 各IDに接頭辞をつける
const userIds = ids.map((id) => `user_${id}`);

console.log(userIds); // ["user_1", "user_2", "user_3"]

2. インデックス（番号）を利用する

第2引数でインデックスを受け取ることができます。

const items = ['A', 'B', 'C'];

// 連番付きの文字列を生成
const numberedItems = items.map((item, index) => `${index + 1}: ${item}`);

console.log(numberedItems); // ["1: A", "2: B", "3: C"]

3. オブジェクトから特定のプロパティを抽出する

APIレスポンスなどで最も頻繁に使われるパターンです。

const users = [
    { id: 10, name: 'Alice' },
    { id: 20, name: 'Bob' }
];

// 名前だけの配列を作る
const names = users.map((user) => user.name);

console.log(names); // ["Alice", "Bob"]

コード全文（HTML / JavaScript）

商品の「税抜価格リスト」から、消費税（10%）を加算し、通貨フォーマットに整えた「税込価格リスト」を生成して画面に表示するシミュレーションです。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Price Calculator</title>
    <style>
        .price-panel {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            max-width: 400px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #f9f9f9;
        }
        h3 { margin-top: 0; color: #333; }
        .price-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .price-item {
            padding: 10px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
        }
        .price-item:last-child { border-bottom: none; }
        .original-price { color: #888; font-size: 0.9em; }
        .tax-included { color: #d32f2f; font-weight: bold; }
    </style>
</head>
<body>

<div class="price-panel">
    <h3>価格変換リスト (税込計算)</h3>
    <ul id="display-area" class="price-list">
        </ul>
</div>

<script src="calculator.js"></script>
</body>
</html>

JavaScript

/**
 * 価格計算スクリプト
 * mapメソッドを使用してデータ構造を変換する
 */

// 1. 元データ（税抜価格の配列）
const rawPrices = [1000, 2500, 500, 12800, 980];

// DOM要素
const displayArea = document.getElementById('display-area');

/**
 * 数値を日本円形式の文字列に変換するヘルパー関数
 * @param {number} num 
 * @returns {string} 例: "1,000"
 */
const formatCurrency = (num) => {
    return num.toLocaleString();
};

/**
 * データ変換と描画処理
 */
const renderPrices = () => {
    // 2. mapメソッドによるデータ変換
    // 数値の配列 -> HTML文字列を含むオブジェクトの配列へ変換
    const formattedData = rawPrices.map((price) => {
        const taxRate = 0.1;
        const taxIncluded = Math.floor(price * (1 + taxRate)); // 税込計算
        
        // 元の価格と計算後の価格をセットにして返す
        return {
            original: formatCurrency(price),
            final: formatCurrency(taxIncluded)
        };
    });

    // 3. 画面への出力
    // 変換されたデータを使ってDOMを生成
    formattedData.forEach((item) => {
        const li = document.createElement('li');
        li.className = 'price-item';
        li.innerHTML = `
            <span class="original-price">税抜: ¥${item.original}</span>
            <span class="tax-included">税込: ¥${item.final}</span>
        `;
        displayArea.appendChild(li);
    });
};

// 実行
renderPrices();

カスタムポイント

オブジェクトを返す場合:アロー関数でオブジェクトを直接返す場合は、() で囲む必要があります。const objects = array.map(val => ({ id: val }));
条件付きの変換:三項演算子を使うことで、値によって変換処理を変えることができます。const statusList = scores.map(score => score >= 80 ? '合格' : '不合格');

注意点

必ず新しい配列が返されるmap は結果として新しい配列を生成します。加工したデータを使わずに、単にループ処理をしたいだけの場合は map ではなく forEach を使ってください（無駄な配列生成を防ぐため）。
要素数は変わらない元の配列が10個なら、戻り値の配列も必ず10個になります。「条件に合うものだけ抽出して変換したい」場合は、先に filter をしてから map を行います。
非同期処理 (async/await) との相性map のコールバックに async をつけると、戻り値は「Promiseの配列」になります。値を取り出すには Promise.all と組み合わせる必要があります。

応用

`filter` とのメソッドチェーン

実務では「絞り込み」と「変換」をセットで行うことが非常に多いです。

const products = [
    { name: 'PC', price: 100000 },
    { name: 'Mouse', price: 3000 },
    { name: 'Keyboard', price: 15000 }
];

// 1. 1万円以上の商品を抽出 (filter)
// 2. その商品名だけの配列にする (map)
const expensiveItems = products
    .filter(product => product.price >= 10000)
    .map(product => product.name);

console.log(expensiveItems); // ["PC", "Keyboard"]