モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | モダンJavaScript基礎 － DAY 6：map

React 60日で身につけるReact
2026.08.21
スポンサーリンク
スポンサーリンク

Day 6：mapで「配列を変換する力」を身につける

Day 6では、Reactではほぼ必須と言っていい map() を扱います。 map() を理解すると、「配列 → 別の形の配列」に変換する感覚がつかめて、Reactでリスト表示をするコードが一気に読みやすくなるはずです。

map()とは：配列の「各要素に処理をして、新しい配列を作る」メソッド

ざっくりイメージ

map() は、配列に対して使うメソッドで、

「配列の各要素に同じ処理をして、その結果から 新しい配列 を作る」

ためのものです。

const numbers = [1, 2, 3];

// 各要素を2倍にした新しい配列を作ります
const doubled = numbers.map((n) => {
  return n * 2;
});

console.log(doubled);  // [2, 4, 6]
console.log(numbers);  // [1, 2, 3]（元の配列はそのまま）
JavaScript
  • 元の配列：[1, 2, 3]
  • map() の結果：[2, 4, 6]（新しい配列）

「元の配列を壊さずに、変換した結果だけを新しい配列として受け取る」というのが、map() の大事なポイントです。

基本構文：map()＋コールバック関数

map()の呼び出し方

map() は、次のような形で使います。

const newArray = 元の配列.map((要素, インデックス, 配列そのもの) => {
  // 要素ごとにやりたい処理を書く
  // 最後に「その要素に対応する新しい値」を return する
});
JavaScript

初心者向けに、まずは「要素だけ」を受け取る形から始めるのがおすすめです。

const numbers = [1, 2, 3];

// 各要素を2倍にする
const doubled = numbers.map((n) => {
  // n は配列の各要素（1 → 2 → 3 と順番に入ってきます）
  return n * 2;
});

console.log(doubled); // [2, 4, 6]
JavaScript
  • map() に渡している (n) => { ... } が「コールバック関数」
  • n には、配列の各要素が順番に渡される
  • return した値が「新しい配列の要素」になる

配列を変換する：文字列配列を別の形にしてみる

例1：商品名に「さん」を付ける

const names = ["太郎", "花子", "健"];

// 各名前に「さん」を付けた新しい配列を作ります
const politeNames = names.map((name) => {
  return name + "さん";
});

console.log(politeNames); // ["太郎さん", "花子さん", "健さん"]
console.log(names);       // ["太郎", "花子", "健"]（元の配列はそのまま）
JavaScript

ここでやっていることは、

  • 元の配列：["太郎", "花子", "健"]
  • 各要素に "さん" を足す処理を map() で適用
  • 結果：["太郎さん", "花子さん", "健さん"] という新しい配列

「配列の各要素に対して、同じ変換をする」という場面で、map() はとても自然に使えます。

例2：税込価格に変換する

const prices = [1000, 2500, 3000];
const taxRate = 0.1;

// 各価格を税込価格に変換した新しい配列を作ります
const pricesWithTax = prices.map((price) => {
  const tax = price * taxRate;
  const total = price + tax;
  return total;
});

console.log(pricesWithTax); // [1100, 2750, 3300]
console.log(prices);        // [1000, 2500, 3000]
JavaScript
  • 元の配列：税抜価格の一覧
  • map() の中で「税込価格に変換する処理」を書く
  • 結果：税込価格の一覧という新しい配列

Reactで「APIから取ってきたデータを、表示用の形に変換する」といった場面でも、map() がよく使われます。

新しい配列を返す：元の配列は変更しない

「破壊的ではない」ことが重要

map() は、元の配列を変更せずに、新しい配列を返すメソッドです。

const numbers = [1, 2, 3];

const doubled = numbers.map((n) => n * 2);

console.log(doubled);  // [2, 4, 6]
console.log(numbers);  // [1, 2, 3]（変わっていない）
JavaScript

この「元の配列を壊さない」という性質は、Reactのstate管理と非常に相性が良いです。

  • Reactのstateは「直接書き換えない」のが基本ルール
  • map() は新しい配列を返してくれるので、そのまま setState に渡せる

たとえば、Reactで「商品一覧を表示用のコンポーネント配列に変換する」ときも、map() が自然に使えます。

Arrow Functionとの組み合わせ：mapの定番スタイル

1行Arrow Functionでスッキリ書く

Day 4で学んだ Arrow Function と map() は、とても相性が良いです。 「1行で書ける処理」の場合、次のようにスッキリ書けます。

const numbers = [1, 2, 3];

// 1行Arrow Functionで2倍にする
const doubled = numbers.map((n) => n * 2);

console.log(doubled); // [2, 4, 6]
JavaScript

もう少し例を増やしてみます。

const names = ["太郎", "花子", "健"];

