【まっぷかんすう】

map関数 とは?

💡 全員に同じ「変身魔法」をかけて新しいリストを作る
📌 このページのポイント
map関数 ― 配列の各要素を変換 元の配列 1 2 3 x => x * 2 新しい配列 2 4 6 mapの特徴 ● 元の配列は変更しない(非破壊) ● 要素数は変わらない ● 各要素に同じ処理を適用 ● 新しい配列を返す 例: [1,2,3].map(x => x*2) 結果: [2, 4, 6]
map関数のイメージ
ひよこ ひよこ

map関数ってfor文と何が違うの?

ペンギン先生 ペンギン先生

たとえば数値の配列を2倍にしたいとき、for文だと「空の配列を用意→ループで計算→pushで追加」と手順を書くけど、mapなら「numbers.map(n => n * 2)」の1行で終わる。「何をしたいか」だけ書けばいいので、コードの意図がはっきりするんだ。

ひよこ ひよこ

どんな場面でよく使うの?

ペンギン先生 ペンギン先生

Reactでリストを表示するときが代表例だよ。ユーザーの配列から名前の一覧を作るとか、商品データから商品カードのコンポーネントを作るとか。APIから受け取ったデータを画面表示用のフォーマットに変換するときにもよく使われるね。

ひよこ ひよこ

map関数で注意することってある?

ペンギン先生 ペンギン先生

mapは「変換」が目的だから、必ず新しい配列を返すんだ。戻り値を使わないなら、mapではなくforEachを使うべきだよ。あとmapの中で非同期処理を使うとPromise配列が返ってきて困ることがあるから、その場合はPromise.allで包む必要がある。これはよくある落とし穴だね。

ひよこ ひよこ

mapとforEachって何が違うの?

ペンギン先生 ペンギン先生

mapは新しい配列を返す、forEachは何も返さない(undefined)。mapは「変換して新しいデータを作る」目的、forEachは「副作用のある処理を実行する」目的。console.logで出力するだけならforEach、データ変換ならmapを使い分けるのが正しいスタイルだよ。

ひよこ ひよこ

flatMapって何?

ペンギン先生 ペンギン先生

mapした結果を1段階フラットにする関数。例えば[[1,2],[3,4]].flatMap(x => x) は [1,2,3,4] になる。実用的な例では、ユーザーごとの注文リストを1つのフラットな注文リストにまとめるときなどに使う。map + flat を1ステップでやってくれるから、ネストした配列の処理がスッキリ書けるんだ。RxJSやJavaのStreamでも頻出の関数だよ。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「map関数」って出てきたら「配列の全要素に同じ処理をかけて新しい配列を作る関数だな」と思えればだいたいOK!
📖 おまけ:英語の意味
「map」 = 対応づける・写像する
💬 数学の「写像」が由来。各要素を別の値に対応づける操作だよ
← 用語集にもどる