javaScriptのforEachとは？使い方とfor文との違いをわかりやすく解説【初心者OK】

JavaScript

JavaScriptで配列を配列を処理するとき。
「for文ってちょっと面倒じゃない？」
「もっと簡単に書けないの？」
と思ったことはありませんか？
そんなときに便利なのがforEachです。

これまで学んだ「JavaScriptのfor文」でも繰り返し処理は可能ですが、forEachを使えば、配列（Array）の中身をよりスッキリと、読みやすく処理することができます。

本記事では、forEachの基本から、for文との決定的な違い、そして「使ってはいけない場面」までを詳しく解説します。

forEachとは？

forEachとは、「配列の要素を一つずつ取り出して、順番に処理を実行する」ための配列専用のメソッドです。

例えば、クラス全員のテスト結果が配列に入っているとき、「一人ずつ名前を呼び出して点数を表示する」といった処理を、機械的に、かつスマートに行うことができます。

これまでのfor文は「1番目、2番目……」と「回数」を数えていましたが、forEachは「配列の中身がなくなるまで、全部やって！」というスタンスです。

for文との違いを徹底比較

「繰り返しができるなら、どっちを使っても同じじゃないの？」と思うかもしれません。しかし、書き比べてみるとその「読みやすさ」に大きな差があることがわかります。

for文で書く場合

まずは、以前学んだ「JavaScriptのfor文」の書き方を見てみましょう。

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

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

for文の場合、「カウンター変数 i の準備」「条件（配列の長さまで）」「 i を増やす」という3つの手順を自分で管理し、さらに fruit[i] と指定して中身を取り出す必要があります。

forEachで書く場合

同じ処理をforEachで書くと、こうなります。

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

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

「カウンター変数」や「長さのチェック」が一切消えました。forEachが裏側で勝手に「1番目から最後まで」をループしてくれるからです。

違いまとめ

項目for文forEach
対象配列以外（数値など）もOK配列専用
記述量やや多い（iなどの管理が必要）少ない（スッキリ書ける）
読みやすさ構造が複雑になりやすい直感的で分かりやすい
中断（break）できるできない

forEachの基本的な使い方

それでは、具体的な書き方を詳しく見ていきましょう。

基本構文

配列.forEach(function(要素の中身, インデックス, 元の配列) {
  // 実行したい処理
});

実は、forEach には3つのデータが渡されています。

  1. 要素の中身：今処理している「中身」そのもの（必須）
  2. インデックス：今、何番目か（任意）
  3. 元の配列：操作している配列全体（任意）

実際の例（インデックスも使う場合）

const users = ["田中", "佐藤", "鈴木"];

users.forEach(function(user, index) {
  console.log(`${index + 1}番目のユーザーは、${user}さんです`);
});

このように、index を使えば「今、何番目のデータを処理しているか」も簡単に把握できます。

アロー関数で書くともっと簡単！

現代のJavaScript開発では、function という文字すら省略して書くのが主流です。ここで、アロー関数が出番になります。
アロー関数について知りたい方は、「JavaScriptのアロー関数とは？functionとの違いを初心者向けに解説」がオススメです。

アロー関数版のforEach

const scores = [80, 90, 70];

scores.forEach(score => console.log(score));

なんと、たったの1行で書けてしまいます。

  • function を消す
  • 引数のカッコを (score) => にする
  • 処理が1行なら { } も消せる

この書き方は実務で100%登場するので、ぜひ今のうちに慣れておきましょう。

forEachを使う際の「3つの注意点」

非常に便利な forEach ですが、万能ではありません。初心者が最もハマりやすい「3つの罠」を解説します。

returnしても値は返らない

forEach の最大の特徴は、「やりっぱなし」だということです。
関数の外に結果を返そうとしてreturn を書いても、forEach 自体の結果は常にundefined（中身なし）になります。

breakやcontinueは使えない

for文では「特定の条件でループを抜ける（break）」ことができましたが、forEach は途中で止めることができません。
一度始めたら、配列の最後まで強制的に走り抜けます。「特定のデータが見つかったら終了したい」という場合は、for…of や some メソッドを使うのが正解です。

値を加工して「新しい配列」を作りたいならmapを使う

「配列の数字をすべて2倍にした新しい配列が欲しい」というとき、forEach で無理やり作ることもできますが、コードが汚くなりがちです。
そのような「加工」には、map というメソッドを使うのがベストです。

forEachとfor文の使い分け

結局、どっちを使えばいいのでしょうか？判断基準はシンプルです。

forEachを使うべき場面

  • 配列の全データを順番に処理したい（画面に表示する、合計を出すなど）
  • コードを短く、読みやすく保ちたい
  • 途中で処理を止める必要がない

for文（またはfor…of）を使うべき場面

  • 途中で break して処理を中断したい
  • 配列以外の繰り返し（「1から100まで足す）などをしたい
  • 処理速度を極限まで追求したい（非常に膨大なデータの場合）

まとめ

forEach は、JavaScriptで配列を扱う上で「最も親しみやすく、かつ強力な武器」です。

  1. forEachは「配列の全要素」を自動でループしてくれる。
  2. for文よりも記述が少なく、バグが起きにくい。
  3. アロー関数と組み合わせることで、1行でスッキリ記述できる。
  4. 「途中で止められない」「値を返さない」という特性を理解して使う。

まずは、配列で作った自分のデータを使って、forEach で1つずつコンソールに表示する練習をしてみてください。

「回数を数える苦労」から解放されたとき、あなたのJavaScriptスキルはまた一段、モダンな開発者へと近づきます！

タイトルとURLをコピーしました