【JavaScript】while文の基本と初心者でも分かるbreakとcontinueの使いこなし方

本記事は、「そもそも何故、同じ繰り返し処理なのでfor文やforEachメソッドと何か違うんだろうと」と思いつつ

UIHACK 編集長

・どんな時にwhile文を実行するのか
・while文の書き方
・while文とdo while文の違い

上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します。

この記事では、JavaScriptのwhile文を使って、繰り返し処理する方法を学びましょう。基本的な書き方や「break」「continue」「while文」と「do while文」についても解説するので、あなたもプロの開発者に一歩近づくこと間違いなしです！

プログラミング未経験の方でも、読みやすい内容なので、本記事を読んで未来に向けて、一歩を踏み出しましょう。

それでは、ご一読ください！

指定した回数だけ繰り返し処理を行う場合は「for文」が便利です。

2023年7月14日 【JavaScript】for文の繰り返し処理と無限ループの回避方法

配列の要素に対して順番に処理を行いたい場合は「forEachメソッド」が便利です。

2023年7月15日 JavaScriptのforEachメソッドで配列要素の処理を簡単に！

はじめてのJavaScript while文とは？

特定の条件が真の間、繰り返し処理を行う制御構文です。と言っても分かりにくいですよね！笑

while文は、コンピューターに「ちょっと待っててね！」って言っているようなものなんだよ。例えば、お菓子の袋からクッキーを取るゲームをイメージしてみよう。

お菓子が残っている限り、つまり条件が「お菓子がある」っていうのが真の場合、ゲームを続けれるんだ。でも、お菓子がなくなったら、条件が「お菓子がない」って偽になって、ゲームは終わるんだ。そうしたら、次の楽しいゲームに進むんだよ。

習うより慣れろと昔から言うし実際に、コードを見てみよう！

while文の具体的な例

let count = 1;
while (count <= 10) {
    console.log(count);
    count++;
}

UIHACK 編集長

解説

このプログラムでは、count変数が1から10までの範囲で条件式を満たしている間、while文のループブロック内の処理が実行されます。countの値が1から順番に増えていき、10まで出力されます。

while文の実行結果

1
2
3
4
5
6
7
8
9
10

JavaScript while文で処理を中断するbreakの書き方

再度、while文の説明と改たに繰り返し処理を中断するためのbreak文について説明します。

while文は、ある条件が満たされている間、繰り返し処理を行うための命令です。例えば、「ある数値が10未満の間、その数値を表示し続ける」といったことができます。

break文は、繰り返し処理を中断するための命令です。ある条件が満たされたら、それ以上繰り返さないようにできます。

UIHACK 編集長

以下はwhile文とbreak文を使った例です。

let count = 1;

while (count <= 10) {
  console.log(count); // countの値を表示

  if (count === 5) {
    break; // countが5になったら繰り返しを中断
  }

  count++; // countを1ずつ増やす
}

この例では、countという変数を使って1から10までの数字を表示するループ処理を実装しています。しかし、countが5になると、if文の条件が真になるため、break文が実行されてループが中断されます。

break文の実行結果

1
2
3
4
5

countが5になったところで中断されているので、6から10の数字は表示されません。

このように、while文とbreak文を使うことで、ある条件が満たされたときに処理を中断することができます。これがbreak文の基本的な使い方です。

JavaScript while文の中での処理をスキップするcontinueの使い方

JavaScriptのwhile文で処理をスキップするためには、continue文を使用します。continue文は、ループの途中である条件を満たした場合に、そのループのイテレーション（繰り返し処理の1回分）をスキップして、次のイテレーションに進むためのものです。

UIHACK 編集長

以下はwhile文とcontinue文を使った例です。

let i = 0;

while (i < 10) {
  i++;

  if (i === 5) {
    continue; // iが5の場合、このイテレーションをスキップして次のイテレーションに進む
  }

  console.log(i);
}

この例では、iが0からスタートして、whileの条件であるi < 10が満たされる限り、ループが実行されます。しかし、if文の条件 i === 5が真となる場合、continue文が実行されて、その時点のループの処理をスキップして次のイテレーションに進みます。

