JavaScriptのループ処理とは？基本構文と使い分けを解説

1. ループ処理とは？

1. ループ処理とは？

ループ処理とは、同じコード（命令）を何回もくり返し実行するための仕組みです。プログラミングでは「同じような処理を何度も行いたい」という場面がよくあり、そのたびに同じコードを書くのは大変で、ミスの原因にもなります。ループ処理を使うことで、処理の回数や条件をまとめて管理でき、コードをすっきり書くことができます。

例えば、「1から5までの数字を順番に画面に表示したい」「配列に入っているデータを先頭から順に確認したい」といった場合に、ループ処理はとても役立ちます。プログラミング未経験者の方でも、考え方自体は「同じ作業を繰り返す」という日常的な感覚に近いため、比較的理解しやすいのが特徴です。

JavaScriptでは主に以下のようなループ構文が用意されており、目的に応じて使い分けます。

• for文：あらかじめ回数が決まっている処理をくり返すときに使う
• while文：条件が成り立っている間、処理を続けたいときに使う
• do...while文：必ず一度は処理を行い、その後に条件を確認したいときに使う
• for...of文：配列などのデータを一つずつ順番に取り出して処理したいときに使う

まずは「同じ処理をまとめて実行できる仕組みがループ処理である」という点をしっかり押さえておくことが大切です。

// 1から3までの数字を順番に表示する簡単な例
for (let i = 1; i <= 3; i++) {
  console.log(i);
}

このサンプルでは、「数字を表示する」という同じ処理を、ループ処理によって自動的にくり返しています。こうした基本的な考え方が、後のJavaScript学習の土台になります。

2. for文の基本構文と使い方

2. for文の基本構文と使い方

for文は「決まった回数だけ処理をくり返したい」ときに便利なループです。例えば「同じメッセージを5回表示する」「0から順番に番号を付けて処理する」といった場面でよく使われます。書き方は決まっていて、開始の値・続ける条件・増やし方の3つをまとめて書けるのが特徴です。

次の例では、変数iを0からスタートし、iが5より小さい間だけ処理を行い、1回ごとにiを1ずつ増やしています。まずは「数字が増えながら同じ処理が動く」という感覚をつかむのがポイントです。

for (let i = 0; i < 5; i++) {
  console.log("繰り返し：" + i);
}

このコードは、iが0、1、2、3、4の順に変わりながらconsole.log()が実行されます。つまり、0〜4までが表示されます。「何回くり返したいか」がはっきりしている場合は、for文がいちばん分かりやすい選択になります。

繰り返し：0
繰り返し：1
繰り返し：2
繰り返し：3
繰り返し：4

もう少し身近な例として、「1から3まで数える」サンプルも見てみましょう。条件の書き方を変えるだけで、スタートの数字や終わりの数字を自由に調整できます。

// 1から3まで順番に表示する例
for (let i = 1; i <= 3; i++) {
  console.log("カウント：" + i);
}

3. while文の基本構文と使い方

3. while文の基本構文と使い方

while文は、指定した条件がtrue（正しい）である間、同じ処理をずっとくり返すループです。for文のように「何回」と回数を決めるというより、条件が満たされている間だけ続けたいときに向いています。例えば「カウントが一定の数になるまで続ける」「入力が正しくなるまで待つ」といった場面でよく使われます。

書き方のポイントは、ループの外で準備した変数を、ループの中で少しずつ変化させることです。変数が変わらないと条件がずっと同じままになり、処理が終わらなくなることがあります。まずは、条件と変数の動きがセットになっていることを意識すると理解しやすいです。

let i = 0;
while (i < 3) {
  console.log("現在の値：" + i);
  i++;
}

現在の値：0
現在の値：1
現在の値：2

この例では、iが3より小さい間だけ処理が続きます。i++でiを1ずつ増やしているため、いずれ条件が成り立たなくなり、ループが自然に終了します。また、while文は最初に条件を確認してから処理を始めるため、最初から条件がfalseなら一度も実行されません。つまり「条件が合っているときだけ実行したい」場面で使いやすいループです。

// 条件が最初からfalseの例（この場合は何も表示されない）
let j = 5;
while (j < 3) {
  console.log("表示されない：" + j);
  j++;
}

4. do...while文の基本構文と使い方

