JavaScriptのmapメソッドを使っているのに、結果の配列がすべてundefinedになってしまうのはなぜですか？

コールバック関数の中で値を明示的に return していないことが原因です。mapメソッドは各要素の処理結果を新しい配列に格納するため、値を返さないと全ての要素が undefined になってしまいます。

アロー関数でmapを書くとき、returnを省略できる場合とできない場合の違いを教えてください。

アロー関数の後に波括弧 { } を使う場合は明示的な return が必要ですが、波括弧を省いて1行で書く場合は return も省略可能です。意図せず波括弧を付けてしまい、中の return を忘れるミスが多いので注意しましょう。

mapの処理内でreturnを書き忘れていないか、効率的にチェックする方法はありますか？

実行結果が [undefined, undefined, ...] のようになっている場合は、まず return 漏れを疑いましょう。また、値を返さない処理（副作用）が目的であれば、mapではなく forEach メソッドを使う方が適切です。

mapのreturn忘れ｜コードで実践

このレッスンで分かること

この記事では「mapのreturn忘れ」をデバッグ基礎の現場で使える形で整理します

map の return 忘れ をおさえれば、現場で迷ったときに立ち戻れる

問題のパターン をおさえれば、現場で迷ったときに立ち戻れる

エラーにはならないが結果が間違う をおさえれば、現場で迷ったときに立ち戻れる

mapのreturn忘れとは

配列の map メソッドで return を忘れると undefined の配列になります。本レッスンでは、mapのreturn忘れの基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

map の return 忘れ

array.map() は各要素を変換した新しい配列を返します。 コールバック関数 で return を忘れると、すべて undefined になります。

{ } で囲んだコールバックは 明示的な return が必須。式だけ書いても捨てられます。n => n * 2 のように { } を書かない形なら式の値が自動で返るので、短い変換ならこちらが安全です。

問題のパターン

JavaScript

// NG: return がない
const doubled = numbers.map(n => {
  n * 2;  // これは return されない！
});
// 結果: [undefined, undefined, ...]

// OK: return あり
const doubled = numbers.map(n => {
  return n * 2;
});

// OK: アロー関数の省略形
const doubled = numbers.map(n => n * 2);

diagram (will load when visible)

エラーにはならないが結果が間違う

これは「論理エラー」の一種で、実行時エラーにはなりません。デバッグが難しいので、console.log で途中結果を確認しましょう。

例外が出ないバグは「気付くまでが長い」のが厄介。map の戻り値を console.log して、要素が undefined だらけになっていないか早めにチェックする習慣をつけると、コードレビュー 前に発見できます。

diagram (will load when visible)

現場でよくある具体例

現場ケース 1 — 「本番だけ落ちる」謎エラーが、環境変数の NODE_ENV 違いで設定ファイルを切り替えていなかったことが原因。二分探索でコミットを絞り 30 分で解決
現場ケース 2 — フロントの無限ローディングは、useEffect 依存配列に毎レンダー新しい関数を渡していた。React DevTools のレンダー回数で気づけた
現場ケース 3 — DB の遅いクエリは EXPLAIN でフルスキャン発覚。複合インデックス追加で 300 倍速く。「測ってから直す」の典型例

次にとるべきアクション

直近 1 週間で詰まったエラーを 1 つ思い出す — そのエラーに「mapのreturn忘れ」で学んだアプローチを適用してみる
デバッグメモのテンプレを自分用に作る — 現象・再現手順・仮説・検証結果の 4 項目を markdown で固定化する
console.log だけで解いていた問題に DevTools のブレークポイントを使う — ステップ実行を 1 回でも体験する

次のレッスン

次は await 忘れ で、配列の map メソッドで return を忘れると undefined の配列になりますを学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

mapのreturn忘れの要点を自分の言葉で説明できる
このレッスンの最小コード (または操作手順) を見ずに書ける
練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. mapのreturn忘れとは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

参考にした出典

MDN Web Docs「Debugging JavaScript」 — ブラウザ DevTools を使ったデバッグ手順（出典: Mozilla, https://developer.mozilla.org/ja/docs/Tools/Debugger）
Google Chrome DevTools 公式ドキュメント — ブレークポイント・パフォーマンスタブ等の正式仕様（出典: Google, https://developer.chrome.com/docs/devtools/）
IEEE Software「Why Programs Fail」 — 不具合発見と修正プロセスに関する古典研究（出典: Andreas Zeller, Morgan Kaufmann, 2009, https://ieeexplore.ieee.org/）

学習を加速したい方へ

デバッグの基礎ガイドを体系的にマスターするなら、chotdekiru の無料学習ポータルで実際に手を動かして学習を始めるのがおすすめです。質問・つまずきも現役エンジニアが伴走します。

mapのreturn忘れ