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

JavaScript JavaScript
2020.08.01
スポンサーリンク

ここでは、JavaScript の map() メソッドを使った 実践的な例 を、プログラミング初心者でもわかるようにステップごとに解説します。

今回のテーマはこの2つ👇

  1. 数値を10倍にする（基本の変換例）
  2. オブジェクトの配列を変換する（実務でもよく使う例）

例1：数値を10倍にする（基本の map）

まずはシンプルな例で、map の動きを体で覚えましょう。

やりたいこと

配列 [1, 2, 3, 4, 5] のすべての数値を 10倍した新しい配列 を作る。

ステップ 1：元の配列を用意する

let numbers = [1, 2, 3, 4, 5];
JavaScript

ステップ 2：map() で「要素を10倍」に変換

let multiplied = numbers.map(num => num * 10);
JavaScript

ここで map() の中の関数は、配列の各要素 num を受け取り、num * 10 を計算して返します。

ステップ 3：結果を確認

console.log(multiplied); // [10, 20, 30, 40, 50]
console.log(numbers);    // [1, 2, 3, 4, 5]（元の配列はそのまま）
JavaScript

✅ ポイント解説

  • map() は「新しい配列」を返す。
  • forEach() と違って、return した値が新しい配列に入る。
  • 元の numbers 配列は変更されない（非破壊）。

イメージ図

numbers: [1] → 1*10=10 → 新配列[10]
          [2] → 2*10=20 → 新配列[10,20]
          [3] → 3*10=30 → 新配列[10,20,30]
          ...

「ベルトコンベアに乗って順番に加工していく」イメージです。

例2：オブジェクトの配列を変換する（実践的な例）

実際の開発では、配列の中に「データのまとまり（オブジェクト）」が入っていることが多いです。
例えば、API から「商品のリスト」や「ユーザー情報」が配列で返ってくるようなケースです。

やりたいこと

次のような商品リストがあります👇

let items = [
  { name: 'Pen', price: 100 },
  { name: 'Notebook', price: 250 },
  { name: 'Eraser', price: 80 }
];
JavaScript

これをもとに、「税込価格（10%アップ）を追加した新しい配列」を作りたい！

ステップ 1：map() を使って新しいオブジェクトを返す

let newItems = items.map(item => {
  return {
    name: item.name,
    price: item.price,
    priceWithTax: Math.round(item.price * 1.1)
  };
});
JavaScript

ステップ 2：結果を確認

console.log(newItems);
JavaScript

出力：

[
  { name: 'Pen', price: 100, priceWithTax: 110 },
  { name: 'Notebook', price: 250, priceWithTax: 275 },
  { name: 'Eraser', price: 80, priceWithTax: 88 }
]

✅ ポイント解説

  • map() の中では、オブジェクトを新しく作って返す。
  • {} で囲んでオブジェクトを返すときは、アロー関数の丸括弧 ( ) が必要なケースに注意！ 
// OK ✅
items.map(item => ({ name: item.name, priceWithTax: item.price * 1.1 }));

// NG ❌
items.map(item => { name: item.name, priceWithTax: item.price * 1.1 });
// → これは関数のブロックと解釈されて undefined になる！
JavaScript

ステップごとの動き

  1. { name:'Pen', price:100 } → { name:'Pen', price:100, priceWithTax:110 }
  2. { name:'Notebook', price:250 } → { name:'Notebook', price:250, priceWithTax:275 }
  3. { name:'Eraser', price:80 } → { name:'Eraser', price:80, priceWithTax:88 }

実務での応用例（イメージ）

例えば、APIから次のようなデータを受け取ったとします：

[
  {id:1, name:'T-shirt', price:2000},
  {id:2, name:'Pants', price:3500}
]
JavaScript

このデータを画面に出す前に整形する：

let displayData = data.map(d => ({
  id: d.id,
  title: d.name.toUpperCase(),
  taxPrice: d.price * 1.1
}));
JavaScript

こうすることで、「表示用のデータ」をまとめて加工できるわけです！

まとめ

覚えること内容
🎯 目的配列の要素を変換して新しい配列を作る
🧩 構文array.map(callback)
🧠 コールバックの返り値新しい配列に入る値
⚠️ 注意点return を忘れない！ {} で返すときは ( ) が必要！
💡 元の配列変更されない（非破壊）

チャレンジ課題（次のステップ）

let scores = [50, 80, 95, 60];

// 各スコアを A〜C のランクに変換する配列を map で作ってみよう！

たとえば：

  • 90以上 → "A"
  • 70〜89 → "B"
  • それ以外 → "C"

ここからは スコアをランクに変換する練習問題 を、map() を使ってステップごとに解説していきます。

問題

次の配列があります：

let scores = [50, 80, 95, 60];
JavaScript

