主な内容の要点
map メソッドのポイント
- 役割
配列のすべての要素に「同じ処理」を順番に行い、その結果を集めた 新しい配列 を作る。 - 元の配列は変わらない
mapは新しい配列を返すだけで、元の配列はそのまま残る。 - 書き方
配列.map(function(要素の値, インデックス, 配列自体) {
return 新しい値;
});
要素の値 … 今処理している要素インデックス … その要素の位置（0から始まる番号）配列自体 … 元の配列全体
- よくある使い方
- 数値を変換する（例：全部を10倍にする）
- 文字列を加工する（例：全部を大文字にする）
サンプルコード
let fruits = ['Apple', 'Grapes', 'Melon', 'Orange'];
// すべて大文字に変換
let newFruits = fruits.map(function(element) {
return element.toUpperCase();
});
console.log(newFruits); // ["APPLE", "GRAPES", "MELON", "ORANGE"]
console.log(fruits); // ["Apple", "Grapes", "Melon", "Orange"]
👉 newFruits は大文字に変換された新しい配列。
👉 fruits は元のまま。
さらに簡単に書く（アロー関数）
最近の JavaScript の書き方として、コールバック関数を アロー関数 にして書くこともできます。
let newFruits = fruits.map(element => element.toUpperCase());
これだと、関数の中が「１行だけ」で済むような処理（例えば要素を変換するだけ、など）の時に特に見やすくなります。
初心者向けのポイント・注意点
mapは 必ず新しい配列 を返します。元の配列には手を加えません。- もし「配列の各要素を 順番に処理するだけ（値を返さない／変換しない）」という目的なら、
mapよりもforEachを使うほうが向いている場合があります（この記事ではmapにフォーカスしています）。 - コールバック関数の中で「何を返すか(return)」が重要です。返さないと新しい配列のその位置には
undefinedが入ることがあります。 - 処理の中で “どの要素が何番目か（インデックス）” を使いたい場合は、コールバック関数の第２引数を使うこともできます。
- アロー関数を使うと記述が短く、見た目もすっきりするのでおすすめです。ただしアロー関数の「this」の挙動など少し違いがあるので、基本の関数書き方も知っておくと安心です。
まとめ
mapは「配列を変換して新しい配列を作る」ための便利なメソッド- 元の配列は壊さないので安心
- 数字の計算や文字列の加工など、繰り返し処理をシンプルに書ける
初心者の方には「for文の代わりに使える便利な道具」と覚えると分かりやすいです。