javascript

【javascript】while文とdo~while文の使い方を初心者向けに徹底解説!

while文とdo~while文

 

while文 do~while文とは?

条件が満たされている間、指定した処理を繰り返す構文です。

 

指定された回数だけ処理を実行するfor文とは異なり、while / do~while は、条件がtrue(真)の間 処理を繰り返し実行(ループ)します。

使用例として挙げられるのが、「いくつあるかわからない」データ群を「全て表示する」場合です。

while文の概要

取得したデータを、とりあえず全部表示するときに便利だね!

しかし、条件の設定を間違えるとずっと処理が終わらない無限ループ」に陥ってしまうので注意が必要です。

 

この記事では

制御構文のwhile / do~while の使い方や、2つの構文の違い、無限ループや、処理の中断・スキップについて初心者向けに解説しています。

 

できるだけわかりやすく解説するので、ぜひ最後まで読んでみて下さいね!

目次

while文の使い方while文を中断するbreak繰り返しをスキップするcontinuewhile文のネスト
while文の無限ループずっとtrueを返す条件式を指定した場合処理によって条件式が変化しない場合do~while文の使い方

 📖目次に戻る

while と do~while の違い

while / do~while はどちらも繰り返し処理を実行するという点は共通していますが異なる部分があります。

それは、条件式を判定するタイミングです。

 

javascriptのwhile文とdo~while文の違い

 

ご覧の通り、while文 処理の前に条件を判定を行い、do~while文 処理の後に判定を行います。

ポイント

これはつまり、while は条件によって一度も処理が実行されないのに対し、do~while必ず一度は処理が実行されるということです。

 

行う処理によって、使い分けられると良いね!

 📖目次に戻る

while文の使い方

while文は、whileの後ろの () 内に指定した条件式が「trueの間」だけ「処理を繰り返し」実行します。

 

phpのwhile文

 

while文の基本的な構文は次の通りです。

構文 − while文の定義

while( 条件式 ) {

実行する処理 ;

}

また、処理が「1つ」だけの場合は、{}(中括弧)を省略することができます。

構文 − while文の定義 処理が1つの場合

while( 条件式 )

実行する処理 ;

では早速、while文を使用した基本的なループ処理を行います。

例題

数値の「1」から「10」まで順番にブラウザに出力してみましょう。
 </>javascript

let i = 1;

while ( i <= 10){

   document.write( i++ );

}

1から10までの数字が document.write によって、順番に出力されていますね。

 

では、今行った処理の流れを一つずつおさらいしてみます。

  1. まずは、while文で使用する変数に「1」を代入します。
  2. 次に、while文の条件式$i <= 10」の判定でtrueとなり、ブロック内の処理「console.log( i++ );」が実行されます。この「 i++」のインクリメントは、「後置加算子」なので「1」が出力された後で1が加算され「2」になります。
  3. そして、while文の最初に戻り、今度は変数「 i 」に2が入った状態で処理を再開します。

この一連の流れを変数「i」が、10と等しくなるまで行うi <= 10)ので、1から10が続けて表示されることになります。

 

while文は、条件式が変化するような処理じゃないと半永久的に処理を繰り返すことになるから注意が必要だね

 📖目次に戻る

while文を中断する break文

breakは、while文などの繰返し処理を中断することができます。

先ほどの例文では、数値の「1」から「10」を順番に表示しましたが、今度はbreakを使って処理を中断してみます。

例題

「break」を使って、値が「5」になった時点で処理を中断してみましょう。
 </>javascript

let i = 0;

while ( i <= 10){

    document.write( ++ i );

    if( i === 5){

      break;

    }

}

繰り返し処理の中に、変数「i」が「5」と等しくなった場合「break」を実行するようなif文を記述しています。

それに伴い、数値が出力されてからif文を通るように、インクリメントを変数の前に置く前置加算子(++i)に変えました。

(このままだと「2」から出力されてしまうので、最初の変数の代入する数字を「0」にしています。)

値が「5」になった時点で処理が止まっていることが確認できますね。

 

ちなみにbreak文は、if文やswitch文などの他の制御構文でも使用することができるよ。

 📖目次に戻る

繰り返しをスキップする continue文

continueは、「ある条件に合致した時だけ」処理をスキップすることができます。

例えば、変数「$i」が「奇数のときだけ」処理をスキップさせて、偶数のみを表示させる場合などに使用します。

例題

今度は、数値の「1」から「10」から偶数のみを出力してみましょう。
 </>javascript

let i = 0;

while ( i <= 10){

  ++i;

  if ( i % 2 === 1) {

    continue;

  }

  document.write( i );

}

繰り返し処理の中に、変数「 i 」が奇数の場合「continue」を実行し処理をスキップするようなif文を記述しました。

奇数はif文の条件式「 i % 2 === 1」で、2で割ると1余るかどうかで判定しています。trueになるとif文の中の処理が走り、奇数のみがcontinueでスキップされます。

「1」「3」「5」「7」「9」がスキップされて、偶数のみが出力されていますね。

 

ちなみに偶数を判定する場合は「 i % 2 === 0」と記述するよ。

 📖目次に戻る

