【JavaScript】forEachでindexを使いこなす！配列の繰り返し処理を初心者向けにわかりやすく解説

フロントエンド開発•
JavaScript

はじめに

JavaScriptで配列を扱うときにforEachメソッドを使う場面は多いのではないでしょうか。
とりわけ、 index (インデックス)を扱えることが便利だと聞いたことがある方もいるかもしれません。
ただ、初心者の方にとっては「そもそもforEachとは何か」「indexはどう活用するのか」という疑問が湧いてきそうですね。

本記事では、**「javascript foreach index」**と呼ばれるテーマを掘り下げながら、配列の繰り返し処理でindexを活用する方法について丁寧に解説していきます。
初心者の方にもわかりやすい平易な言葉を使いながら、実務での活用シーンに結びつく形で進めていきます。

この記事を読むとわかること

  • forEachメソッドの基本的な使い方
  • index (インデックス)を取得する方法と実務での活用アイデア
  • 他のループ構文（forやfor...ofなど）との違いと使い分け
  • 実際にどのような場面で利用すると便利か

forEachメソッドの概要

JavaScriptのforEachは配列の要素を1つずつ順番に取り出して処理を行うためのメソッドです。
基本的な書き方としては次のような形になります。

配列.forEach((要素, インデックス, 配列自体) => {
  // 要素に対する処理
});

ここで、第二引数として インデックス (index)を受け取れるのが特徴です。
初心者の方でも使いやすく、コードが読みやすい形で書けるところがメリットと言えるでしょう。

forEachメソッドを使うメリット

  • コードがコンパクトにまとまりやすい
  • インデックスも手軽に取り出せる
  • 従来のforループに比べて可読性が高いケースが多い

一方で、後ほど詳細を解説しますが ループを途中で抜け出す (breakする)といった制御には向いていません。
場面に応じて適切なループ方法を選ぶことが大切です。

forEachメソッドの基本構文

初心者の方は「具体的な書き方がイメージしづらい」ということもあるでしょう。
まずは簡単な例で見てみましょう。

const fruits = ["apple", "banana", "cherry"];

fruits.forEach((fruit, index) => {
  console.log(index, fruit);
});

このコードは、配列fruitsの各要素を順番に取り出し、コンソールにインデックスと要素名を表示します。
indexの部分に注目すると、配列["apple", "banana", "cherry"]でいうと、0, 1, 2という数値が順番に入るわけです。

forEachメソッドとindexの基本的な使い方

ここからは、実際に index (インデックス)をどのように活用するかについて、もう少し踏み込んで説明していきます。

indexの取得と表示

先ほどの例でも触れましたが、第二引数でindexを受け取ることで繰り返しのカウンタを取得できます。
実務でよくあるのは、何番目の要素かを表示したい、あるいはインデックスに応じてスタイルを変えたいといったシーンです。

const colors = ["red", "green", "blue", "yellow"];

colors.forEach((color, index) => {
  // indexを使って文字列を作る例
  console.log("インデックス:" + index + "  色:" + color);
});

上の例では、ブラウザのコンソールに次のように出力されます。

インデックス:0  色:red
インデックス:1  色:green
インデックス:2  色:blue
インデックス:3  色:yellow

たとえばWebアプリケーションで要素を動的に生成する場合、indexを使って要素のIDを命名する場面などが考えられます。
「一覧を表示するときに、要素を配置する順番が必要」といった実務的な要件にぴったりです。

indexを応用するアイデア

もう少し発展的なシーンを考えてみましょう。
たとえば、「配列の要素を奇数行と偶数行で色分けして表示したい」といった要望があるかもしれません。
このような場合、indexを利用して偶数か奇数かを判定することが多いです。

const items = ["Desk", "Chair", "Lamp", "Bookshelf", "Monitor"];

items.forEach((item, index) => {
  if (index % 2 === 0) {
    console.log(index + "番目は偶数行扱い:", item);
  } else {
    console.log(index + "番目は奇数行扱い:", item);
  }
});

このようにindex % 2 === 0で偶数かどうかをチェックし、表示形式を分けることができます。
実際のWebアプリケーションでは、CSSクラスを動的に付与するといった使い方もよく見かけるでしょう。

forEachメソッドと他のループ処理手法との比較

