JavaScriptのwhile文のポイント3つ｜ループの処理方法も解説

システム
エンジニア

JavaScriptのwhile文について教えてください。

プロジェクト
マネージャー

JavaScriptのwhile文のポイントを紹介します。

JavaScriptの「while文」とは？

今回紹介するwhile文はループ処理を記述するための基本構文の1つでJavaScriptに限らず多くのプログラム言語で利用できます。

なお、JavaScriptではループ処理を記述する際にfor文とwhile文が使えますが、範囲がある繰り返しならfor文を、範囲が無いループ処理ではwhile文を利用するのが一般的です。

JavaScriptの「while文」のポイント3つ

JavaScriptに限らずwhile文で繰り返し処理を作る場合、条件式の作り方や繰り返しの終了条件など、注意する点が幾つかあります。今回は特に注意しないといけない3つのポイントについて紹介します。

1：基本構文

while文の基本構文は、引数として()内に条件式を指定し、続けて繰り返す処理を{}で囲ったブロックの中に記述します。なおwhile文は条件式を評価してtrueの場合にブロック内の処理を繰り返し、falseの場合に処理を中断します。

while文の基本構文

while (条件式) {
繰り返し処理;
}

なお、繰り返し処理の命令が1だけであれば、ブロックを表す{}を省略することが可能です。

while文の基本構文(ブロックを省略した場合)

while(条件式) 繰り返し処理;

2：変数の宣言はwhile文外で行う

JavaScriptの繰り返し処理で使われるfor文の条件に使われる変数は、for文の引数の中に宣言することが可能です。しかし、while文では引数の中で変数の宣言ができません。while文の条件式に使用する変数は、while文の外で実行する前に宣言します。

while文の条件式に変数を使った例

またfunctionの戻り値をtrueまたはfalseにすることで、条件式にfunctionを指定することも可能です。

whileの条件式にfunctionを指定した例

3：条件式の変数の変化で無限ループを防ぐ

while文は条件式がfalseの場合に繰り返し処理を中断します。しかし、条件式の記述を間違えてしまうとfalseにならず、無限に繰り返してしまうことがあります。

JavaScriptのプログラム作成にwhileを使うなら、条件式に使う変数の条件がtrueからfalseに変わることをチェックし、無限ループを防いでください。また、デバック時には、後から紹介するbreak文を用いた無限ループを防ぐ手段も用意するといった対策も可能です。

while文を使った無限ループの例

この例は、whileの条件式として「sw == 1」と書くところ、誤って「sw = 1」と書いてしまい、常にtrueとなるので無限にループします。

JavaScriptの「do…while文」のポイント

JavaScriptでは、範囲の無い場合の繰り返しにdo…while文も利用できます。なおdo…while文は、ブロックの位置が違うだけでwhile文と同じ機能ですが、後から条件を判定するので最低1回はブロック内の処理が行われることがポイントです。

次からdo…while文の使い方について紹介します。

while文との違い

JavaScriptのwhile文とdo…while文の違いはブロックの位置で、while文ではループ処理ブロックをwhile文の後ろに記述しますが、do…while文ではwhile文の前にループ処理ブロックを記述します。

do…while文の文法

do {
繰り返し処理
} while (条件式)

do…while文を使う場面

先ほど紹介したようにブロック内の処理を実行してから条件を判定するので、最低1回はブロック内の処理が実行されます。一方while文では先に条件を判定するので、条件が合わなければブロック内の処理が全く実行されません。

JavaScriptのプログラム作成時にdo…while文を使う場面か迷った場合は、ブロックの中を1回は実行してほしい場合にdo…while文を使ってください。

do…while文の例

この例では、最初に1回だけinitlize_step()を実行し、それ以降はloop_step()の条件によって繰り返します。もし、loop_step()が常にfalseでもinitlize_step()が必ず実行されます。

while文でループ処理を中断する方法

今回紹介しているJavaScriptのwhile文は条件式がtrueの場合に同じ処理を繰り返しますが、条件式以外でも繰り返しを中断するケースがよくあります。もしwhile文で指定する条件式以外でループ処理を中断したい場合は、break文の利用を検討してください。

break

JavaScriptのbreak構文は、forまたはwhileなどの繰り返し処理を中断します。なお、while文のブロックの中にbreak文のみを記述してしまうと、繰り返せずに中断してしまいます。if構文とbreak文を組み合わせることで、ある条件の時にループ処理を終了できます。

break構文の使い方

if( 条件式 ) break;

if構文を組み合わせたbreak文を使うことで、複数の繰り返し中断条件を使った繰り返し処理のプログラムを作れます。

複数の条件で繰り返しを中断する使い方

また、先ほど紹介した無限ループを防ぐ方法として、break構文を利用できます。

breakで中断する仕組みを追加した例

continue

先ほど処理を中断するbreakを紹介しましたが、ある条件の時は続きの処理をスキップし、while文の条件式判定に戻ってループを続ける構文がcontinueです。

continue文の文法

while(条件式) {
if(continueの条件式) {
…
continue;
}
繰り返し処理
}

上の例の「continueの条件式」がtrueの場合、continue文に続く繰り返し処理をスキップし、while(条件式)に戻って条件式を判定します。

システム
エンジニア

JavaScriptのwhile文のポイントやループ処理の中断方法がわかりました。

プロジェクト
マネージャー

紹介した方法を参考に、実際にコードを書いてみましょう。

JavaScriptの「while文」の基本から注意点までしっかりおさえよう！

今回紹介したwhile文による繰り返し処理はプログラミングの基本です。JavaScriptのプログラムでも、いろいろな場面で使われるので、while文の基本を理解し、注意点までしっかりおさえてプログラムに活かせるようになりましょう。