こんにちは、ライターのマサトです！
今回は、JavaScriptで繰り返し処理を行うための「while文」について学習をしていきましょう！
この記事では、
・「while文」とは？
・「while文」の使い方
という基本的な内容から、
・「do…while文」の使い方
・ループ処理を抜ける方法
・ループ処理の遅延(wait)処理
・無限ループの注意点
などの応用的な使い方に関しても解説していきます。
この記事で、「while文」をしっかり学習して自分のスキルアップを目指しましょう！
「while文」とは？
それでは、まず最初に「while文」について基本的な知識から学習を進めていきましょう！
「while文」は、主に回数の決まっていない繰り返し処理を行うために使われるメソッドになります。
一般的にプログラムは、上から下へ処理されて1度実行されると終了してしまいます。
そこで、何度も同じプログラムを実行したい場合には繰り返し処理として「while文」のようなメソッドが必要なのです。
特に、ゲームプログラムなどにおいては、繰り返し処理を駆使してダイナミックな動きを表現することがあります。
「while文」の使い方
この章では、「while文」の基本的な使い方について学習をしていきましょう！
基本となる書き方や実行方法、実践的なサンプル例などについて見ていきます。
while文の構文と書き方について
まずは、「while」の構文について学んでいきましょう！
一般的な構文は次のとおりになります！
while( 条件式 ) {
//繰り返し処理
}
このように、まず最初に「条件式」を評価するところから始まります。
この条件式が「true」の間はずっと繰り返し処理を実行し続けるという意味になるので覚えておきましょう！
whileでループ処理を作成する方法
次に、実際のサンプル例として簡単な繰り返し処理を作ってみましょう！
次のサンプル例を見てください！
var count = 0;
while( count <= 50 ) {
count++;
}
この例では、whileの条件式が「count <= 50」となっているのが分かりますね。
つまり、変数「count」の値が50より大きい数値になるまでは、繰り返し処理を続けるという意味です。
繰り返し処理の中では「count」を1ずつカウントアップしているのが分かります。
そのため、変数「count」が50より大きくなったら自動的に繰り返し処理を抜けて終了するわけです。
実践的なループ処理のサンプル例
今度は、もう少しだけ実践的な繰り返し処理を作ってみましょう！
Boolean型を活用して、任意のタイミングで繰り返し処理を抜けるようにしてみます。
次のサンプル例を見てください！
var flag = true;
//flagがtrueの間はずっと繰り返し
while( flag ) {
// 0〜9までの乱数を代入
var num = Math.floor( Math.random() * 10 );
// 乱数が1になったら繰り返しを抜ける
if( num === 1 ) flag = false;
}
このサンプルでは、まず最初に「flag」へ「true」が代入されているのが分かります。
これにより、「while文」の条件式はtrueと評価されるため、「flag」がfalseになるまで繰り返しを続けるという意味になります。
そして、繰り返しの中身ですが、「random()」を使って0〜9までの乱数を毎回発生させています。
この乱数に「1」が出現したタイミングで、「IF文」の処理が実行されて「flag」にfalseが代入されると終了します。
このように任意のタイミングで繰り返し処理を制御する方法はよく使われるので参考にしてみてください。
「do…while文」の使い方
この章では、while文とよく似た機能を持つ「do…while文」について学習します。
基本的な構文や書き方と繰り返し処理の作り方について見ていきましょう。
do…while文の構文と書き方について
まずは、基本となる構文から見ていきましょう！
考え方としては「while文」と同じなのですが、処理の手順に違いがあるので混乱しないようにしてください。
まずは、一般的な構文です！
do {
//繰り返し処理
} while( 条件式 );
「while文」と決定的に違うのは、条件式に関わらず必ず処理を最初に1回だけ実行するという点です！
そのあとで、「条件式」を評価してループを抜けるかどうかを決めていく流れになっています。
do…whileでループ処理を作成する方法
次に、実際の流れを確認するために簡単な繰り返し処理を作ってみましょう！
まずは、次のサンプル例を見てください！
var count = 0;
do {
count++;
console.log( count );
} while( count < 5 );
実行結果
1 2 3 4 5
このサンプルでは、変数「count」が1つずつカウントアップしていき、「5」よりも大きくなったら処理を終了する基本的な例です。
注目して欲しいのは「count」の初期値に「0」が代入されている点です。
これが5よりも大きな数値が初期値として代入されていたらどうなるでしょうか？
次のサンプルを見てください！
//初期値を5よりも大きな数値にする
var count = 10;
do {
count++;
console.log( count );
} while( count < 5 );
実行結果
11
この例では、条件式にある「5」よりも大きな数値が「count」に初期値として代入されています。
通常の「while文」であれば、何も実行することなく処理が終了しますよね？
ところが、「do…while文」の場合はまず最初に繰り返し処理が1回実行されるので、カウントアップ処理が行われます。
そのため、実行結果に初期値の「10」から1つカウントアップした「11」が表示されたというわけです。
この違いは重要なので、実際に自分でもプログラミングして確かめるようにしてみてください。
ループ処理を抜ける方法
ここからは、繰り返し処理を途中で抜けるための「continue」と「break」について、学習をしていきましょう！
それぞれの違いは次のとおりです！
・continue：処理を中断して、次の処理に移る
・break：処理を中断して、繰り返しを終了する
「continue」を使って処理をスキップする方法
まずは、次のサンプルを例にして「continue」の使い方を解説します！
var count = 0;
while(count < 10) {
count++;
//偶数の時だけcontinueする
if(count % 2 === 0) continue;
console.log(count);
}
実行結果
1 3 5 7 9
このサンプルでは、変数「count」が偶数の時だけ「IF文」を使って「continue」を実行しています。
「continue」を実行することで、それ以降の処理が行われないので、結果的に偶数が表示されずに奇数だけが出力結果に表示されるわけです。
「break」を使って処理を止める方法
ここでは、「break」の使い方を解説します！
var count = 0;
while(count < 10) {
count++;
//偶数の時だけbreakする
if(count % 2 === 0) break;
console.log(count);
}
実行結果
1
このサンプルで分かるように、「break」が実行されると「while文」を途中で終了させてしまうので、出力結果に表示されるのは最初の「1」だけとなるわけです。
この「continue」と「break」については、「for文」などにも利用できるので、繰り返し処理を「条件式」以外で制御する方法として覚えておくようにしましょう！
ループ処理の遅延(wait)処理(setInterval)
この章では、繰り返し処理の実行タイミングについて詳しく見ていきましょう！
ここで言う実行タイミングとは、一定の速度で実行される処理を意図的に遅延させる方法のことです。
while文だと意図的に繰り返し処理を遅延させることはできませんので、他のメソッドを利用します。
必要なのはJavaScriptの標準で用意されている「setInterval()」メソッドです。
これは一般的なタイマー処理を実現させるメソッドですが、繰り返し処理を作る方法としてもよく利用されます。
次のサンプル例を見てください！
var counter = 0;
var t = setInterval(function() {
console.log(counter);
counter++;
}, 500);
この例では、setInterval()の第2引数に500を設定することで、0.5秒間隔で繰り返し処理を実行しています。
つまり、第2引数の値を変更することで意図的に遅延を制御することができるわけです。
注意点として、setInterval()を利用した際には「clearInterval()」でタイマーを停止させておくようにしましょう。
if ( counter >= 10 ) {
clearInterval( t );
console.log("終わり");
}
このように記述すれば、指定した条件によって自動的にタイマーは停止するので処理の負荷を軽減できます。
さらにsetInterval()について詳しく学習したい方は、次の記事でまとめているので参考にしてみてください！
無限ループの注意点
最後に、無限ループについて解説しておきます！
「無限ループ」とは、永久に繰り返し処理が続いてしまう状態のことを指し、何も操作ができなくなってしまうだけでなく、コンピュータに不具合を起こしかねないケースに繋がることもあります。
「while文」を例にすると、次のサンプルコードは「無限ループ」になります。
while( true ) {
//繰り返し処理
}
「while文」は条件式を評価し、その条件が「true」になっている間は繰り返し処理を実行するわけですが、その条件式に「true」を直接指定すれば永久に処理が繰り返されて「無限ループ」になるというわけです。
もちろん、条件式が間違っていたり、カウントアップ処理を忘れていた場合なども同じように「無限ループ」が起こりかねません。
このような場合に備えて、先ほど学習した「break」などで制御できる処理を書いておくのも1つの方法でしょう。
for文のループ処理総まとめ
for文のループ処理についてはこちらの記事で詳しく解説しているので、ぜひ確認してください。
まとめ
今回は、「while文」の基本から注意するべきポイントまで、一通り学習しました！
ここで、もう一度ポイントだけをピックアップしてみましょう！
・while文は、条件式が「true」の間はずっと繰り返し処理を実行する！
・do…while文は、最初に1回だけ繰り返し処理を実行する！
・繰り返し処理を途中で制御するには「continue」「break」がある！
・条件式に、直接「true」を記述すると無限ループになるので要注意！
これらのポイントを踏まえて、ぜひ自分なりの繰り返し処理を書けるように実践してみましょう！
