JavaScriptのforEach()の使い方を初心者向けに徹底解説！配列の基本操作をマスター

1. forEach()とは何か？

1. forEach()とは何か？

JavaScriptのforEach()メソッドは、配列の全ての要素に対して同じ処理を順番に行うためのメソッドです。配列をループ処理するための便利な方法で、初心者でも簡単に使えます。

例えば、買い物リストの中の全てのアイテムを画面に表示したい場合に使うことができます。

2. forEach()の基本構文

2. forEach()の基本構文

forEach()は次のように使います。

array.forEach(function(element, index, array) {
  // ここに処理を書く
});

ここでのelementは配列の現在の要素、indexはその要素の番号、arrayは元の配列全体です。indexやarrayは必要に応じて省略できます。

3. 基本例：配列の要素を表示する

3. 基本例：配列の要素を表示する

例えば次のように書くと、配列の中身を一つずつ順番に表示できます。

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

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

りんご
バナナ
みかん

この例では、配列fruitsの要素を順番にfruitとして受け取り、console.log()で表示しています。

4. arrow関数を使ったforEach()

4. arrow関数を使ったforEach()

ES6以降は、arrow関数（矢印関数）を使うとさらに短く書けます。

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

numbers.forEach(number => console.log(number * 2));

2
4
6
8
10

この例では、配列の各要素を2倍にして表示しています。arrow関数を使うと、functionを省略して簡潔に書けます。

5. index番号も使う例

5. index番号も使う例

forEach()では配列の番号（index）も取得できます。例えばリストの番号付きで表示したい場合です。

const animals = ["犬", "猫", "うさぎ"];

animals.forEach(function(animal, index) {
  console.log(index + 1 + "番目の動物は " + animal);
});

1番目の動物は 犬
2番目の動物は 猫
3番目の動物は うさぎ

このように、indexを使うことで、配列の順番情報を同時に処理できます。

6. 元の配列を使う例

6. 元の配列を使う例

forEach()では、元の配列も取得できます。例えば元の配列を参照して条件に応じた処理をしたい場合に便利です。

const scores = [70, 85, 90];

scores.forEach((score, index, array) => {
  if(score >= 80) {
    console.log(index + "番目のスコアは合格です：" + score);
  } else {
    console.log(index + "番目のスコアは不合格です：" + score);
  }
});

0番目のスコアは不合格です：70
1番目のスコアは合格です：85
2番目のスコアは合格です：90

ここでは、配列の値によって条件分岐をして表示しています。元の配列全体arrayを参照することで、より柔軟な処理が可能です。

7. forEach()を使うときの注意点

7. forEach()を使うときの注意点

forEach()は便利ですが、いくつか注意点があります。まず、forEach()は必ず全ての要素に処理を行うため、途中で処理をやめることができません。もし途中で停止したい場合はforやfor…ofを使う必要があります。

また、forEach()は値を返すことができません。配列を変換して新しい配列を作りたい場合は、map()を使います。

8. 複数の配列処理を組み合わせる例

8. 複数の配列処理を組み合わせる例

forEach()は配列の各要素を順番に処理できるので、他の処理と組み合わせることもできます。

const names = ["太郎", "花子", "次郎"];
const greetings = [];

names.forEach(name => {
  greetings.push("こんにちは、" + name + "さん！");
});

console.log(greetings);

["こんにちは、太郎さん！", "こんにちは、花子さん！", "こんにちは、次郎さん！"]

この例では、forEach()で各名前に挨拶文を作って別の配列greetingsに追加しています。forEach()はこのように他の処理や配列操作と組み合わせるのも得意です。

9. まとめにかえて：forEach()のポイント

9. まとめにかえて：forEach()のポイント

JavaScriptのforEach()は、配列の各要素を簡単に順番に処理できる便利なメソッドです。for文よりも短く書けるため、初心者でも使いやすいです。ポイントを整理すると次の通りです。

• 配列の要素を順番に処理できる
• 要素番号（index）や元の配列全体も取得可能
• 途中で処理を止められない
• 値を返さないので、新しい配列を作るときはmap()を使用

forEach()を使いこなすことで、JavaScriptでの配列操作がぐっと簡単になります。

まとめ

まとめ

本記事では、JavaScriptのforEach()メソッドについて、基本的な使い方から応用例まで詳しく解説しました。forEach()は配列の全ての要素に対して順番に処理を行うためのメソッドであり、for文よりも簡潔に書けるため初心者でも扱いやすい特徴があります。基本的な構文は、配列名の後に.forEach()をつけ、コールバック関数内で各要素を処理するという形です。コールバック関数では、配列の現在の要素を表すelement、要素番号を表すindex、そして元の配列全体を表すarrayを引数として受け取ることができます。

実際のコード例として、配列の要素を順番に表示する例や、arrow関数を使った短い記述例、番号付きで表示する方法、元の配列を参照して条件分岐を行う例などを紹介しました。さらに、複数の配列や他の処理と組み合わせて、挨拶文を生成するような応用例も見てきました。

注意点としては、forEach()は途中でループを抜けることができず、値を返さないことです。途中で処理を止めたい場合や新しい配列を作りたい場合は、forやfor…of、map()を使う必要があります。これらの特徴を理解した上でforEach()を使いこなすと、JavaScriptでの配列操作やデータ処理がより効率的で簡潔になります。

今回の内容を整理すると、次のポイントが重要です。

• 配列の要素を順番に処理できる
• 要素番号（index）や元の配列全体を参照可能
• 途中で処理を止められない
• 値を返さないため、新しい配列作成にはmap()を使用
• arrow関数を使うとコードをより簡潔に書ける
• 他の配列処理や条件分岐と組み合わせることで柔軟に対応可能

サンプルコード：配列の要素を番号付きで表示する

 const fruits = ["りんご", "バナナ", "みかん", "ぶどう"];
fruits.forEach((fruit, index) => {
console.log((index + 1) + "番目の果物は " + fruit);
});

1番目の果物は りんご
2番目の果物は バナナ
3番目の果物は みかん
4番目の果物は ぶどう