JavaScriptのfor文とは？繰り返し処理の基本から配列操作まで解説

「同じような処理を100回書きたいけれど、コピペするのは面倒……」
「大量のデータを順番に画面に表示させたい」

そんな時に欠かせないのが、JavaScriptの「for文（繰り返し処理）」です。繰り返しをマスターすれば、10行必要だったコードをたった3行にまとめ、人間の手では不可能な速度で正確に処理を実行できるようになります。

本記事では、for文の基本構文から、実務で最も多用する「配列」との組み合わせ、そして「無限ループ」を避けるためのプロの注意点まで、初心者向けに分かりやすく解説します。

繰り返し処理（ループ）とは？「自動化」の第一歩
1. 日常生活で例えてみる
2. なぜfor文を使うのか？
for文の基本構文：3つのパーツを理解しよう
1. 3つのパーツの正体
2. 実行の流れ（シミュレーション）
実務の定番：for文と「配列」を組み合わせる
1. 全ての要素を順番に取り出す
2. なぜ 0 から始めるのか？
ループを制御する：breakとcontinue
1. break（途中で強制終了）
2. continue（その回だけスキップ）
初心者がハマる「無限ループ」の恐怖
1. なぜ無限ループは危険なのか？
2. よくある原因
さらにスッキリ！モダンな書き方（for…of）
1. for…of の書き方
2. 使い分けの基準
どっちを使うべき？for文とforEachの違い
まとめ：繰り返しは「効率化」の武器

繰り返し処理（ループ）とは？「自動化」の第一歩

繰り返し処理とは、「特定の条件を満たしている間、同じ命令を何度も実行する」仕組みのことです。

日常生活で例えてみる

もし筋トレをするなら、10回カウントが終わるまで腹筋を繰り返す。
もし住所録を作るなら、名簿の最後の人まで入力を繰り返す。

プログラムの世界でも、「データがなくなるまで」「指定した回数に達するまで」といった具合に、反復作業をコンピューターに任せます。

なぜfor文を使うのか？

同じコードを何度もコピペすると、後で「1箇所だけ修正したい」と思った時に、100箇所すべて直さなければなりません。for文を使えば、修正は1箇所で済み、コードもスッキリして読みやすくなります（保守性の向上）。

for文の基本構文：3つのパーツを理解しよう

for文のカッコ内には、セミコロン ; で区切られた3つの式を書きます。ここが初心者の最初のつまづきポイントですが、役割を分ければ簡単です。

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

3つのパーツの正体

初期化式：カウント用の変数（主に i ）を準備します。例：let i = 0;
条件式：「いつまで続けるか」を決めます。ここが true の間だけ実行されます。例： i < 10;
更新式：1回処理が終わるたびに、カウントをどう変えるか決めます。例：i++（1ずつ増やす）

実行の流れ（シミュレーション）

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

i = 0 でスタート。0 < 3 は正しい（true）ので実行。 → 「0回目の処理です」
i++ で i = 1 に。1 < 3 は正しいので実行。 → 「1回目の処理です」
i++ で i = 2 に。2 < 3 は正しいので実行。 → 「2回目の処理です」
i++ で i = 3 に。3 < 3 は正しくない（false）ので終了。

実務の定番：for文と「配列」を組み合わせる

実際の現場でfor文を単体で使うことは少なく、ほとんどの場合、「配列（データのリスト）」と一緒に使います。

全ての要素を順番に取り出す

配列の長さ（.length）を条件式に使うことで、データの数に関わらず全ての要素を処理できます。

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

for (let i = 0; i < fruits.length; i++) {
  console.log("今日のデザートは" + fruits[i] + "です");
}

なぜ 0 から始めるのか？

配列のインデックス（番号）は 0 から始まります。そのため、初期化式を let i = 0; とし、条件式を i < 配列の長さとするのが、JavaScriptにおける「美しい定石」です。

管理人

たまに i <= fruis.length と書いてしまう人がいますが、これだと最後の一つ先まで探してしまい underfined（中身なし）というエラーの原因になってしまいます。

