ここでは さらに実践的な map の使い方 を、初心者でもわかるように コード付きでステップごとに解説 します。
テーマは次の2つです：
- APIから取ってきたデータを UI 用に整形する
- 条件によって別の値に変換する（条件分岐付き）
例1：APIデータをUI用に整形する
前提
例えば API からこんなユーザーデータが返ってきたとします：
let apiUsers = [
{ id: 1, first_name: 'Sora', last_name: 'Yamada', age: 23 },
{ id: 2, first_name: 'Mina', last_name: 'Kato', age: 31 },
{ id: 3, first_name: 'Taro', last_name: 'Suzuki', age: 19 }
];
UI に表示する時は、フルネームと年齢だけを表示したい、というケースです。
ステップ1：mapで整形
let displayUsers = apiUsers.map(user => ({
id: user.id,
fullName: `${user.first_name} ${user.last_name}`,
age: user.age
}));
ステップ2：結果を確認
console.log(displayUsers);
出力：
[
{ id: 1, fullName: 'Sora Yamada', age: 23 },
{ id: 2, fullName: 'Mina Kato', age: 31 },
{ id: 3, fullName: 'Taro Suzuki', age: 19 }
]
✅ ポイント
- APIの返却形式はそのままでは使いにくい場合がある →
mapで UI用に加工。 - 元の配列は変更されない。
- フルネームを作るのも、テンプレートリテラルで簡単に実現。
例2：条件によって別の値に変換する（条件分岐付き）
前提
次の配列はテストの点数です：
let scores = [95, 72, 60, 88, 45];
条件付きで A/B/C などのランク に変換したい場合。
- 90以上 →
"A" - 70〜89 →
"B" - 50〜69 →
"C" - それ以下 →
"D"
ステップ1：map + 条件分岐
let ranks = scores.map(score => {
if(score >= 90) return 'A';
else if(score >= 70) return 'B';
else if(score >= 50) return 'C';
else return 'D';
});
ステップ2：結果を確認
console.log(ranks); // ["A", "B", "C", "B", "D"]
✅ ポイント
map内で 条件分岐も自由に使える- 数値だけでなく文字列やオブジェクトなど、任意の形に変換可能
- UI用のラベルやステータス表示などにも便利
例3：APIデータ + 条件付き変換の組み合わせ（実務想定）
例えば商品データ：
let products = [
{ id: 1, name: 'Pen', price: 100 },
{ id: 2, name: 'Notebook', price: 250 },
{ id: 3, name: 'Bag', price: 1200 }
];
- 税込価格を計算して、
- 1000円以上なら
"高額", それ以外は"普通"のラベルを付けたい。
mapで整形 + 条件分岐
let displayProducts = products.map(p => ({
name: p.name,
priceWithTax: Math.round(p.price * 1.1),
category: p.price >= 1000 ? '高額' : '普通'
}));
結果確認
console.log(displayProducts);
出力：
[
{ name: 'Pen', priceWithTax: 110, category: '普通' },
{ name: 'Notebook', priceWithTax: 275, category: '普通' },
{ name: 'Bag', priceWithTax: 1320, category: '高額' }
]
✅ ポイントまとめ
mapは 配列の変換の強力なツール- 単純な変換だけでなく、条件分岐や計算も自由に組み込める
- APIデータをUI表示用に整形するときに特に便利
- 元データは変わらず、新しい配列だけを作る → 安全に処理できる
💡 実務の例としては：
- 「ユーザーの名前をフルネーム表示用に変換」
- 「数値を評価ラベルに変換」
- 「商品の価格に税計算＋ランク付け」
など ほぼすべての配列データ加工に応用可能 です。