// 「さん」を付ける
const politeNames = names.map((name) => name + "さん");

console.log(politeNames); // ["太郎さん", "花子さん", "健さん"]
JavaScript
  • (n) => n * 2 のように、「式を返すだけ」のArrow Function
  • map() の中でよく使われるパターン

Reactのコードでは、ほぼこの形で map() が登場すると言ってもいいくらいです。

複数行の処理もArrow Functionで書ける

処理が1行で収まらない場合は、波括弧 {} と return を使います。

const prices = [1000, 2500, 3000];
const taxRate = 0.1;

const pricesWithTax = prices.map((price) => {
  const tax = price * taxRate;
  const total = price + tax;
  return total; // 複数行なので return が必要
});

console.log(pricesWithTax); // [1100, 2750, 3300]
JavaScript
  • 1行：(x) => x * 2（暗黙のreturn）
  • 複数行：(x) => { ...; return ...; }（明示的なreturn）

この切り替えに慣れておくと、map() の中身を柔軟に書けるようになります。

オブジェクト配列：商品一覧をmapで変換する

オブジェクト配列とは

Day 5では「商品名だけの配列」を扱いましたが、実際のアプリでは「名前＋価格＋在庫」など、オブジェクトの配列を扱うことが多いです。

// 商品一覧（オブジェクト配列）
const products = [
  { name: "Tシャツ", price: 1000 },
  { name: "パーカー", price: 2500 },
  { name: "キャップ", price: 1500 },
];
JavaScript
  • 各要素が「1つの商品」を表すオブジェクト
  • name や price などのプロパティを持っている

例1：税込価格を追加した新しい配列を作る

const taxRate = 0.1;

const productsWithTax = products.map((product) => {
  // 1つの商品オブジェクトが product に入ってきます
  const tax = product.price * taxRate;
  const total = product.price + tax;

  // 新しいオブジェクトを返します（元のproductはそのまま）
  return {
    name: product.name,
    price: product.price,
    priceWithTax: total,
  };
});

console.log(productsWithTax);
/*
[
  { name: "Tシャツ", price: 1000, priceWithTax: 1100 },
  { name: "パーカー", price: 2500, priceWithTax: 2750 },
  { name: "キャップ", price: 1500, priceWithTax: 1650 },
]
*/
console.log(products); // 元の配列はそのまま
JavaScript

ここでやっていることは、

  • 元の配列：name と price だけを持つ商品一覧
  • map() の中で「税込価格を計算して priceWithTax として追加」
  • 結果：name / price / priceWithTax を持つ新しい商品一覧

Reactでは、このような「表示用のデータ構造」に変換してからコンポーネントに渡す、というパターンがよく使われます。

例2：名前だけの配列に変換する

// 商品名だけの配列を作る
const productNames = products.map((product) => product.name);

console.log(productNames); // ["Tシャツ", "パーカー", "キャップ"]
JavaScript
  • オブジェクト配列 → 文字列配列
  • 「一覧表示のタイトルだけ欲しい」といった場面で便利

ミニテンプレート：mapの基本パターンをまとめて試す

最後に、Day 6の内容をまとめて試せるテンプレートコードを用意しました。

// --- Day 6 mapミニテンプレート ---

// 1. 数値配列を2倍にする
const numbers = [1, 2, 3];

const doubled = numbers.map((n) => n * 2);

console.log("元のnumbers:", numbers);   // [1, 2, 3]
console.log("2倍にした配列:", doubled); // [2, 4, 6]

// 2. 名前配列に「さん」を付ける
const names = ["太郎", "花子", "健"];

const politeNames = names.map((name) => name + "さん");

console.log("元のnames:", names);          // ["太郎", "花子", "健"]
console.log("敬称付きnames:", politeNames); // ["太郎さん", "花子さん", "健さん"]

// 3. 商品オブジェクト配列に税込価格を追加する
const products = [
  { name: "Tシャツ", price: 1000 },
  { name: "パーカー", price: 2500 },
  { name: "キャップ", price: 1500 },
];

const taxRate = 0.1;

const productsWithTax = products.map((product) => {
  const tax = product.price * taxRate;
  const total = product.price + tax;

  return {
    name: product.name,
    price: product.price,
    priceWithTax: total,
  };
});

console.log("元のproducts:", products);
console.log("税込価格付きproducts:", productsWithTax);

// 4. 商品名だけの配列を作る
const productNames = products.map((product) => product.name);

console.log("商品名一覧:", productNames); // ["Tシャツ", "パーカー", "キャップ"]
JavaScript

このテンプレートを少しずつ書き換えながら、

  • 自分の好きなデータ（映画、ゲーム、本など）で配列を作る
  • map() の中身を変えて、どんな新しい配列ができるか試す
  • オブジェクト配列に別のプロパティ（タグ、在庫数など）を追加してみる