JavaScriptには繰り返し処理を行う方法がいくつか存在します。
forループ、for...in、for...of、さらに最近では**mapやfilter**なども利用されます。
ここではindexを扱う上でのポイントを中心に、それぞれの使い分けを簡単に見ていきましょう。

forループとの比較

昔からあるのが**for**ループです。
配列の長さをlengthプロパティから取得して、インデックスで回すのが一般的です。

const animals = ["cat", "dog", "mouse"];

// 従来のforループ
for (let i = 0; i < animals.length; i++) {
  console.log(i, animals[i]);
}

forループでもindexは自然に扱えますが、コード量がやや増えがちです。
一方でループを途中で抜ける（break）などの制御は簡単にできるという強みがあります。

for...ofとの比較

**for...of**構文は、反復可能なオブジェクト（配列など）の要素を1つずつ取り出す文法です。
ただし、for...ofでは基本的に要素の値のみを受け取ります。

const numbers = [10, 20, 30];

// for...of でのループ
for (const value of numbers) {
  console.log(value);
}

この書き方は読みやすいですが、indexが必要な場合はforEachのほうが便利です。
for...ofを使う場合にindexを取得したいときは、別の工夫が要るため、初心者にとってはやや手間がかかるかもしれません。

mapやfilterとの違い

配列操作でよく使われる**mapやfilter**は、それぞれ新しい配列を生成するために使われます。
forEachと見た目が似ている場合もありますが、実行結果を配列として返すかどうかに違いがあります。

  • map: 全要素に対して何らかの演算をして、新しい配列を返す
  • filter: 条件に合致する要素だけを取り出した新しい配列を返す
  • forEach: 要素を繰り返し処理するが、何も返さない

単に配列要素を使って何か処理（画面表示やログ出力など）を行うだけならforEachで十分です。
逆に、何らかの結果を配列として返してさらに別処理に回す場合は、mapやfilterを検討するのが良いでしょう。

forEachとindexを活用した実務での利用シーン

ここからは、もう少し具体的な実務を想定して、forEachとindexが活きるシーンをいくつか紹介していきます。

シーン1：動的にHTML要素を生成する

フロントエンド開発では、配列の内容をHTML要素としてリスト表示するケースが非常に多いです。
その際、要素のIDやクラス名にインデックスを組み込むというやり方が考えられます。

const tasks = ["洗濯", "買い物", "メールチェック", "資料作成"];

tasks.forEach((task, index) => {
  const listItem = document.createElement("li");
  listItem.textContent = task;
  // インデックスをclass名の一部に利用
  listItem.className = "task-item-" + index;
  document.getElementById("taskList").appendChild(listItem);
});

このようにすれば、何番目のタスクかを簡単に把握できますし、CSSで個別にスタイリングしたいときにも便利です。
「特定の行だけ背景色を変えたい」といった際にもインデックスを手がかりにできるでしょう。

シーン2：APIレスポンスから得たデータを整形して表示する

Web APIなどから取得したJSON配列を画面表示する場合にも、**forEach+index**がよく利用されます。
インデックスを使って、要素をクリックしたときに「何番目のデータを取得すればよいか」といった管理をするケースも多いです。

例えば、以下のようにデータ取得と合わせてindexを活かす例を示します。

// 仮のAPIレスポンス
const userData = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 28 },
];

userData.forEach((user, index) => {
  const row = document.createElement("div");
  row.textContent = index + "番目: 名前：" + user.name + " 年齢：" + user.age;
  
  // データに紐づくIDを属性として付与する例
  row.setAttribute("data-index", index);

  // 画面に追加
  document.getElementById("userTable").appendChild(row);
});

ここではdata-indexという属性を付けていますが、ユーザーが行をクリックしたときにindexを元に詳細画面を表示するといった流れが作りやすくなります。

シーン3：配列の中身を検証して問題点をログに出す

実務では、外部システムから渡される配列が想定どおりかをチェックし、もし誤りがあればエラーをログに出すといった作業も考えられます。
このとき**「何番目の要素がエラーだったか」**を示すことが非常に重要になります。

const records = [
  { id: 1, value: "OK" },
  { id: 2, value: "ERROR" },
  { id: 3, value: "OK" },
];

