JavaScriptの配列をループする方法！初心者でもわかるforEach・map・filterの違いと使い方

1. JavaScriptの「配列」とは？

1. JavaScriptの「配列」とは？

まずは基本の「配列」から説明しましょう。JavaScript（ジャバスクリプト）における配列とは、複数のデータを1つにまとめて保存できる仕組みのことです。

たとえば、りんご・バナナ・みかんという3つの果物があるとします。これを1つの箱に入れて「果物リスト」として扱いたいときに配列を使います。

const fruits = ["りんご", "バナナ", "みかん"];

このように、[]の中にデータをカンマ（,）で区切って並べると、配列が作れます。

2. forEachで配列の中身を1つずつ表示する

2. forEachで配列の中身を1つずつ表示する

forEach（フォーイーチ）は、配列の中の要素を1つずつ順番に処理するメソッドです。
「全部の果物を1つずつ表示してね」といった使い方に向いています。

const fruits = ["りんご", "バナナ", "みかん"];

fruits.forEach(function(item) {
  console.log(item);
});

実行すると、次のように表示されます。

りんご
バナナ
みかん

ポイント： forEachは「配列を処理するけど、結果を新しく作りたいわけじゃない」ときに使います。

3. mapは配列を「変換」して新しい配列を作る

3. mapは配列を「変換」して新しい配列を作る

map（マップ）は、配列の中身を「変換」して、新しい配列を作りたいときに使います。

たとえば、「すべての果物の名前の後ろに『を食べました』という文字を付けたい」ときなどです。

const fruits = ["りんご", "バナナ", "みかん"];

const eatenFruits = fruits.map(function(item) {
  return item + "を食べました";
});

console.log(eatenFruits);

["りんごを食べました", "バナナを食べました", "みかんを食べました"]

ポイント： mapは「元の配列を使って、内容を変えて新しい配列を作りたい」場合に便利です。

4. filterで条件に合うものだけを取り出す

4. filterで条件に合うものだけを取り出す

filter（フィルター）は、「条件に合うデータだけを取り出す」ためのメソッドです。

たとえば、「5文字以上の果物の名前だけを取り出したい」といったときに使います。

const fruits = ["りんご", "バナナ", "みかん", "ドラゴンフルーツ"];

const longFruits = fruits.filter(function(item) {
  return item.length >= 5;
});

console.log(longFruits);

["バナナ", "みかん", "ドラゴンフルーツ"]

ポイント： filterは「条件で絞り込みたい」ときに使います。

5. forEach・map・filterの違いを表で比較！

5. forEach・map・filterの違いを表で比較！

6. よくある質問と注意点

6. よくある質問と注意点

• Q1：「forEachの中でreturnしたのに値が返らないのはなぜ？」
  → forEachは何も返しません。returnは使えても、返ってくるものはありません。
• Q2：「mapやfilterを使うとエラーになることがあるんですけど？」
  → 配列ではないものに対してmapやfilterを使うとエラーになります。まずconsole.log(データ名)で中身を確認しましょう。
• Q3：「どれを使えばいいかわからない…」
  → 「表示だけしたい」→forEach
  「変換して新しい配列が欲しい」→map
  「条件に合うものだけ取り出したい」→filter
  という風に使い分けると覚えやすいです！

7. 実用例：値段が高い商品だけを取り出す

7. 実用例：値段が高い商品だけを取り出す

もう少し実用的な例も見てみましょう。以下のような商品リストがあるとします。

const items = [
  { name: "ノート", price: 100 },
  { name: "ボールペン", price: 300 },
  { name: "高級ペン", price: 1500 },
  { name: "消しゴム", price: 80 }
];

const expensiveItems = items.filter(function(item) {
  return item.price >= 500;
});

console.log(expensiveItems);

[
  { name: "高級ペン", price: 1500 }
]

このように、filterを使えば、「ある条件に当てはまるものだけ取り出す」ことができます。

まとめ

まとめ

ここまでJavaScriptにおける配列のループ処理、特に「forEach」「map」「filter」という3つの主要なメソッドについて詳しく解説してきました。モダンなJavaScript（ES6以降）の開発現場において、これらのメソッドを使いこなすことはもはや必須スキルと言っても過言ではありません。

なぜ従来のfor文よりもメソッドを使うのか？

以前は「for文」を使ってループ処理を書くのが一般的でしたが、現在は今回紹介したメソッドが主流です。その理由は「コードの読みやすさ（可読性）」と「バグの少なさ」にあります。for文は非常に自由度が高い反面、ループの開始条件や終了条件、カウンター変数の操作などで記述ミスが起きやすいという弱点があります。一方で、forEachやmap、filterは、その名前自体が「何をするための処理か」を明確に示しているため、第三者がコードを見た瞬間に意図を理解しやすくなるのです。

それぞれのメソッドの役割を再確認

あらためて、それぞれの使いどころを整理しておきましょう。

• forEach：単に配列を1つずつ取り出して処理を実行したいときに使います。戻り値（返り値）がないため、計算結果を外部の変数に代入したり、画面にそのまま表示したりする「副作用」を伴う処理に適しています。
• map：元の配列をベースにして、全ての要素に加工を施した「新しい配列」を作成したいときに使います。例えば、数値の配列をすべて2倍にしたり、オブジェクトの配列から特定のプロパティだけを抽出して名前のリストを作ったりする場合に非常に便利です。
• filter：条件に一致する要素だけを抽出して「新しい配列」を作ります。不要なデータを取り除き、必要なものだけを残したいという場面で力を発揮します。

応用編：メソッドを組み合わせた「メソッドチェーン」

JavaScriptの配列メソッドの真骨頂は、これらを組み合わせて記述できる「メソッドチェーン」にあります。例えば、「100円以上の商品だけを抽出（filter）して、その商品名に『【SALE】』という文字を付け足す（map）」といった一連の流れを、一つのまとまった処理として書くことができます。

const products = [
  { name: "ノート", price: 120 },
  { name: "消しゴム", price: 80 },
  { name: "定規", price: 200 }
];

// 100円以上の商品だけを抽出し、名前を加工する
const saleProducts = products
  .filter(item => item.price >= 100)
  .map(item => item.name + "（SALE対象）");

console.log(saleProducts);

実行結果は以下の通りです。

["ノート（SALE対象）", "定規（SALE対象）"]

このように、複数の処理を数珠つなぎにすることで、複雑なデータ操作も非常にシンプルに、かつ直感的に記述できるようになります。初心者のうちは、まずは一つひとつのメソッドを単独で使えるようになることを目指しましょう。慣れてきたら、このメソッドチェーンにも挑戦してみてください。

JavaScriptの世界では、配列操作は日常茶飯事です。今回学んだ内容を土台にして、さらに高度なreduceやfindといった他のメソッドも調べてみると、プログラミングがどんどん楽しくなっていくはずです。配列を自在に操れるようになると、ウェブアプリケーション開発の幅がぐっと広がりますよ。