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

では、さらに 動的に商品が増減する場合でも map だけで UI 用に整形できるサンプル を作ります。

応用編：動的なネスト配列を map だけで整形

前提

• 注文データの配列 orders
• 各注文の items 配列は商品の数が変動（0〜複数）
• UI には「顧客名」「商品名・数量・税込価格」「合計金額」「ラベル」を表示したい

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 },
      { name: 'Eraser', price: 80, quantity: 2 }
    ]
  },
  { 
    id: 3, 
    customer: { firstName: 'Taro', lastName: 'Suzuki' }, 
    items: [] // 商品が0件の場合もある
  }
];

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 },
      { name: 'Eraser', price: 80, quantity: 2 }
    ]
  },
  { 
    id: 3, 
    customer: { firstName: 'Taro', lastName: 'Suzuki' }, 
    items: [] // 商品が0件の場合もある
  }
];

ステップ1：mapでネスト配列を整形

let displayOrders = orders.map(order => ({
  orderId: order.id,
  customerName: `${order.customer.firstName} ${order.customer.lastName}`,
  items: order.items.map(item => ({
    name: item.name,
    quantity: item.quantity,
    priceWithTax: Math.round(item.price * 1.1)
  })),
  totalAmount: order.items
    .map(item => item.price * item.quantity * 1.1) // 各商品の税込合計
    .reduce((sum, amount) => sum + amount, 0),
})).map(order => ({
  ...order,
  label: order.totalAmount > 1000 ? '高額' : '普通'
}));

let displayOrders = orders.map(order => ({
  orderId: order.id,
  customerName: `${order.customer.firstName} ${order.customer.lastName}`,
  items: order.items.map(item => ({
    name: item.name,
    quantity: item.quantity,
    priceWithTax: Math.round(item.price * 1.1)
  })),
  totalAmount: order.items
    .map(item => item.price * item.quantity * 1.1) // 各商品の税込合計
    .reduce((sum, amount) => sum + amount, 0),
})).map(order => ({
  ...order,
  label: order.totalAmount > 1000 ? '高額' : '普通'
}));

ステップ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 },
      { name: 'Eraser', quantity: 2, priceWithTax: 88 }
    ],
    totalAmount: 1666,
    label: '高額'
  },
  {
    orderId: 3,
    customerName: 'Taro Suzuki',
    items: [],
    totalAmount: 0,
    label: '普通'
  }
]

✅ ポイント解説

1. ネスト配列も map で整形できる
   • order.items.map(...) で商品ごとに加工
2. 合計金額の計算も map + reduce で完結
   • 商品数が0件でも reduce(...,0) なら安全に0が返る
3. ラベル付けも map で後から追加可能
   • 1回目の map で基礎データを作り、2回目の map でラベルを追加
4. 元データは変更されない
   • 安全に UI 用に整形できる

💡 こうすると：

• 商品の数が動的に増減しても対応可能
• ネストしたオブジェクトも map だけで整形可能
• UI 表示用のデータを簡潔に作れる