records.forEach((record, index) => {
  if (record.value === "ERROR") {
    console.error("Error found at index:", index);
    // ここでAPIにエラー報告を送る処理などを行う
  }
});

運用時にエラーログを見返すとき、indexがわかると不備を素早く追跡しやすくなります。
「配列の何番目か」を把握できるかどうかで、調査や修正の手間が変わってくるのです。

breakやreturnをしたい場合の注意点

「配列の要素をチェックして、ある条件が見つかったら処理を中断したい」という要望もよくあります。
残念ながら、forEachはループを途中で強制終了する手段がありません。

forEach内でreturnを使っても、その場のコールバック関数が終了するだけであって、ループ自体が止まるわけではない点に注意が必要です。
もし、どうしても途中でループを抜けたい場面がある場合は、**forループや、someやevery**などの別のメソッドを検討することになるでしょう。

途中で抜けるための代替策

  • forループ: breakやcontinueが使える
  • someメソッド: 条件を満たすとtrueを返してループが終了する
  • everyメソッド: 条件を満たさなくなるとfalseを返してループが終了する

いずれもindexを取得する方法はあります。
しかし、初心者の方はまずはforEachを使ってすべての要素を順に処理することに慣れたうえで、状況に応じて手法を変えていけば良いでしょう。

コールバック関数内での非同期処理に関する注意点

forEachは非同期処理に対しては注意が必要です。
たとえば、forEach内でAPIコールを行って、その結果を順番に表示したいと思っても、想定どおりに同期的に処理が流れない場合があります。

このあたりは初心者の方がつまずきやすいポイントです。
もし「一定の順番で非同期処理を実行し、結果を踏まえて次の要素を処理したい」といったシナリオがあるなら、async/awaitやfor...ofとの組み合わせを検討するのが良いかもしれません。

非同期処理を複数回実行する場合、forEachを使うと意図せず同時並行で動いてしまうことがあります。
逐次的に処理を進めたいときは、async/awaitとfor...of構文の組み合わせなど、他の方法を検討してみましょう。

indexを使う上でのパフォーマンスの考え方

パフォーマンス的にforEachは極端に遅いわけではありません。
しかし、大量のデータを扱う場合は、数万件を超えると繰り返し処理がボトルネックになるケースも出てきます。
そのときはアルゴリズムの見直しや、そもそも全件を一度にループする必要があるのかを考える必要があるでしょう。

大規模データの場合の対策例

  • データを分割して処理する
  • アルゴリズムそのものを見直す（検索なら二分探索などを使う）
  • 必要最小限の情報だけをループに回す

初心者の方は、まずは「大量データでなければ通常の配列操作で問題ない」と捉えておけば大丈夫です。
実務で大容量のデータを取り扱う際は、indexの管理方法だけでなく、処理内容やデータ構造も検討することが重要になります。

やってしまいがちなミスと対処法

初心者がforEachとindexを使う際、うっかりハマりがちなポイントをいくつか挙げておきます。

ミス1：コールバック関数の引数の順番を間違える

// NG例：引数の順序がおかしい
array.forEach((index, value) => {
  console.log(index, value);
});

このように書いてしまうと、第一引数が実際の要素、第二引数がindexになるという文法と食い違ってしまいます。
正: (value, index) => {...} の順序で書くことを覚えておきましょう。

ミス2：returnでループが終了すると思ってしまう

const arr = [1, 2, 3, 4];

arr.forEach((value) => {
  if (value === 2) {
    return; // これでループが終わるわけではない
  }
  console.log(value);
});

この場合、value === 2のときに戻り値を返しても、ループは継続されてしまいます。
途中でループを止めたい場合はforループなど別の手段を使いましょう。

ミス3：配列が空の場合に想定外の動きをする

空の配列に対してforEachを実行すると、コールバックは一度も呼ばれません。
それ自体はエラーではありませんが、想定と違う動作をすることがあります。
実務でよくあるのは、**「要素がない場合でも表示だけはしたい」**などの要件があるのに、何も表示されずエラーにもならないケースです。

const emptyArr = [];

emptyArr.forEach((value, index) => {
  console.log(index, value); // そもそも呼ばれない
});

対策としては、if (array.length === 0) {...}のような条件分岐を事前に入れるなどの工夫をすると良いでしょう。

