Zenn
🔖

JavaScriptの配列 filter() / map() / forEach() の違いと使い分けを解説

に公開
JavaScript
初心者向け
備忘録
tech

はじめに

JavaScriptで配列を操作するとき、filter()、map()、forEach() は特によく使われるメソッドです。
どれも「配列の各要素を1つずつ処理する」ことができますが、目的や戻り値がまったく違います。

最初のうちは「似ているようで何を使えばいいかわからない」と感じるかもしれません。
本記事では、それぞれの役割と使い分けのポイントを、実例付きで解説します。

forEach()：処理するだけで、値は返さない

forEach() は、配列に入っている1つ1つの値に対して、順番に処理を行いたいときに使います。
例えば「値を表示する」「サーバーに送る」「ファイルに保存する」などのように、
データを加工するのではなく、処理を実行するだけの場面で使います。

例：各数字を2倍にして表示する

const numbers = [1, 2, 3];

numbers.forEach((num) => {
  console.log(num * 2); // → 2, 4, 6 が表示される
});

この例では、配列 [1, 2, 3] のそれぞれの値に対して
num * 2 の計算をして、その結果を console.log() で表示しています。

  • 1回目：1 × 2 → 2 を表示
  • 2回目：2 × 2 → 4 を表示
  • 3回目：3 × 2 → 6 を表示

単に表示しているだけなので、新しい配列は作られませんし、元の配列も変わりません。

✅ ポイント

  • 配列のすべての要素に対して、順番に処理を実行する
  • 実行する内容は、自分で書いた関数（console.log() など）
  • 結果はどこにも保存されず、新しい配列も作られない
  • forEach() 自体の戻り値は undefined
  • 値を加工したり、新しい配列を作りたいときには使わない

map()：加工して、新しい配列を返す

map() は、元の配列の各要素を変換して、新しい配列を作りたいときに使います。
例えば、すべての数字を2倍にするときや 「名前のリストに 'さん' をつける」といった文字列の加工といった、データの加工に向いています。

例：すべての数字を2倍にして、新しい配列を作る

const numbers = [1, 2, 3];

const doubled = numbers.map((num) => {
  return num * 2;
});

console.log(doubled); // → [2, 4, 6]

このコードでは、map() を使って配列 [1, 2, 3] の各値を2倍にし、
その結果 [2, 4, 6] という新しい配列を作っています。
元の値を変えて新しい配列を作るのが map() の特徴です。

✅ ポイント

  • 元の配列の値を、1つずつ別の値に変えられる
  • その変換した結果で、新しい配列を作成する
  • 元の配列はそのまま（変更されない）
  • 値を変えて別の配列がほしいときに便利

filter()：条件に合う要素だけを取り出す

filter() は、配列の中から「条件に合う要素」だけを抜き出して配列にしたいときに使います。
例えば、偶数だけを取り出す・特定の文字列を含む要素だけを抽出する、といった用途で使われます。

const numbers = [1, 2, 3, 4, 5];

const even = numbers.filter((num) => {
  return num % 2 === 0; // 偶数だけ取り出す
});

console.log(even); // [2, 4]

✅ ポイント

  • 配列の各要素に対して「この要素を取り出すかどうか」を判定する関数を実行する
  • 判定が true の要素だけを集めて、新しい配列を作る
  • 元の配列は変更されない
  • 条件に合うデータを絞り込みたいときに便利

filter()、map()、forEach()の比較

メソッド 戻り値 主な用途 元の配列は変わるか？
forEach() undefined 表示・保存・送信などの処理を行う 変わらない
map() 新しい配列 加工・変換して新しい配列を作る 変わらない
filter() 条件に合う配列 必要な要素だけを取り出す 変わらない

⚠️ 注意点

filter() や map() を「処理目的」で使っているケースは意外と多いですが、
戻り値を使わない場合は forEach() に書き換えると意図が明確になります。

おわりに

どれも「配列の各要素を処理する」点では同じですが、
目的と戻り値によって使い分けるのが大事です。

  • 単に処理したい → forEach()
  • 加工して配列を作りたい → map()
  • 条件で絞りたい → filter()

使い分けを理解しておくと、コードの意図が明確になり、読みやすさも向上します。

本記事が参考になれば幸いです。

🔗 関連記事

Discussion