といった練習をしていくと、map() の感覚が自然と身についていきます。

Day 6のまとめ

  • map()とは 配列の各要素に同じ処理をして、その結果から「新しい配列」を作るメソッドです。
  • 配列を変換する 数値配列を2倍にしたり、名前配列に「さん」を付けたり、表示用の形に変換したりできます。
  • 新しい配列 map() は元の配列を変更せず、新しい配列を返します。Reactのstate更新と相性が良いです。
  • Arrow Functionとの組み合わせ (x) => x * 2 のような1行Arrow Functionが、map()の定番スタイルです。
  • オブジェクト配列 商品一覧のようなオブジェクト配列に対して、map()でプロパティを追加したり、別の形に変換したりできます。

Day 6：mapで「商品の税込価格」をつくるミニ課題に挑戦する

Day 6のミニ課題は、「商品の価格に消費税を追加する」です。 ここでは、map() と Arrow Function、そしてオブジェクト配列を組み合わせて、 「税抜価格の一覧 → 税込価格付きの一覧」に変換する流れを、ステップバイステップで見ていきます。

オブジェクト配列で商品一覧をつくる

まずは、商品一覧を オブジェクト配列 で表現します。 1つ1つの商品をオブジェクトとして扱い、その配列を「商品一覧」として持つイメージです。

// 商品一覧（オブジェクト配列）
// それぞれのオブジェクトが「1つの商品」を表します
const products = [
  { name: "Tシャツ", price: 1000 },  // price は税抜価格
  { name: "パーカー", price: 2500 },
  { name: "キャップ", price: 1500 },
];

console.log("元の商品一覧:", products);
JavaScript
  • name：商品名
  • price：税抜価格
  • products：商品オブジェクトを並べた配列

Reactでは、この products を map() して <li> や <Card> コンポーネントに変換していく、という流れがよく使われます。

map()で「配列を変換する」イメージをつかむ

次に、map() の基本的なイメージを、商品一覧に当てはめて考えてみます。

「商品一覧（配列）の 各商品 に対して、 税込価格を計算して 新しい商品オブジェクト を作り、 それらを並べた 新しい配列 を返す」

というのが、今回のミニ課題のゴールです。

map() の基本形は次のようになります。

const 新しい配列 = 元の配列.map((要素) => {
  // 要素ごとにやりたい処理を書く
  // 最後に「その要素に対応する新しい値」を return する
});
JavaScript

今回の「要素」は「1つの商品オブジェクト」です。

消費税の計算ロジックを決める

消費税の計算は、シンプルに「税率 × 価格」で考えます。 ここでは、税率を 10%（0.1）とします。

// 消費税率（10%）
const taxRate = 0.1;
JavaScript

税込価格は、

税抜価格 + （税抜価格 × 税率）

で求められます。

// 例：税抜価格が1000円の場合
const price = 1000;
const tax = price * taxRate;   // 1000 * 0.1 = 100
const total = price + tax;     // 1000 + 100 = 1100（税込価格）
JavaScript

このロジックを、map() の中で各商品に対して適用していきます。

map()＋Arrow Functionで「税込価格付きの商品一覧」を作る

ここからが本番です。 products 配列に対して map() を使い、各商品に税込価格を追加した 新しい配列 を作ります。

const products = [
  { name: "Tシャツ", price: 1000 },
  { name: "パーカー", price: 2500 },
  { name: "キャップ", price: 1500 },
];

const taxRate = 0.1;

// --- 税込価格付きの商品一覧を作る ---
// map() に Arrow Function を渡します
const productsWithTax = products.map((product) => {
  // product は「1つの商品オブジェクト」です
  // 例：{ name: "Tシャツ", price: 1000 }

  // 税額を計算します
  const tax = product.price * taxRate;

  // 税込価格を計算します
  const total = product.price + tax;

  // 新しい商品オブジェクトを返します
  // 元の product を壊さずに、「税込価格付きバージョン」を作るイメージです
  return {
    name: product.name,       // 元の名前をそのまま使う
    price: product.price,     // 元の税抜価格も残しておく
    priceWithTax: total,      // 新しく税込価格を追加する
  };
});

// 結果を確認します
console.log("元の商品一覧:", products);
console.log("税込価格付きの商品一覧:", productsWithTax);
JavaScript

ここでのポイントを整理すると：

  • products.map((product) => { ... })
    • product には、配列の各要素（商品オブジェクト）が順番に渡されます
  • tax と total を計算して、priceWithTax として新しいオブジェクトに追加
  • return { ... } で「新しい商品オブジェクト」を返す
  • map() の結果として、「税込価格付きの商品一覧」という 新しい配列 が得られる
  • 元の products は変更されない（ここがとても重要）

