IORI online School

JavaScript、html、css の無料学習サイト

【JavaScript 入門講座】while文

[JavaScript 入門講座]while文

前講座でfor文を学習した。for文は繰り返し処理を行なう仕組みである。 実は、繰り返し処理を行なう仕組みは、もう一つある。 それがwhile文である。

for文もwhile文も繰り返し処理を行なう。 どちらも同じような処理ができる。 では、どのような場合for文を利用して、 どのような場合while文を利用するのだろうか?

特徴
for文 繰り返す回数が決まっている時に利用する
while文 繰り返す回数が未定の場合利用する

明確な使い分けの基準は存在しないが、 上のような考えで利用すると良い。 for文は、繰り返す回数を指定した。 一方、while文は繰り返す回数が分からない。 その状況により、繰り返し処理を終了するか続けるか決定する。

次の最終講座で成果物を製造するが、その時while文を利用する。 成果物について少しだけ解説する。 製造する成果物は次の仕様を満たすプログラムである。

製造する成果物は「数当てゲーム」である。 ゲーム(プログラム)を実行すると、コンピューターが「0から9」の間でランダムに数字を選ぶ。 コンピューターがどの数字を選んだのか、ユーザーが当てる。

コンピューターがランダムに選んだ数字を、ユーザーが当てるゲームを製造する。

コンピューターが選ぶ数字に興味など無い。

と思う方もいらっしゃるだろうが、私も同意見である。 では、本講座を始めようではないか。

while文の構造

while ( [条件式] ) {
    プログラム
}

while文の構造である。 非常にシンプルである。whileキーワードの後ろに括弧を記述する。 括弧の中に「条件式」を記述する。 条件式の後ろで中括弧を開き、繰り返し処理をするプログラムを記述する。 プログラムの最後で、中括弧を閉じる。 中括弧から中括弧までがwhileブロックと言われる。

繰り返し条件を解説する。 条件式が「true」の間、 whileブロック(中括弧で囲まれた部分)が繰り返し実行する。 条件式が「false」になると、while文が終了する。

for文の場合は、繰り返し回数を前もって決めていた。 このwhile文は、繰り返し回数を決めていない。 「条件式」の部分をうまいこと記述して、 while文を終了させるようにする。 (後ほど、サンプルプログラムで確認しよう)

while文がずっと繰り返すと、「無限ループ」といって、 プログラムをずっと実行し続ける。 そのためwhile文では、必ずwhile文を終了させるプログラムを [条件式]で指定する必要がある。

特定の処理を3回繰り返し実行する

001<script>
002
003var i = 0 ;
004
005while ( i < 3 ) {
006
007  //[i]の値を表示
008  alert( i ) ;
009  
010  //[i]の値を加算
011  i++ ;
012}
013alert ( "iの値 " + );
014
015</script>

プログラムを実行すると、
「0」
「1」
「2」
と表示した後、「iの値 3」と表示する。

サンプルプログラムを解説する前に、「コメントアウトの方法」を学習する。

コメントアウトとは コメントアウトとは、プログラム内にコメントを残すことである。 コメントアウトした部分は、プログラムとして認識されない。

プログラムの中に「このプログラムは何をやっているプログラムなのか」という説明を 記述したい場合がある。その場合、「コメントアウト」という機能を利用する。 コメントアウトした部分は、プログラムと認識されないので、実行しない。

コメントアウト スラッシュを二つ記述すると、それ以降の文はコメントアウトされたものとして認識される。

コメントアウトするには、コメントアウトしたい行の先頭にスラッシュを二つ記述する。 コメントアウトの解説は以上である。サンプルを解説する。

001<script>
002
003var i = 0 ;
004
005while ( i < 3 ) {
006
007  //[i]の値を表示
008  alert( i ) ;
009  
010  //[i]の値を加算
011  i++ ;
012}
013alert ( "iの値 " + );
014
015</script>

3行目で、変数iを宣言して0を代入する。 この変数はwhile文の繰り返し回数を指定するために利用する。 5行目から12行目までがwhileブロックである。 5行目の条件式で変数iの値が3未満か確認している。 変数iの値は0なので、3未満である。 条件式の値が「true」になり、whileブロックが実行する。7行目はコメントである。 8行目で、変数iの値を表示する。変数iの値は「0」なので「0」が表示する。 10行目はコメントである。 11行目で、変数iの値をインクリメントする。変数iの値は「0」から「1」へ変更される。 以上で、whileブロックが終了する。 whileブロックは条件式が「true」の間実行するので、もう一度5行目へ処理が戻る。

001<script>
002
003var i = 0 ;
004
005while ( 1 < 3 ) {
006
007  //[i]の値を表示
008  alert( i ) ;
009  
010  //[i]の値を加算
011  i++ ;
012}
013alert ( "iの値 " + );
014
015</script>

5行目の条件式で変数iの値が3未満か確認する。 変数iの値は1なので、3未満である。 条件式の値が「true」になり、whileブロックが実行する。 8行目で、変数iの値を表示する。変数iの値は「1」なので「1」が表示する。 11行目で、変数iの値をインクリメントする。変数iの値は「1」から「2」へ変更される。 以上で、whileブロックが終了する。もう一度5行目へ処理が戻る。

