JavaScript | map() メソッドを使った 実践的な例

では、さらに 応用編：複数条件やネストしたオブジェクトの変換を map で一括処理 を、初心者向けにコード付きで解説します。

実践応用編：ネストオブジェクト + 複数条件

前提

例えば API からこんな注文データが返ってきたとします：

let orders = [
  { 
    id: 1, 
    customer: { firstName: 'Sora', lastName: 'Yamada' }, 
    items: [
      { name: 'Pen', price: 100, quantity: 2 },
      { name: 'Notebook', price: 250, quantity: 1 }
    ]
  },
  { 
    id: 2, 
    customer: { firstName: 'Mina', lastName: 'Kato' }, 
    items: [
      { name: 'Bag', price: 1200, quantity: 1 },
      { name: 'Pencil', price: 50, quantity: 3 }
    ]
  }
];

let orders = [
  { 
    id: 1, 
    customer: { firstName: 'Sora', lastName: 'Yamada' }, 
    items: [
      { name: 'Pen', price: 100, quantity: 2 },
      { name: 'Notebook', price: 250, quantity: 1 }
    ]
  },
  { 
    id: 2, 
    customer: { firstName: 'Mina', lastName: 'Kato' }, 
    items: [
      { name: 'Bag', price: 1200, quantity: 1 },
      { name: 'Pencil', price: 50, quantity: 3 }
    ]
  }
];

やりたいこと

1. 顧客名をフルネームにする
2. 各商品の税込価格を計算する
3. 注文合計金額を計算し、「高額（>1000円）」か「普通」をラベル付け
4. UI 用に整形して 新しい配列 にまとめる

ステップ1：mapでネストも変換

let displayOrders = orders.map(order => {
  // 顧客名をフルネーム
  let fullName = `${order.customer.firstName} ${order.customer.lastName}`;
  
  // 商品ごとの税込価格を計算
  let itemsWithTax = order.items.map(item => ({
    name: item.name,
    quantity: item.quantity,
    priceWithTax: Math.round(item.price * 1.1)
  }));
  
  // 注文合計金額を計算
  let total = itemsWithTax.reduce((sum, item) => sum + item.priceWithTax * item.quantity, 0);
  
  // 高額・普通のラベル
  let label = total > 1000 ? '高額' : '普通';
  
  // 新しいオブジェクトを返す
  return {
    orderId: order.id,
    customerName: fullName,
    items: itemsWithTax,
    totalAmount: total,
    label: label
  };
});

let displayOrders = orders.map(order => {
  // 顧客名をフルネーム
  let fullName = `${order.customer.firstName} ${order.customer.lastName}`;
  
  // 商品ごとの税込価格を計算
  let itemsWithTax = order.items.map(item => ({
    name: item.name,
    quantity: item.quantity,
    priceWithTax: Math.round(item.price * 1.1)
  }));
  
  // 注文合計金額を計算
  let total = itemsWithTax.reduce((sum, item) => sum + item.priceWithTax * item.quantity, 0);
  
  // 高額・普通のラベル
  let label = total > 1000 ? '高額' : '普通';
  
  // 新しいオブジェクトを返す
  return {
    orderId: order.id,
    customerName: fullName,
    items: itemsWithTax,
    totalAmount: total,
    label: label
  };
});

ステップ2：結果を確認

console.log(displayOrders);

console.log(displayOrders);

出力例：

[
  {
    orderId: 1,
    customerName: 'Sora Yamada',
    items: [
      { name: 'Pen', quantity: 2, priceWithTax: 110 },
      { name: 'Notebook', quantity: 1, priceWithTax: 275 }
    ],
    totalAmount: 495,
    label: '普通'
  },
  {
    orderId: 2,
    customerName: 'Mina Kato',
    items: [
      { name: 'Bag', quantity: 1, priceWithTax: 1320 },
      { name: 'Pencil', quantity: 3, priceWithTax: 55 }
    ],
    totalAmount: 1485,
    label: '高額'
  }
]

✅ ポイント解説

1. ネストした配列も map で変換可能
   • order.items.map(...) のように入れ子で使える
   • 内部の配列も新しい配列として返す
2. 計算も自由に組み込める
   • reduce で合計金額を計算
   • 条件分岐でラベル付け (total > 1000 ? '高額' : '普通')
3. UI用データにまとめる
   • 元データの形式はそのままでも、新しい配列に整形して渡せば表示が簡単

図解イメージ

orders: [order1, order2]

map(order => {
  顧客名整形 → fullName
  items.map(item => 税込計算 → itemsWithTax)
  合計計算 → total
  ラベル付け → label
  return {orderId, customerName, items, totalAmount, label}
})

displayOrders: [整形済み order1, 整形済み order2]

応用ポイント

• ネストの配列・オブジェクトでも map でまとめて処理できる
• UI 表示用に加工する際は、計算・条件分岐・文字列整形などを自由に組み合わせられる
• 元データは変更されないので、API データを安全に加工可能