【関連記事】

JavaScriptの配列とは？複数のデータをまとめて扱う方法を初心者向けに解説

JavaScriptの配列とは？複数のデータをまとめて扱う方法を初心者向けに解説。配列の作り方、インデックスによる取り出し方、lengthでの要素数の取得、pushでの追加、for文との組み合わせまで基本をわかりやすく説明します。

ループを制御する：breakとcontinue

「ある条件の時だけ途中でやめたい」「特定の回だけスキップしたい」という時に便利な命令です。

break（途中で強制終了）

for (let i = 1; i <= 10; i++) {
  if (i === 5) break; // 5になったら即終了
  console.log(i); // 1, 2, 3, 4 だけ表示される
}

continue（その回だけスキップ）

for (let i = 1; i <= 5; i++) {
  if (i === 3) continue; // 3の時だけ処理を飛ばして次へ
  console.log(i); // 1, 2, 4, 5 が表示される
}

初心者がハマる「無限ループ」の恐怖

for文の条件式を間違えると、プログラムが永遠に終わらない「無限ループ」に陥ります。

なぜ無限ループは危険なのか？

コンピューターのメモリやCPUを使い切り、ブラウザがフリーズしたり、PCが重くなったりします。最悪の場合、ユーザーのブラウザをクラッシュさせてしまいます。

よくある原因

更新式を書き忘れた（i がずっと増えない）
条件式が常に true になる設定になっている（例：i >= 0 で i++ をし続ける）

さらにスッキリ！モダンな書き方（for…of）

現在のJavaScript（ES6以降）では、単純に配列の中身を取り出すだけなら、より読みやすい 「for…of 文」 が推奨されます。

for…of の書き方

const colors = ["赤", "青", "緑"];

for (const color of colors) {
  console.log(color); // 1つずつの要素が color に入る
}

インデックス（i）を管理しなくて良いため、書き間違い（タイプミス）によるバグが劇的に減ります。

使い分けの基準

通常のfor文：「何回繰り返すか」の数字が必要な時や、特定の番号だけ処理したい時。
for…of文：配列のすべての要素をシンプルに処理したい時。

どっちを使うべき？for文とforEachの違い

JavaScriptには for 文のほかに、配列専用の繰り返しメソッドである forEach が存在します。「どちらを使っても同じ結果になるなら、どう使い分ければいいの？」と迷う方も多いでしょう。

プロの現場での判断基準を整理しました。

構文の違い

for 文は「命令文」として記述しますが、forEach は配列に備わっている「メソッド」として呼び出します。

for文：for （let i = 0; i < arr.length; i++）{ … }
forEach：arr.forEach((element) => { ... });

最大の違いは「制御」と「スコープ」

一見似ていますが、以下の2点で決定的な違いがあります。

比較項目	for文	forEach
中断（break）	可能。特定の条件でループを止められる	不可能。最後まで止まらずに回る
スキップ（continue）	可能。その回だけ飛ばせる	不可能。（returnで代用は可能だが複雑）
処理速度	わずかに高速（大規模な計算向き）	わずかに低速だが、気にするレベルではない
可読性	記述量が多く、 i の管理が必要	スッキリ書けて、コードが読みやすい

プロはどう使い分ける？

結論から言うと、「基本は forEach を使い、特殊な事情があるときだけ for 文を使う」のが現代のトレンドです。

forEach を選ぶとき: 配列の全要素に対して、一律で同じ処理（画面表示など）をしたいとき。インデックス（i）の書き間違いを防げるため、バグが少なくなります。
for 文を選ぶとき: 「目当てのデータが見つかったらすぐにループを終わらせたい（break）」ときや、「特定の範囲（2番目〜5番目など）だけを回したい」ときです。

管理人

迷ったらまずはforEachで書けないか考えてみましょう。コードをシンプルに保つことは、自分だけでなくチームメンバーの時間を守ることにも繋がりますよ！

【関連記事】