001<script>
002
003var i = 0 ;
004
005while ( 2 < 3 ) {
006
007  //[i]の値を表示
008  alert( i ) ;
009  
010  //[i]の値を加算
011  i++ ;
012}
013alert ( "iの値 " + );
014
015</script>

5行目の条件式で変数iの値が3未満か確認する。 変数iの値は2なので、3未満である。 条件式の値が「true」になり、whileブロックが実行する。 8行目で、変数iの値を表示する。「2」が表示する。 11行目で、変数iの値をインクリメントする。変数iの値は「2」から「3」へ変更される。 以上で、whileブロックが終了する。もう一度5行目へ処理が戻る。

001<script>
002
003var i = 0 ;
004
005while ( 3 < 3 ) {
006
007  //[i]の値を表示
008  alert( i ) ;
009  
010  //[i]の値を加算
011  i++ ;
012}
013alert ( "iの値 " + );
014
015</script>

5行目の条件式で変数iの値が3未満か確認する。 変数iの値は3なので、3未満ではない。 条件式の値が「false」になり、whileブロックが終了する。 つぎの処理は、13行目である。13行目で変数iの値と 「"iの値 "」という文字列を文字列結合する。 変数iの値は3なので、「iの値 3」と表示して処理が終了する。

while文とif文を組み合わせたプログラム

001<script>
002
003var flag = true ;
004
005while ( flag ) {
006
007  var answer = prompt ( "[5]を入力して下さい" ) ;
008  
009  if ( answer == "5" ) {
010    
011    alert ( "Good Job!!" );
012    flag = false;
014  }
017}
018alert ( "END" ) ;
019
020</script>

プログラムを実行すると入力ダイアログが表示する。 「5」を入力すると、「Good Job!!」と表示した後、 「END」と表示されプログラムが終了する。 「5」以外の値を入力すると、入力ダイアログが表示し続ける。

「5」を入力するプログラムである。解説する。 3行目で変数flagを宣言してtrueを代入する。5行目でwhile文が始まる。 whileブロックは5行目から17行目までである。 5行目のwhileの条件式に変数flagが記述されている。 変数flagの値はtrueなので、whileブロックが実行する。 7行目でprompt()が実行して、入力ダイアログが表示する。 仮に、入力ダイアログに「5」を記述して「OK」ボタンを押下したと仮定する。

001<script>
002
003var flag = true ;
004
005while ( flag ) {
006
007  var answer = "5" ;
008  
009  if ( answer == "5" ) {
010    
011    alert ( "Good Job!!" );
012    flag = false;
014  }
017}
018alert ( "END" ) ;
019
020</script>

変数answerに5が代入される。この値は文字列である。 9行目でif文の条件式を確認する。条件式で変数answerの値と「5」を比較している。 変数answerの値は5なので、条件式はtrueになり、ifブロックが実行する。

001<script>
002
003var flag = true ;
004
005while ( flag ) {
006
007  var answer = "5" ;
008  
009  if ( true ) {
010    
011    alert ( "Good Job!!" );
012    flag = false;
014  }
017}
018alert ( "END" ) ;
019
020</script>

ifブロックは9行目から14行目までである。 まず11行目が実行して、「Good Job!!」が表示する。 その後、12行目で変数flagにfalseを代入する。 変数flagはwhile文の条件式で利用されていた。 さて、以上にて一回目のwhile文が終了である。 では5行目に戻って、while文の条件式を確認する。 変数flagの値はfalseである。つまり、while文が終了する。 whileブロックが終了した後、18行目のプログラムが実行する。 このプログラムはwhile文と関係なく実行する。最後に「END」と表示してプログラムは終了する。
入力ダイアログで「5」を入力したケースを見た。もう一度プログラムを見返そう。

001<script>
002
003var flag = true ;
004
005while ( flag ) {
006
007  var answer = prompt ( "[5]を入力して下さい" ) ;
008  
009  if ( answer == "5" ) {
010    
011    alert ( "Good Job!!" );
012    flag = false;
014  }
017}
018alert ( "END" ) ;
019
020</script>

7行目に注目する。7行目が実行すると、prompt()が実行して入力ダイアログが表示する。 先ほどは「5」を入力したケースを見た。 ここで「10」を入力して「OK」ボタンを押下したと仮定する。

001<script>
002
003var flag = true ;
004
005while ( flag ) {
006
007  var answer = "10" ;
008  
009  if ( answer == "5" ) {
010    
011    alert ( "Good Job!!" );
012    flag = false;
014  }
017}
018alert ( "END" ) ;
019
020</script>

変数answerに10が代入される。この値は文字列である。 9行目でif文を確認する。条件式で変数answerの値と「5」を比較している。 変数answerの値は10なので、条件式はfalseになり、ifブロックは実行しない。 ここで、whileブロックの処理は全て終了である。 では5行目に戻って、while文の条件式を確認する。 変数flagの値はfalseのままである。つまり、while文が再び実行する。 while文を終了するためには、入力ダイアログで「5」を入力し、 ifブロックが実行して変数flagにfalseを入れる必要がある。 解説は以上である。

まとめ

while ( [条件式] ) {
    プログラム
}

コメントアウト スラッシュを二つ記述すると、それ以降の文はコメントアウトされたものとして認識される。