他の配列操作メソッドとの組み合わせ例

前述のように、forEachとindexは他のメソッドと組み合わせることでより表現力が高まります。
ここでは少し応用的な例として**filterとforEach**を組み合わせたケースを見てみましょう。

const scores = [80, 55, 90, 70, 65, 100];

// ある基準値以上を抽出
const highScores = scores.filter((score) => score >= 80);

// 抽出結果の中身を確認
highScores.forEach((score, index) => {
  console.log(index + "番目: " + score);
});

このように、まず条件で配列を 絞り込み (filter)、そのあとにforEachで一つずつ処理を行う流れです。
インデックスが欲しい場合、filterで抽出した結果のインデックスになる点に注意してください。
元の配列でのインデックスとは必ずしも一致しないので、そこを勘違いしないように気をつける必要があります。

forEachとindexを効率良く学ぶポイント

初心者の方が効率良くforEachとindexを使いこなすためには、いくつかコツがあります。

  1. シンプルな配列で練習する

    • 小さな例から試して成功体験を積む

  2. 実務を意識したサンプルを作る

    • HTML要素を生成するといった、目に見える出力があるものを試す

  3. コードの結果をコンソールや画面で確かめる

    • どのタイミングでどんな値が出るか、indexがどんな順序で増えるかを観察する

  4. 他のループ手法やメソッドとの違いを比べる

    • map, filter, reduceなどと処理の流れを比較すると理解が深まる

実際に動きを確かめながら書くことで、一気に使い方を覚えられます。
単に座学で覚えるよりも、自分なりのサンプルコードを書いて挙動を確かめるのが近道でしょう。

初心者の皆さんは、まずは「配列の要素を順番に表示しながらインデックスを確認する」という小さいステップから始めると良いでしょう。
小さな成功を積み重ねると、実務にも応用しやすくなります。

よくある質問（FAQ）

ここでは、初心者の方が抱きがちな疑問をいくつか取り上げてみます。

Q1: forEachよりforループのほうがいい場合はある？

あります。
先述の通り、途中でループを止めたいときや、一部だけを飛ばしたいときにはforループのほうが制御しやすいです。
また、非同期処理やエラー制御を厳密に行いたい場合には、forEachよりも別の手段を使うほうが楽な場合もあります。

Q2: indexを使わずに要素だけを処理したい場合はどうする？

その場合は、forEachのコールバック関数で第二引数を省略すればOKです。

array.forEach((value) => {
  console.log(value);
});

こうすることで、要素の値だけをシンプルに処理できます。

Q3: forEachはオブジェクトにも使える？

基本的にforEachは配列のメソッドです。
オブジェクトを直接ループしたいときは、Object.keys()やObject.entries()でキーやバリューを配列化してからforEachを使うアプローチがあります。

const user = { name: "Alice", age: 25, city: "Tokyo" };
Object.entries(user).forEach(([key, value]) => {
  console.log(key, value);
});

まとめ

本記事では、JavaScriptのforEachメソッドでindexを使う方法について、初心者でも理解しやすいように解説しました。
インデックスを活用することで、配列の繰り返し処理にさまざまな表現の幅が出てきます。

  • forEach((value, index) => {...}) の第二引数としてindexが得られる
  • indexを使えば、何番目の要素かを示す表示や、要素のスタイリングなどに便利
  • 途中でループを抜ける処理には向いていないため、必要に応じてforループやsomeなどを検討
  • 実務では「動的にHTML要素を作る」「APIからのレスポンスを表示する」「エラー調査で何番目がNGか把握する」など、多くのシーンで活用できる

初心者の皆さんには、ぜひ手元の環境で実際にコードを書きながら、indexの扱いに慣れていっていただければと思います。
プログラミングに慣れてくると、単なるループ処理でも「こう使うと便利だな」と思えるシーンが増えていくでしょう。

JavaScriptの配列操作においては、forEachが非常にわかりやすい入り口ですので、ぜひこの記事を参考にしながら活用してみてください。

JavaScriptをマスターしよう

この記事で学んだJavaScriptの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

JavaScriptの人気講座ランキングを見る筆者おすすめ No.1 講座！「ちゃんと学ぶ、HTML/CSS + JavaScript」
フロントエンド開発の新着記事をチェック

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説