先生と生徒の会話形式で理解しよう

生徒

「JavaScriptのループでよく見る『インデックス番号』って何ですか？どうして使うんでしょう？」

先生

「インデックス番号とは、ループで繰り返し処理をするときに、何回目の繰り返しかを表す番号のことです。順番を数える数字のようなものですね。」

生徒

「それがどう役に立つんですか？教えてください！」

先生

「それでは、基本から丁寧にインデックス番号の使い方と活用ポイントを一緒に見ていきましょう！」

1. インデックス番号とは？

「インデックス番号」とは、繰り返しの回数を数える数字です。0から始まることが多いです。

例えば、配列（たくさんのデータをまとめた箱）の中の1つ1つの場所を指し示すときに使います。最初の場所は0、次は1、その次は2…と順番に番号がついています。

この番号を使うことで、ループの中で「今何番目のデータを処理しているか」を知ることができます。

2. forループとインデックス番号の基本的な使い方

JavaScriptで配列の中身を順番に見るときに、よく使うのがforループです。インデックス番号はこのループの中で使います。


const fruits = ["りんご", "バナナ", "みかん"];
for (let i = 0; i < fruits.length; i++) {
  console.log(i + "番目は" + fruits[i] + "です");
}


0番目はりんごです
1番目はバナナです
2番目はみかんです

この例では、変数iがインデックス番号になっています。fruits[i]で、配列のi番目の中身を取り出しています。

3. インデックス番号が0から始まる理由

JavaScriptの配列やほとんどのプログラミング言語では、インデックス番号が0から始まります。これを0始まりと言います。

これはコンピューターがメモリの位置を0から数え始めることに由来していますが、初心者の方は「0が1番目」というルールを覚えるだけで十分です。

4. インデックス番号を使う3つのポイント

インデックス番号をループで使うときのポイントを3つ紹介します。

配列の全ての要素を順番に処理できる
インデックス番号で「今どの要素を見ているか」を指定できるため、配列の中身を1つずつ確実に処理できます。
特定の番号だけ特別な処理をすることができる
例えば「最初の要素だけ色を変える」など、インデックス番号を条件にして動きを変えられます。
ループ回数の管理がしやすい
インデックス番号が何回目の繰り返しかを示すので、ループの途中で処理を止めたいときや、カウントに使えます。

5. インデックス番号を使った条件分岐の例

次の例では、インデックス番号が0のときだけ特別なメッセージを表示しています。


const colors = ["赤", "青", "緑"];
for (let i = 0; i < colors.length; i++) {
  if (i === 0) {
    console.log(colors[i] + "は一番目の色です！");
  } else {
    console.log(colors[i]);
  }
}


赤は一番目の色です！
青
緑

if (i === 0)で「0番目のときだけ特別に処理する」と指定しています。

6. インデックス番号を使うときの注意点

配列の長さより大きい番号を使うとエラーになるので、i < 配列名.lengthの条件を書くことが大切です。
インデックス番号は0から始まるため、「1番目」は0番目であることを理解しましょう。
ループの中でインデックス番号を間違えて変えないように気をつけてください。

7. インデックス番号を使った配列操作の応用例

例えば、配列の中身を逆順に表示したい場合も、インデックス番号を工夫して使います。


const animals = ["犬", "猫", "鳥"];
for (let i = animals.length - 1; i >= 0; i--) {
  console.log(i + "番目は" + animals[i] + "です");
}


2番目は鳥です
1番目は猫です
0番目は犬です

このように、インデックス番号を減らすことで、後ろから前に向かって配列を処理できます。

8. forEachメソッドでもインデックス番号は使える

JavaScriptにはforEachという配列の要素を順番に処理する便利な方法があります。このときもインデックス番号が使えます。


const fruits = ["りんご", "バナナ", "みかん"];
fruits.forEach(function(item, index) {
  console.log(index + "番目は" + item + "です");
});


0番目はりんごです
1番目はバナナです
2番目はみかんです

indexがインデックス番号の役割をしています。

9. まとめずに、重要ポイントだけ再確認

インデックス番号はループの中で「今どの位置か」を示す数字
0から始まるので、1番目は0番目と覚える
配列の長さより小さい番号だけ使う
特定のインデックス番号だけ特別処理も可能
forループだけでなくforEachでも使える

JavaScriptのループでインデックス番号を活用するポイントを初心者向けに解説！