目次
概要
プログラムにおいて「同じ処理を〇〇回繰り返したい」という場面で最も基本的に使われるのが for 文です。 カウンターとなる変数を用意し、その値が条件を満たす間だけブロック内の処理を実行し続けます。 本記事では、for 文の構文構造と、ループ変数の正しい扱い方、そして無限ループを防ぐための注意点を解説します。
仕様（入出力）
- 入力: 繰り返したい回数（最大値）
- 出力: 各ループごとのカウンター変数の値（コンソールログ）
基本の使い方
for 文は (初期化式; 条件式; 増減式) の3つの要素で構成されます。
- 初期化式: ループ開始時に1回だけ実行される（変数の宣言など）。
- 条件式: ループの各周の開始前に評価され、
trueなら実行、falseなら終了する。 - 増減式: ループの各周の終了後に実行される（変数の加算など）。
コード全文（HTML / JavaScript）
HTML (index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>for文ループデモ</title>
<script src="loop-demo.js" defer></script>
</head>
<body>
<div class="container">
<h1>Consoleを確認してください</h1>
<p>繰り返し処理の結果が出力されています。</p>
</div>
</body>
</html>
JavaScript (loop-demo.js)
0から始まり、5回処理を繰り返す基本的なパターンです。変数は慣例的に i（iterator）がよく使われます。
/**
* for文による繰り返し処理
* 0から4まで、合計5回ログを出力します。
*/
const runLoopDemo = () => {
console.log("--- ループ開始 ---");
// let i = 0; -> カウンター変数を0で初期化
// i < 5; -> iが5未満の間繰り返す（0, 1, 2, 3, 4）
// i++; -> 処理が終わるたびにiを1増やす
for (let i = 0; i < 5; i++) {
console.log(`現在のカウント: ${i} 回目`);
}
console.log("--- ループ終了 ---");
};
runLoopDemo();
カスタムポイント
- 開始値の変更:
let i = 1から始めれば、1, 2, 3… と自然数でカウントできます。その場合、終了条件もi <= 5（5以下）のように調整が必要です。 - 増減の幅（ステップ数）:
i++をi += 2に変更すると、0, 2, 4… のように2つ飛ばしでループさせることができます。 - 変数のスコープ:
letで宣言した変数iは、for文のブロック{}の中でのみ有効です。ループの外でiを使おうとするとエラーになりますが、これは変数の汚染を防ぐ良い挙動です。
注意点
- 無限ループ（Infinite Loop）: 条件式が永遠に
trueのまま（例:iが減らない、条件がi > -1など）になると、ブラウザがフリーズ（応答なし）します。増減式と条件式が正しく噛み合っているか必ず確認してください。 - オフバイワン（Off-by-one）エラー: 「10回繰り返したい」のに
i <= 10と書いてしまい、0〜10の「11回」実行してしまうミスです。 0から始めるなら<（未満）、1から始めるなら<=（以下）を使うのが基本パターンです。
応用
カウントダウン（逆順ループ）
初期値を大きくし、増減式で値を減らしていくことで、カウントダウン処理が作れます。
console.log("カウントダウンを開始します...");
// 10からスタートし、0より大きい間、1ずつ減らす
for (let i = 10; i > 0; i--) {
console.log(`${i}...`);
}
console.log("スタート！");
まとめ
for 文は「指定回数の繰り返し」を行うための最も基本的な構文です。
letを使って変数を宣言する。- 条件式（
<か<=か）を正確に設計する。 - 無限ループにならないよう注意する。
これらを意識して、配列の処理や連続データの生成に活用してください。