1行Arrow Functionで少しだけスッキリさせる（応用）

慣れてきたら、Arrow Functionを少しコンパクトに書くこともできます。 ただし、初心者のうちは「分かりやすさ優先」でOKです。

const productsWithTax = products.map((product) => {
  const tax = product.price * taxRate;
  const total = product.price + tax;

  return {
    name: product.name,
    price: product.price,
    priceWithTax: total,
  };
});
JavaScript

これを、少しだけ短くするとこうなります。

const productsWithTax = products.map((product) => {
  const total = product.price + product.price * taxRate;

  return {
    name: product.name,
    price: product.price,
    priceWithTax: total,
  };
});
JavaScript

さらに、計算式を直接オブジェクトの中に書くこともできます。

const productsWithTax = products.map((product) => {
  return {
    name: product.name,
    price: product.price,
    priceWithTax: product.price + product.price * taxRate,
  };
});
JavaScript

ただし、ここまで短くすると「何をしているか」が一瞬分かりにくくなることもあるので、 最初のうちは 「税額」「税込価格」を変数に分けて書くスタイル をおすすめします。

map()が「新しい配列」を返すことの意味

もう一度、map() の大事な性質を確認しておきます。

console.log("元の商品一覧:", products);
console.log("税込価格付きの商品一覧:", productsWithTax);
JavaScript
  • products：元の配列（税抜価格だけを持つ商品一覧）
  • productsWithTax：新しい配列（税抜＋税込価格を持つ商品一覧）

map() は 元の配列を変更せずに、新しい配列を返す メソッドです。 この性質は、Reactのstate管理と非常に相性が良く、

  • 「元のデータはそのまま残しておきたい」
  • 「表示用に少し加工したデータを別で持ちたい」

といった場面で、安心して使うことができます。

ミニ課題テンプレート：消費税付き商品一覧をつくる一連のコード

最後に、今回のミニ課題をそのまま試せるテンプレートコードをまとめて載せておきます。

// --- Day 6 ミニ課題：商品の価格に消費税を追加する ---

// 1. 商品一覧（税抜価格）をオブジェクト配列で作る
const products = [
  { name: "Tシャツ", price: 1000 },
  { name: "パーカー", price: 2500 },
  { name: "キャップ", price: 1500 },
];

console.log("元の商品一覧:", products);

// 2. 消費税率を決める（ここでは10%）
const taxRate = 0.1;

// 3. map()＋Arrow Functionで「税込価格付きの商品一覧」を作る
const productsWithTax = products.map((product) => {
  // 税額を計算
  const tax = product.price * taxRate;

  // 税込価格を計算
  const total = product.price + tax;

  // 新しい商品オブジェクトを返す
  return {
    name: product.name,       // 商品名
    price: product.price,     // 税抜価格
    priceWithTax: total,      // 税込価格
  };
});

// 4. 結果を確認する
console.log("税込価格付きの商品一覧:", productsWithTax);

/*
期待される出力イメージ：

元の商品一覧: [
  { name: "Tシャツ", price: 1000 },
  { name: "パーカー", price: 2500 },
  { name: "キャップ", price: 1500 },
]

税込価格付きの商品一覧: [
  { name: "Tシャツ", price: 1000, priceWithTax: 1100 },
  { name: "パーカー", price: 2500, priceWithTax: 2750 },
  { name: "キャップ", price: 1500, priceWithTax: 1650 },
]
*/
JavaScript

このテンプレートをベースにして、

  • 税率を変えてみる（8%や5%など）
  • 商品を増やしてみる（スニーカー、バッグなど）
  • priceWithTax を四捨五入したり、文字列に整形したりしてみる

といった小さなアレンジを加えていくと、map() とオブジェクト配列の感覚がぐっと深まっていきます。

Day 6ミニ課題のまとめ

  • map()で配列を変換する 商品一覧（オブジェクト配列）に対して、map() を使って「税込価格付きの商品一覧」という新しい配列を作りました。
  • 新しい配列を返す map() は元の配列を変更せず、新しい配列を返します。元のデータを壊さないまま、表示用のデータを作れるのが強みです。
  • Arrow Functionとの組み合わせ (product) => { ... } のようなArrow Functionを map() に渡すことで、各商品に対して同じ処理を簡潔に書けます。
  • オブジェクト配列の変換 商品オブジェクトに priceWithTax を追加することで、「元の情報＋計算結果」を持つ新しいオブジェクト配列を作ることができました。

この「商品の価格に消費税を追加する」というミニ課題は、Reactで「APIから取ってきたデータを表示用に加工する」といった場面にそのままつながる考え方です。

次へ
12
スポンサーリンク
タイトルとURLをコピーしました