while文のネスト

while文は、while文の中にwhile文を記述して「入れ子構造」にすることもできます。

この入れ子構造のことをネストと呼びます。

例題

このネストを使用して、小学生の時に習った「九九」を「1の段」から「9の段」まで全て出力してみましょう。
 </>javascript

let i = 1;

while ( i <= 9){

  j = 1;

  while ( j <= 9){

      document.write( i * j );

      document.write( " &nbsp;" );

      j++;

  }

  i++;

  document.write( '<br />' );

}

「1 * 1」から「9 * 9」まで全て出力されていますね。

では、一連の処理の流れをおさらいしてみましょう。

  1. まず、最初のwhile文の条件式( i <= 9 )でtrueとなり、変数「 j 」に「1」が代入されます。
  2. 次に、内側のwhile文の条件式( j <= 9 )でtrueとなり、変数「 i 」と「1」の入った変数「 j 」で「 ij 」が処理&出力されます。これを、1ずつ加算される変数「 j 」が「9」になるまで繰り返します。
  3. 最後に、内側のwhile文を抜けると、変数「 i 」に「1」が加算されて改行されます。

この一連の処理が最初のwhile文で変数「 i 」が「9」になるまで繰り返します。

 

ネストの深さに制限はありませんが、あまり深い構造にすることは望ましくないよ。

 📖目次に戻る

while文の無限ループ

while文などの繰り返し文は、「ずっとtrueを返す条件式を指定してしまった場合」「処理によって条件式が変化しない場合」などに、無限ループに陥ってしまいます。

 

 

今から、2つの事例をもとに無限ループを作ってみるよ

 📖目次に戻る

ずっとtrueを返す条件式を指定した場合

「ずっとtrueを返す条件式を設定した場合」とは、先ほどの例でいうと、条件式で「1以上はtrue」というような指定をした場合です。例 : ( i >= 1 )

変数「i」は「1」から1ずつ加算されていきますが、条件式の判定は永遠にtrueとなるので無限ループになります。

 </>javascript

let i = 1;

while ( i >= 1){

    document.write( i++ );

}

半永久的に「1」ずつ加算された数字が表示されて行きます。

は、早くブラウザを閉じて下さい!!

 📖目次に戻る

処理によって条件式が変化しない場合

「処理によって条件式に変化が起きない場合」とは、先ほどの例で言うと、処理を行なっても条件式(i <= 10)の変数の値が変わらない場合です。

例えば、while文の処理の中でインクリメント「++」を書き忘れてしまった場合は、条件式の判定がいつまでもtrueのまま半永久的に「1」を出力し続けます。

 </>javascript

let i = 1;

while ( i <= 10){

    document.write( i );  // ++ を記述し忘れた!!

}

ご覧の通り、ず〜〜〜〜〜〜と「1」が表示されてしまいます。

このような無限ループは、サーバーに負荷がかかるため、ループが終了するかを確認して記述するようにしましょう。

ポイント

意図的に無限ループを発生させる場合も、脱出ルートを確保しておくことが望ましいですね。

 

ちなみに、条件式に「true」や適当な「数値」を入れても無限ループになるから注意してね

 📖目次に戻る

do~while文の使い方

do~while文は、指定した「条件式がtrueの間」だけ「処理を繰り返し」実行します。

 

do~while文の説明

 

while文と非常に似ていますが、条件式が処理の後に記述されているため、条件がどうであれ必ず1回処理が行われるという点で異なります。

構文 − do~while文の定義

do {

// 条件式がtrueである間、実行する処理

...

} while ( 条件式 )

}

また、実行する処理が一つの場合は、{}「中括弧」を省略することも可能です。

構文 − do~while文の定義

do

// 条件式がtrueである間、実行する処理

while ( 条件式 )

では実際に見てみましょう。

例題

do~whileを使って、数値の「1」から「10」までを順番にブラウザに出力してみましょう。
 </>javascript

let i = 1;

do {

  document.write( i++ );

} while ( i <= 10);

今回のdo~while文の処理の流れは以下の通りです。

  1. まずは、do~while文で使用する変数に「1」を代入します。
  2. 次に、do~while文のブロック内の処理「document.write( i++ );」が実行されます。この「 i++ 」のインクリメントは、「後置加算子」なので「1」が出力された後で1が加算され「2」になります。
  3. そして、条件式i <= 10」の判定でtrueとなり、while文の最初に戻って、今度は変数「 i 」に2が入った状態で処理を再開します。

この一連の流れを変数「i」が、10と等しくなるまで行うi <= 10 )ので、0から10が続けて表示されることになります。

 

do~while文でも、breakやcontinueで処理を中断したりスキップできるよ

📖目次に戻る

最後に

いかがでしたでしょうか、今回はjavascriptの基本である制御構文の「while文」「do~while文」について解説しました。

他の構文にも興味のある方は是非こちらもチェックしてみて下さいね。

Javascript

javascriptの基本文法と基礎テクニックについて初心者向けに解説しているよ!!

続きを見る

最後までお読みいただき、ありがとうございました!

-javascript
-