これを ランク A〜C に変換して、新しい配列を作りたい：

  • 90以上 → "A"
  • 70〜89 → "B"
  • それ以外 → "C"

ステップ 1：map() の形を作る

まずは map() の基本形を作ります。

let ranks = scores.map(score => {
  // ここに処理を書く
});
JavaScript
  • score には順番に 50, 80, 95, 60 が入ります。
  • map() は返り値を新しい配列に順番に入れます。

ステップ 2：条件分岐でランクを決める

let ranks = scores.map(score => {
  if(score >= 90){
    return "A";
  } else if(score >= 70){
    return "B";
  } else {
    return "C";
  }
});
JavaScript

ステップごとの処理（各要素）

  1. 50 → 90以上？No → 70以上？No → "C" を返す
  2. 80 → 90以上？No → 70以上？Yes → "B" を返す
  3. 95 → 90以上？Yes → "A" を返す
  4. 60 → 90以上？No → 70以上？No → "C" を返す

ステップ 3：結果を確認

console.log(ranks); // ["C", "B", "A", "C"]
JavaScript
  • 元の scores 配列は変わっていません：
console.log(scores); // [50, 80, 95, 60]
JavaScript

ステップ 4：アロー関数で短く書く

条件演算子（?:）を使うと、1行で書けます。

let ranks = scores.map(score =>
  score >= 90 ? "A" :
  score >= 70 ? "B" : "C"
);

console.log(ranks); // ["C", "B", "A", "C"]
JavaScript

✅ ポイント解説

  • map() は 変換用の配列 を作るのに最適。
  • コールバック内で 条件分岐 を書けば、数値→文字列、文字→色、オブジェクト→別の形式 など、自由自在。
  • 元配列は変更されないので、安全に加工できる。

💡 練習アレンジ案

  • 点数に応じて "優" / "良" / "可" に変換してみる
  • 配列のオブジェクト（例：{name:"A", score:80}）から "A: B" 形式の文字列配列に変換してみる

では、先ほどのランク付けを オブジェクトの配列 で実践してみましょう。
これなら、実際のアプリで「ユーザーや商品の情報を変換する」イメージに近くなります。

例題：オブジェクトの配列をランク付けする

元データ（ユーザーのスコア）

let users = [
  { name: "Alice", score: 50 },
  { name: "Bob", score: 80 },
  { name: "Charlie", score: 95 },
  { name: "David", score: 60 }
];
JavaScript

目標：新しい配列にランクを追加して表示する
→ 結果はこうなる想定：

[
  { name: "Alice", score: 50, rank: "C" },
  { name: "Bob", score: 80, rank: "B" },
  { name: "Charlie", score: 95, rank: "A" },
  { name: "David", score: 60, rank: "C" }
]
JavaScript

ステップ 1：map() で新しい配列を作る

let rankedUsers = users.map(user => {
  // ランクを判定して新しいオブジェクトを返す
});
JavaScript

ステップ 2：条件分岐で rank を決める

let rankedUsers = users.map(user => {
  let rank;
  if(user.score >= 90){
    rank = "A";
  } else if(user.score >= 70){
    rank = "B";
  } else {
    rank = "C";
  }
  
  // 新しいオブジェクトを返す
  return {
    name: user.name,
    score: user.score,
    rank: rank
  };
});
JavaScript

ステップ 3：結果を確認

console.log(rankedUsers);
JavaScript

出力：

[
  { name: "Alice", score: 50, rank: "C" },
  { name: "Bob", score: 80, rank: "B" },
  { name: "Charlie", score: 95, rank: "A" },
  { name: "David", score: 60, rank: "C" }
]
  • 元の users 配列は変わっていません。

ステップ 4：アロー関数＋条件演算子で短く書く

let rankedUsers = users.map(user => ({
  name: user.name,
  score: user.score,
  rank: user.score >= 90 ? "A" :
        user.score >= 70 ? "B" : "C"
}));

console.log(rankedUsers);
JavaScript

✅ ポイント：

  • {} で囲むことで オブジェクトを返す。
  • 三項演算子 ?: を使うと短く書ける。
  • 元の配列を壊さず、新しい配列に加工した情報を追加できる。

ステップ 5：さらに応用

  • 表示用に "Alice: C" 形式の文字列配列に変換することも可能：
let display = rankedUsers.map(u => `${u.name}: ${u.rank}`);
console.log(display); // ["Alice: C", "Bob: B", "Charlie: A", "David: C"]
JavaScript

この方法を覚えれば、ユーザーリストや商品リストの加工、データ整形 など、実務でも map() がフル活用できます。

💡 次のステップの練習：

  • 条件を増やしてランクを S〜D にする
  • 点数に応じて色やステータスを追加する
次へ
12345
スポンサーリンク
タイトルとURLをコピーしました