JS Array メソッド プレイグラウンド

for文は書けるのに map/filter が分からない？

for文でループを書くのは理解できたのに、map や filter になると急に分からなくなる人は多い。 原因は「コールバック関数」という概念。「関数の中に関数を渡す」のが直感的じゃないから。

このプレイグラウンドでは、配列の各要素がコールバックに渡されて処理される様子をアニメーションで見せる。 「1番目の要素が関数に入って、結果が出て、次の要素が入って…」という流れが目で追えるから、抽象的な概念が具体的になる。

どのメソッドをいつ使う？

• map — 全要素を変換したいとき。「価格一覧を税込みに変換」「名前一覧を大文字に変換」など。
• filter — 条件に合う要素だけ抽出。「20歳以上だけ」「在庫ありだけ」など。
• reduce — 全要素を1つの値にまとめる。「合計」「最大値」「オブジェクトへの変換」など。
• find — 条件に合う最初の1つを取得。「IDが一致するユーザーを探す」など。
• some / every — 「1つでも条件を満たすか」「全部満たすか」の判定。バリデーションに便利。
• forEach — 副作用（DOM操作、ログ出力）を実行。戻り値は使わない。

実際のコードでどう使われる？

• APIデータの加工 — fetch で取得した JSON 配列から、必要なプロパティだけ map で抽出して画面に表示する。
• 検索・フィルター機能 — ユーザーが入力したキーワードで filter して、マッチする商品だけ表示する。ECサイトの基本。
• カート合計金額 — 商品配列を reduce で合計。items.reduce((sum, item) => sum + item.price, 0) の1行で書ける。

よくある質問

Q. map と forEach の違いは？

map は新しい配列を返す。forEach は何も返さない（undefined）。「変換結果が欲しい」なら map、「処理を実行するだけ」なら forEach。

Q. reduce が難しすぎるんだけど…

reduce は「アキュムレータ（累積値）」の概念が独特。まずは「合計を求める」だけの簡単な例から始めよう。このツールのアニメーションで累積値が変わっていく様子を見ると理解しやすい。

もっと学ぼう

• 📖 JavaScript 配列メソッド完全ガイド
• 📖 コールバック関数とは？

関連ツール