繰り返し(for文)

このレッスンでは、JavaScriptのfor文を使った繰り返し処理の書き方を学び、同じ処理を効率よく何度も実行できるようになることを目標にします。「JavaScript for文 書き方」「JavaScript ループ 初心者」で調べている方向けの内容です。

同じ処理を何度も行いたいときはループ(繰り返し)を使います。for (初期値; 条件; 更新) { 処理 }という3つの要素を指定して繰り返すのがfor文です。同じコードを100回コピーする必要がなく、たった数行で大量の処理を表現できるのがループの威力です。条件を満たさなくなった時点でループが終了します。

サンプルコードではlet i = 1から始めてi <= 5の間、i++で1ずつ増やしながら5回繰り返しています。for文は配列の中身を1つずつ処理したいときにも頻繁に使われ、この後のレッスンで学ぶ配列操作の土台にもなる、非常に重要な構文です。

よくあるつまずきが、更新部分(i++)を書き忘れたり条件を間違えたりして、ループが永遠に終わらない「無限ループ」になってしまうケースです。ブラウザが固まったように見えたら、まず条件と更新部分を見直しましょう。ループの回数を1回間違える「オフバイワンエラー」もよくあるミスです。

実際の開発では、配列に入った商品一覧を1件ずつ画面に表示したり、決まった回数だけ通信を試みたりと、for文は非常に幅広い場面で使われます。ループの中身がどんな処理をするかを設計する力は、実務のプログラミングで欠かせない基礎スキルです。

for文は配列と組み合わせてfor (let i = 0; i < fruits.length; i++)のように書くことも多く、配列の要素数ぶんだけ繰り返す、という定番パターンとしてよく登場します。ループの終了条件を配列の長さに合わせておけば、要素数が変わっても自動的に正しい回数だけ処理されます。

繰り返す回数を変数で指定すれば、for (let i = 1; i <= count; i++)のように柔軟なループも作れます。決まった固定回数だけでなく、状況に応じて回数が変わるループを書けるようになると、応用範囲が大きく広がります。