continue文の実行結果

1
2
3
4
6
7
8
9
10

UIHACK 編集長

解説

ループの中でiが5になったとき、continue文が実行されて5がスキップされていることがわかります。

つまり、continue文を使うと、ある条件を満たした場合に、その時点での処理をスキップして、次の繰り返し処理に進むことができます。

JavaScriptのwhile文で避けるべき無限ループとその対策

JavaScriptのwhile文を使う際に避けるべき無限ループと、それに対する対策について説明します。

UIHACK 編集長

無限ループの対策として以下の2つの方法があります。

対策その１：終了条件の設定

無限ループを避けるためには、「終わりがあるよ」という条件をちゃんと決めることが大切です。例えば、「1から10まで数を数える」と決めたら、10まで数え終わったら止めるようにします。これで、コンピューターも安心して他の仕事をすることができます。

例えば、1から10までの数値を表示するループでは、次のように終了条件を設定できます。

let i = 1;

while (i <= 10) {
  console.log(i);
  i++;
}

UIHACK 編集長

解説

この例では、iが10以下の間はループが実行されますが、iが11になると終了条件が満たされてループが終了します。

対策その2：最大回数を制限する保護用のカウンターの設定

念のために「ずっと数えるのは1000回までにしよう」と決めると、1000回数え終わったら終わりになります。

終了条件を確実に設定することが難しい場合に有用です。

let i = 0;
let maxIterations = 1000;

while (i < maxIterations) {
  // 何らかの処理
  i++;
}

UIHACK 編集長

解説

この例では、カウンターiがmaxIterations（ここでは1000）未満の間、ループが実行されます。カウンターの値がmaxIterationsに達したときにループが終了します。

JavaScriptのwhile文とdo while文の違いを理解しよう

JavaScriptのwhile文とdo…while文は、両方ともループを作成するための構文ですが、動作において重要な違いがあります。

while文

while文は、ループの最初に条件をチェックし、条件が真（true）である限り、ループの中の処理を繰り返します。もし最初から条件が偽（false）であれば、一度もループの中の処理を実行しません。

do…while文

do…while文は、ループの中の処理を実行した後に条件をチェックします。条件が真である限り、ループは繰り返されます。このため、do…while文は最低でも1回はループの中の処理を実行します。

while文とdo while文の違いの例

以下の例では、while文とdo…while文を使って、条件が最初から偽（false）の場合にどのように動作するかを示します。

let x = 5;

// while文の場合
while (x > 10) {
  console.log("This won't be printed."); // 出力されない
}

// do...while文の場合
do {
  console.log("This will be printed at least once."); // 1回は出力される
} while (x > 10);

UIHACK 編集長

解説

この例では、xの値が5なので、while文では条件が最初から偽であり、ループの中の処理は一度も実行されません。しかし、do…while文では、ループの中の処理が最低でも1回は実行されます。

したがって、while文とdo…while文の違いは、条件のチェックがループの最初で行われるか、ループの中の処理の後で行われるかという点です。

while文とdo while文の違いを表にまとめました。

UIHACK 編集長

解説

だから、while文とdo…while文の違いは、条件を確認する順番なんだよ！覚えておいてね！

JavaScriptのwhile文の結論とまとめ

UIHACK 編集長

今回は、JavaScriptのwhile文で繰り返しする方法についてご紹介しました。
それでは、最後にもう一度、おさらいしましょう。

もう一度、最初から「JavaScript while文とは？」を読む↑

JavaScriptの他の基本的な変数の使い方も学びたい方はぜひ以下の記事もご覧ください。

2022年8月17日 【Javascript】初心者向けに変数の意味と3つ(var・let・const)の宣言の使い分け方法を解説！

JavaScriptのみで、アコーディオンメニューを実装したいあなたに！

2023年7月12日 【JavaScript】アコーディオンメニューを実装！クリックでスムーズな開閉効果を実現！【jQuery不要】