JavaScriptのfor文とは？使い方と繰り返し処理の基本を初心者向けに解説

「同じ作業を100回繰り返すコードを書きたいけれど、100行も書くのは面倒……」
「大量のデータを一つずつチェックして、特定の条件に合うものだけを取り出したい」

プログラミングを学ぶ最大のメリットの一つは、人間がやると時間がかかる「単純な繰り返し作業」を、コンピュータに一瞬で肩代わりさせられることです。そのために欠かせない命令が、今回解説する「for文」です。

JavaScriptの繰り返し処理（ループ）とは？
JavaScriptのfor文の基本構造（初期化・条件・更新）
なぜカウンター変数は「i」なのか？
for文の中で変数「i」を活用する
応用：for文とif文の組み合わせ
初心者が最も注意すべき「無限ループ」の恐怖
JavaScriptのfor文と配列の組み合わせ
まとめ

JavaScriptの繰り返し処理（ループ）とは？

JavaScriptなどのプログラミングにおける「繰り返し処理（ループ）」とは、特定の条件を満たしている間、同じ命令を何度も実行することを指します。これを専門用語で「ループ（Loop）」と呼びます。

例えば、コンソールに「こんにちは」と5回表示させたい場合、これまでの知識では次のように書いていました。

console.log("こんにちは");
console.log("こんにちは");
console.log("こんにちは");
console.log("こんにちは");
console.log("こんにちは");

これくらいならコピー＆ペーストで済みますが、これが1,000回、10,000回となると現実的ではありません。また、回数が途中で変わる可能性がある場合、手書きでは対応しきれません。

そこで登場するのがfor文です。

JavaScriptのfor文の基本構造（初期化・条件・更新）

for文の書き方は一見複雑に見えますが、カッコ（）の中に「いつ初めて」「いつまで続けて」「一回ごとにどう変化させるか」という3つの設定を書くルールになっています。

for (初期化式; 条件式; 更新式) {
  // 繰り返したい処理
}

具体的に、５回「こんにちは」と表示するコードを見てみましょう。

for (let i = 0; i < 5; i++) {
  console.log("こんにちは");
}

それぞれのパーツには重要な役割があります。

初期化式（let i = 0）
「ループを何回目からスタートするか」を決めます。
ここではi という変数（カウンター）を作り、最初に0を入れています。プログラミングの世界では、数字を1ではなく0から数え始めるのが一般的です。
条件式（i < 5）
「いつまで繰り返すか」を決めます。
この条件がtrue（正しい）である間、ループは続きます。この例では「iが5より小さい間」繰り返すという意味になります。
更新式（i++）
「一回処理が終わるたびに、カウンターをどう変えるか」を決めます。
i++は「iに1を足す」という意味です（インクリメント）。これにより、処理が終わるたびにiが0 → 1 → 2 → 3 → 4と増えていき、最終的に5になった時点で条件式がfalseになり、ループが終了します。

なぜカウンター変数は「i」なのか？

for文のサンプルコードを見ると、必ずと言っていいほど変数 i が使われています。
これは「Index（インデックス：索引）や「Iteration（イテレーション：反復）」の頭文字をとったもので、プログラミング界の長年の慣習です。

数学の数式で「x」や「y」をよく使うのと同じようなもので、特別な意味はありません。しかし、他のエンジニアがコードを見たときに、「あ、これはループのカウンターだな」と一瞬で伝わるため、特に理由がない限り i を使うのがベストです。

もしループが二重になる場合は、アルファベット順で次の j や k が使われることもよくあります。

for文の中で変数「i」を活用する

for文のすごいところは、ただ繰り返すだけでなく、変化していくカウンター変数 i を処理の中で使える点です。

for (let i = 1; i <= 5; i++) {
  console.log(i + "回目の処理です");
}

このコードを実行すると、コンソールには次のように表示されます。

1.「1回目の処理です」
2.「2回目の処理です」
...（中略）
3.「5回目の処理です」

このように、ループの回数に応じて出力する内容を変えることができるため、名簿リストに番号を振ったり、計算を積み上げたりする際に非常に便利です。

応用：for文とif文の組み合わせ

別記事で紹介している「条件分岐（if文）」をループの中で使うと、さらに実用的なプログラムが作れます。

例：1から10までの数字のうち、偶数だけを表示する

for (let i = 1; i <= 10; i++) {
  if(i % 2 === 0) {
    console.log(i + "は偶数です");
  }
}

このプログラムの流れは以下の通りです。

1から10まで数字を一つずつチェックする
i % 2 === 0（2で割った余りが0、つまり偶数）かどうかをifで判定する
条件に当てはまった時だけ、コンソールに表示する

このように「大量のデータの中から、特定の条件に合うものだけを抽出する」という動きは、検索機能やフィルタリング機能の基本となります。

初心者が最も注意すべき「無限ループ」の恐怖

for文を書く際に、絶対に避けなければならないのが「無限ループ」です。

無限ループとは、終了条件がいつまでも満たされず、永遠に処理が続いてしまう状態のことです。

// 危険な例：iが増えないので、ずっと0のまま
for (let i = 0; i < 5; ) {
  console.log("止まりません!");
}

もし更新式（i++）を書き忘れたり、条件式を間違えて「ずっと正しい（true）」状態にしてしまうと、パソコンのCPUがフル稼働し、ブラウザがフリーズして動かなくなります。

万が一無限ループになってしまったら、落ち着いてブラウザのタブを閉じるか、タスクマネージャーでブラウザを強制終了しましょう。コードを書くときは、「このループはいつ終わるのか？」を常に確認することが大切です。

JavaScriptのfor文と配列の組み合わせ

実際の開発現場では、for文が最も真価を発揮するのは「配列（Array）」というデータの束と一緒に使う場面です。

配列とは、複数のデータを一つの変数にまとめて入れておける「仕切りのある長い箱」のようなものです。詳しくは[別記事：]で解説していますが、for文と組み合わせると次のように魔法のような処理が可能になります。

例えば、果物の名前が入ったリスト（配列）から、一つずつ名前を取り出して表示してみましょう。

const fruits = ["りんご", "バナナ", "オレンジ", "ぶどう"];

// fruits.lengthは「リストの数（4つ）」を自動で数えてくれる便利な命令です
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i] + "を食べました");
}

このコードのポイントは、条件式にfruits.lengthを使っている点です。これにより、リストの中身が4個でも100個でも、コードを書き換えることなく、すべてのデータを順番に処理できます。

Webサイトの「最新記事一覧」や、ショッピングサイトの「検索結果」など、同じ形のデータが並んでいる場所の裏側では、ほぼ間違いなくこの「for文 x 配列」の組み合わせが動いています。