1. mapメソッドとは？配列の要素を変換する方法

mapメソッドは、配列の中の要素を一つずつ取り出し、何らかの処理をした結果を新しい配列として返します。元の配列は変わりません。

例えば、数字の配列を全部2倍にしたいときに使えます。


let numbers = [1, 2, 3, 4];
let doubled = numbers.map(function(num) {
  return num * 2;
});
console.log(doubled);  // [2, 4, 6, 8]


[2, 4, 6, 8]

このように、配列の各要素に「2倍する」という変換をして新しい配列を作っています。

2. mapの仕組み：関数で変換ルールを作る

mapに渡す関数は「この要素をどう変えたいか？」を決めるルールです。この関数は配列の要素を1つずつ受け取り、変換した結果を返します。

例えば、文字列を大文字に変換する例です。


let fruits = ["りんご", "バナナ", "みかん"];
let upperFruits = fruits.map(function(item) {
  return item.toUpperCase();
});
console.log(upperFruits);  // ["リンゴ", "バナナ", "ミカン"]

文字列のtoUpperCase()は英語の大文字に変換するメソッドなので、日本語には影響ありませんが、英語の単語なら有効です。

3. 短く書く方法：アロー関数でスマートに

JavaScriptのアロー関数を使うと、mapの書き方が簡単になります。


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

関数を短く書けるので、見やすくておすすめです。

4. mapメソッドの活用例いろいろ

他にもよく使う例を紹介します。

数値の配列を文字列に変換する
配列の文字列に「!」をつける
オブジェクトの配列から名前だけを取り出す


// 数値を文字列に変換
let numbers = [10, 20, 30];
let strings = numbers.map(num => String(num));
console.log(strings);  // ["10", "20", "30"]

// 文字列に「!」を追加
let words = ["こんにちは", "さようなら"];
let excited = words.map(word => word + "!");
console.log(excited);  // ["こんにちは!", "さようなら!"]

// オブジェクト配列から名前だけ抽出
let people = [
  {name: "太郎", age: 18},
  {name: "花子", age: 22},
  {name: "次郎", age: 20}
];
let names = people.map(person => person.name);
console.log(names);  // ["太郎", "花子", "次郎"]