JavaScriptのループ処理入門【for・while解説】

JavaScript ループとは？

「同じ処理を10回繰り返したい」「配列の全要素に処理をしたい」——そんなときに使うのが ループ（繰り返し処理） です。

JavaScript ループには主に for 文と while 文があります。この記事では、それぞれの書き方と使い分けを初心者向けにわかりやすく解説します。

for文：回数が決まっているとき

for 文は「〇回繰り返す」という回数が決まっているときに使います。

// 1から5まで表示する
for (let i = 1; i <= 5; i++) {
  console.log(i);
}
// 1, 2, 3, 4, 5

for (初期化; 条件; 更新) の3つの部分で構成されます。

• 初期化：let i = 1（カウンター変数を作る）
• 条件：i <= 5（この条件が true の間繰り返す）
• 更新：i++（1回ごとにiを1増やす）

配列をfor文でループ

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

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

📖 詳しくはfetch入門で解説しています。

while文：条件が満たされる間繰り返す

while 文は「条件が true の間ずっと繰り返す」ときに使います。

let count = 0;

while (count < 3) {
  console.log('カウント：' + count);
  count++;
}
// カウント：0, カウント：1, カウント：2

for...of：配列をシンプルにループ

for...of を使うと、配列の要素を直接取り出してループできます。インデックスが不要なときに便利です。

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

for (const fruit of fruits) {
  console.log(fruit);
}
// りんご, バナナ, みかん

👉 JavaScript問題ドリルも参考にしてください。

ループの使い分け

🔥 イベント処理入門で実践してみましょう。

ループの使い分け

JavaScriptにはいくつかのループ（繰り返し）の書き方があります。場面に応じて使い分けましょう。

forループ

回数が決まっているときに使います。「10回繰り返す」「配列の要素を1つずつ処理する」といった場面に最適です。カウンター変数（iなど）を使って、何回目の繰り返しかを管理します。

whileループ

回数が決まっていないときに使います。「条件を満たすまで繰り返す」という場面に向いています。たとえば「ユーザーが正しい答えを入力するまで質問を繰り返す」といった処理に使えます。

for...ofループ

配列の要素を1つずつ取り出すときに使います。forループよりもシンプルに書けます。カウンター変数が不要で、直接要素を受け取れるのが特徴です。

forEachメソッド

配列のメソッドとして使います。for...ofと似ていますが、関数を渡して処理を書きます。breakで途中で抜けることができない点に注意してください。

迷ったらforループを使えば大丈夫です。慣れてきたらfor...ofやforEachも試してみましょう。

ループでよくあるミス

ミス1：無限ループになる

条件が永遠にtrueのままだと、ループが終わりません。ブラウザがフリーズしてしまいます。whileループを使うときは、条件がいつかfalseになることを必ず確認しましょう。カウンター変数を更新し忘れるのが一番多い原因です。

ミス2：配列の範囲外にアクセスする

forループで「i <= 配列.length」と書くと、最後の1回で範囲外にアクセスしてしまいます。正しくは「i < 配列.length」です。等号をつけるかどうかで結果が変わるので注意しましょう。

ミス3：ループの中で重い処理をする

ループの中でDOM操作（画面の更新）を何度も行うと、ページが遅くなります。ループの中では計算だけを行い、画面の更新はループの外でまとめて行うのが効率的です。

ミス4：breakとcontinueを混同する

breakはループ全体を終了します。continueは今の回だけスキップして、次の回に進みます。「この条件のときだけ処理を飛ばしたい」ならcontinue、「この条件になったらループを止めたい」ならbreakを使います。

ループは最初は難しく感じるかもしれません。でも、プログラミングで最もよく使う機能の一つです。簡単な例から始めて、少しずつ複雑な処理に挑戦していきましょう。「1から10まで足す」「配列の中から条件に合うものを探す」といった練習がおすすめです。

ループを使いこなせるようになると、大量のデータを一瞬で処理できるようになります。手作業では何時間もかかることが、ループを使えば数秒で終わります。これがプログラミングの力です。繰り返し処理をマスターして、効率的なコードを書けるようになりましょう。

まとめ

JavaScriptの基礎はJavaScript入門で復習できます。

あわせて読みたい記事

• JavaScriptとは？初心者向け解説 — JS基礎に戻る
• JavaScript配列入門 — 配列のループ処理
• JavaScript変数入門 — ループカウンタの変数
• JavaScript関数入門 — ループ処理を関数にまとめる
• JavaScript DOM操作入門 — ループでDOM要素を生成
• JavaScript Math入門 — ループ内での計算