4. do...while文の基本構文と使い方

do...while文は、必ず最初に一度だけ処理を行い、そのあとで条件を確認して、条件がtrueであればくり返します。

let i = 0;
do {
  console.log("実行中：" + i);
  i++;
} while (i < 2);

実行中：0
実行中：1

条件に関係なく、一回は必ず実行されるという特徴があります。

5. for...of文で配列をくり返す

5. for...of文で配列をくり返す

for...of文は、配列（データの集まり）を1つずつ取り出して使うときに便利です。

const fruits = ["りんご", "バナナ", "みかん"];
for (const fruit of fruits) {
  console.log("フルーツ：" + fruit);
}

フルーツ：りんご
フルーツ：バナナ
フルーツ：みかん

for...ofは、配列の中身を1つずつ取り出して、変数fruitに代入してくれます。配列を使うときには非常にわかりやすい書き方です。

6. ループを使うときの注意点

6. ループを使うときの注意点

ループを使うときに気をつけたいのは「無限ループ」です。無限ループとは、終わりがなくずっと動き続けるループのことです。

次のコードのように、終了条件を忘れてしまうと、止まらないループになります。

let i = 0;
while (i < 5) {
  console.log(i);
  // i++ がないと無限ループになる
}

プログラムが固まったり、ブラウザが応答しなくなったりするので、条件やカウンターの増減をしっかり確認しましょう。

7. それぞれのループ処理の使い分け

7. それぞれのループ処理の使い分け

ループ処理にはいくつかの種類がありますが、目的によって使い分けましょう。

• for文：回数が決まっているとき（例：0〜9まで）
• while文：条件が変化するまで繰り返したいとき
• do...while文：最初の1回は必ず処理したいとき
• for...of文：配列の中身を一つずつ取り出して使いたいとき

それぞれの特徴を理解して、場面に合ったループを選びましょう。

まとめ

まとめ

ループ処理を理解することで広がる考え方

今回の記事では、JavaScriptにおけるループ処理の基本から、それぞれの構文の特徴や使い分けについて学んできました。ループ処理とは、同じ処理を何度も実行するための仕組みであり、プログラムを効率よく、読みやすく書くために欠かせない考え方です。最初は一行ずつ同じ処理を書いてしまいがちですが、ループを使うことで記述量を減らし、ミスを防ぎ、保守しやすいコードを書くことができるようになります。

for文は、回数がはっきり決まっている処理に向いており、学習の初期段階でも理解しやすい構文です。while文は、条件が成り立つ間ずっと処理を続けるため、回数が事前に決まっていない場合に力を発揮します。do...while文は、必ず一度は処理を行うという特徴があり、ユーザー入力の確認など、最初の実行が必要な場面で役立ちます。そしてfor...of文は、配列の中身を順番に扱う際にとても直感的で、実際の開発でもよく使われる構文です。

ループ処理を学ぶことは、単に文法を覚えることではありません。どの処理を繰り返したいのか、いつ処理を終わらせるのか、どのデータを対象にするのかといった、プログラム全体の流れを考える力が身につきます。この考え方は、条件分岐や配列操作、関数の設計など、ほかのJavaScriptの学習内容にも深くつながっています。

ループ処理の注意点を振り返る

ループ処理で特に注意したいのが無限ループです。終了条件を正しく設定しなかったり、カウンターの値を更新し忘れたりすると、処理が終わらず、ブラウザや実行環境に大きな負荷をかけてしまいます。初心者のうちは、なぜ処理が止まらないのか分からず戸惑うこともありますが、条件式と変数の変化を落ち着いて確認することで原因を見つけることができます。

また、ループの中で何をしているのかを意識することも重要です。表示処理なのか、計算なのか、配列への追加なのかによって、適切なループ構文は変わります。使い分けを意識することで、他の人が読んでも理解しやすいコードになり、自分自身が後から見返したときにも内容を思い出しやすくなります。

サンプルプログラムで考え方を整理する

for (let i = 0; i < 3; i++) {
  console.log("学習中の回数：" + i);
}

このようなシンプルなループでも、回数を管理する変数、条件式、処理内容という三つの要素が組み合わさって動いています。基本的な形を何度も確認することで、複雑な処理に応用できる土台が作られます。