【JS第5回】繰り返し処理:for文とwhile文
人間が苦手とする「単純な反復作業」をコンピュータに超高速で実行させましょう。回数指定のループを得意とするfor文と、条件指定のループを得意とするwhile文の基本構造を習得します。
1. 指定回数繰り返す for 文
JavaScriptで最もよく使われるループ処理が for(フォー)文 です。「10回処理を繰り返す」といったように、回数を指定して実行したい場合に非常に役立ちます。
for文は、丸括弧の中にセミコロン `;` で区切られた以下の3つの式を記述します。
for (初期化式; 条件式; 変化式) { /* 繰り返したい処理 */ }
- 初期化式(カウンタの作成): ループの開始前に1度だけ実行されます。一般的に
let i = 0のようにカウンタ変数 `i` を宣言します。 - 条件式(継続の判定): 毎ループの実行前に判定されます。この式の結果が `true` の間、ループ処理が走り続けます(例:
i < 5)。 - 変化式(カウンタの更新): ループの処理が1回終わるたびに自動実行され、カウンタ変数を増やします(例: インクリメント
i++➔ `i`を1ずつ増やす)。
2. 条件が成立している間ループする while 文
「〇〇回繰り返す」というカウンタ管理ではなく、**「特定の条件が満たされている限り、何回になるか分からないが繰り返し続ける」**という処理には while(ワイル)文 が適しています。
while文の構造は極めてシンプルで、括弧の中に「条件式」のみを書きます。
while (条件式) { /* 条件式が true の間、実行され続ける処理 */ }
3. 恐怖の「無限ループ」とその回避ルール
ループ処理を記述する際、プログラマーが最も注意しなければならないのが**「無限ループ(Infinite Loop)」**です。
条件式がいつまでも `false` にならない設計をしてしまうと、ブラウザは永遠にループを実行し続け、メモリを限界まで使い果たして画面が完全にフリーズ(強制終了)します。
🚨 無限ループを防ぐ鉄則
・while文を使う場合は、波括弧 `{ }` の内部で、条件式の基準となる変数を**必ず変化させる処理**(例: 変数にデータを加算したり、条件フラグを切り替えたりする記述)を書き忘れないようにしてください。
・意図せず無限ループに入ってブラウザが固まった場合は、タブを閉じるかタスクマネージャーからブラウザプロセスを強制終了してください。
4. ループ処理を書いてみよう
以下のコードは、for文による基本的な5回の出力処理と、while文による値の減算条件処理の例です。
/* ① for文による5回のリピート */ for (let i = 0; i < 5; i++) { console.log(`forループ: ${i + 1}回目の処理`); } /* ② while文による条件処理 */ let hp = 30; while (hp > 0) { console.log(`キャラクター活動中(残りHP: ${hp})`); hp -= 10; /* hpを10減算して条件判定へ(無限ループ防止) */ } console.log("ゲームオーバー");
for文などのループ内でカウンタ変数の数値を1つずつ増やしたい場合に使用する、変数「i」の後ろに付与する記述(インクリメント演算子)の書き方は何でしょうか?
※この問題の解答と解説は、ページ最下部(まとめの前)に掲載しています。
5. まとめと次回予告
第5回の講義はお疲れ様でした!今回の重要ポイントを振り返りましょう。
- `for` 文は「初期化・条件・変化」を1箇所にまとめ、指定回数ループさせるのが得意。
- `while` 文は条件式のみを記述し、条件が成立している間ループし続ける。
- ループ終了条件の設計ミスによる「無限ループ」は、フリーズを引き起こすため細心の注意が必要。
次回(第6回)は、コードを部品化して再利用しやすくする極めて重要な機能である「関数の基本:処理の共通化と呼び出し」を学び、引数と戻り値の仕組みを理解します。お楽しみに!
📖 JavaScriptの基礎を全10回でマスターする
🔑 第5回 理解度チェックの解答と解説
【解説】
正解は **`i++`** (プラス記号2つ)です。 `i++` は `i = i + 1` と同じ意味を持ち、変数の値を1だけ増加させる(インクリメントする)ための便利な短縮記法です。for文の「変化式」の部分でカウンタを1周ごとに加算していくため、ほぼ例外なくこの記述方法がセットで使用されます。