JavaScriptの配列をループする方法！初心者でもわかるforEach・map・filterの違いと使い方
生徒
「JavaScriptで配列の中のデータを1つずつ処理したいんですけど、どうやってやるんですか？」
先生
「配列をループ（くり返し処理）するには、forEach、map、filterというメソッドがありますよ。」
生徒
「メソッドって何ですか？それぞれどんな違いがあるんですか？」
先生
「メソッドというのは、ある目的を果たすための『命令』のようなものです。それぞれの使い方と違いを、わかりやすい例を使って説明していきますね！」
1. JavaScriptの「配列」とは？
まずは基本の「配列」から説明しましょう。JavaScript（ジャバスクリプト）における配列とは、複数のデータを1つにまとめて保存できる仕組みのことです。
たとえば、りんご・バナナ・みかんという3つの果物があるとします。これを1つの箱に入れて「果物リスト」として扱いたいときに配列を使います。
const fruits = ["りんご", "バナナ", "みかん"];
このように、[]の中にデータをカンマ（,）で区切って並べると、配列が作れます。
2. forEachで配列の中身を1つずつ表示する
forEach（フォーイーチ）は、配列の中の要素を1つずつ順番に処理するメソッドです。
「全部の果物を1つずつ表示してね」といった使い方に向いています。
const fruits = ["りんご", "バナナ", "みかん"];
fruits.forEach(function(item) {
console.log(item);
});
実行すると、次のように表示されます。
りんご
バナナ
みかん
ポイント： forEachは「配列を処理するけど、結果を新しく作りたいわけじゃない」ときに使います。
3. mapは配列を「変換」して新しい配列を作る
map（マップ）は、配列の中身を「変換」して、新しい配列を作りたいときに使います。
たとえば、「すべての果物の名前の後ろに『を食べました』という文字を付けたい」ときなどです。
const fruits = ["りんご", "バナナ", "みかん"];
const eatenFruits = fruits.map(function(item) {
return item + "を食べました";
});
console.log(eatenFruits);
["りんごを食べました", "バナナを食べました", "みかんを食べました"]
ポイント： mapは「元の配列を使って、内容を変えて新しい配列を作りたい」場合に便利です。
4. filterで条件に合うものだけを取り出す
filter（フィルター）は、「条件に合うデータだけを取り出す」ためのメソッドです。
たとえば、「5文字以上の果物の名前だけを取り出したい」といったときに使います。
const fruits = ["りんご", "バナナ", "みかん", "ドラゴンフルーツ"];
const longFruits = fruits.filter(function(item) {
return item.length >= 5;
});
console.log(longFruits);
["バナナ", "みかん", "ドラゴンフルーツ"]
ポイント： filterは「条件で絞り込みたい」ときに使います。
5. forEach・map・filterの違いを表で比較！
| メソッド名 | できること | 新しい配列を作るか？ |
|---|---|---|
forEach | 配列を1つずつ処理（表示・計算など） | ×（作らない） |
map | 配列の中身を変えて新しい配列を作る | 〇（作る） |
filter | 条件に合うデータだけを取り出す | 〇（作る） |
6. よくある質問と注意点
- Q1：「forEachの中で
returnしたのに値が返らないのはなぜ？」
→forEachは何も返しません。returnは使えても、返ってくるものはありません。 - Q2：「mapやfilterを使うとエラーになることがあるんですけど？」
→ 配列ではないものに対してmapやfilterを使うとエラーになります。まずconsole.log(データ名)で中身を確認しましょう。 - Q3：「どれを使えばいいかわからない…」
→ 「表示だけしたい」→forEach
「変換して新しい配列が欲しい」→map
「条件に合うものだけ取り出したい」→filter
という風に使い分けると覚えやすいです！
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を使えば、「ある条件に当てはまるものだけ取り出す」ことができます。
