Zenn
🌵

[JS]mapメソッドの使い方と具体例

に公開
JavaScript
初心者向け
tech

mapメソッドは配列の各要素に対して特定の操作を行い、その結果を新しい配列として取得する場合に役立ちます。この記事では、mapメソッドの基本的な使い方と具体的な例を紹介します。

mapメソッドの基本

mapメソッドは、配列の各要素に対して指定した関数を適用し、その結果を新しい配列として返します。元の配列は変更されず、同じ長さの新しい配列が返されます。

基本構文

const newArray = array.map(callback(currentValue, index, array), thisArg);
  • array: mapを呼び出す元の配列。
  • callback: 各要素に対して実行される関数。この関数は以下の引数を取ります。
    • currentValue: 配列の現在の要素。
    • index: 配列の現在の要素のインデックス。
    • array: mapが呼び出された元の配列。
  • thisArg（オプション）: callback関数内でthisとして使われる値。

例: 数値の配列を2倍にする

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

mapメソッドの実践的な使い方

1. 数値配列の操作

例えば、商品の価格リストに消費税（10%）を加算する場合、mapを使って全ての商品の新しい価格を計算できます。

const prices = [100, 200, 300, 400, 500];
const pricesWithTax = prices.map(price => price * 1.1);
console.log(pricesWithTax); // [110, 220, 330, 440, 550]

2. 文字列配列の変換

複数の名前が含まれる配列をすべて大文字に変換する場合もmapが便利です。

const names = ['alice', 'bob', 'charlie'];
const uppercasedNames = names.map(name => name.toUpperCase());
console.log(uppercasedNames); // ['ALICE', 'BOB', 'CHARLIE']

3. オブジェクト配列のプロパティ抽出

オブジェクトの配列から特定のプロパティ（例えばユーザー名）だけを抽出することもできます。

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 }
];
const userNames = users.map(user => user.name);
console.log(userNames); // ['Alice', 'Bob', 'Charlie']

4. ネストしたデータ構造の処理

学生が取得した科目の成績を含むオブジェクトの配列から、各学生の合計スコアを計算する場合もmapを活用できます。

const students = [
  { name: 'Alice', scores: [90, 85, 100] },
  { name: 'Bob', scores: [75, 80, 95] },
  { name: 'Charlie', scores: [88, 90, 92] }
];
const totalScores = students.map(student => {
  return {
    name: student.name,
    totalScore: student.scores.reduce((total, score) => total + score, 0)
  };
});
console.log(totalScores);
/*
[
  { name: 'Alice', totalScore: 275 },
  { name: 'Bob', totalScore: 250 },
  { name: 'Charlie', totalScore: 270 }
]
*/

5. 条件に基づく値の変換

条件に基づいて値を変換する場合にもmapは有用です。例えば、60点以上のスコアを"P"、60点未満を"F"に変換する例です。

const scores = [45, 67, 89, 32, 76];
const result = scores.map(score => score >= 60 ? 'P' : 'F');
console.log(result); // ['F', 'P', 'P', 'F', 'P']

mapメソッドの注意点

  • mapは常に同じ長さの新しい配列を返します。
  • 元の配列を変更するわけではなく、新しい配列を生成します。
  • callback関数が返した値が新しい配列の要素となります。

まとめ

JavaScriptのmapメソッドは、配列の各要素に対して特定の操作を行い、その結果を新しい配列として取得するための便利な方法です。このメソッドを使うことで、コードがより簡潔かつ可読性が高くなります。具体的な使用シナリオとして、数値の変換、文字列操作、オブジェクトのプロパティ抽出、ネストしたデータの処理、条件に基づく変換など、様々なケースで活用できます。ぜひ、あなたのプロジェクトでもmapメソッドを活用してみてください。

Discussion