JS 繰り返し処理 for文・while文・do while文 使い方とそれぞれの違い

今回は「繰り返し処理」について見ていきましょう。

繰り返し処理は、「ループ」ともいいますが、ある作業をある一定の状態になるまで繰り返し行うことを言います。

このような同じことを繰り返し行うことはJavaScriptに限らず、プログラミング言語が得意とするものになります。

これから学習を始める方にはマスターするべきものの中でも、最も重要なものの一つになりますので、しっかりと学習するようにしましょう。

for文

基本的な書き方

for文の一般的な形になります。

• 初期化処理：最初に実行される部分
• 条件式：ループが有効な条件式、繰り返しを止める条件式。
• 最後の式：ループごとに動作

これだと少し分かりにくいので以下に例を見ていきましょう。

const fruits = ['apple', 'banana', 'orange'];

for ( let i = 0; i < fruits.length; i++){
    console.log(fruits[i]);
}
 apple
 banana
 orange

for文の中を見ていきましょう。

まず「let i =0」で最初に実行される部分を指定します。

ここでは「0」を指定しています。

次に、「i < fruits.length」で配列の長さまで実行することを指定しています。

ここでは3回になります。

最後に「i++」でループのたびに「１」プラスされます。

「i」が「length」の長さと同じになった時点で、ループは終了します。

ループを終了する　break

for ( let i = 0; i < fruits.length; i++){
    console.log(fruits[i]);
if(i = 'banana'){
    'バナナは売り切れです';
    break;
}
}

 apple
'バナナは売り切れです'

ループを途中で終了させるには、switch文の時に使った、「break」を使用します。

実際にはもっと複雑なコードになりますが、ここではあくまでもイメージとして捉えてください。

繰り返し処理を飛ばす　continue

for (let i = 1; i <= 9; i += 1) {
  if ((i % 3) === 0) {
    console.log(i);
  }
}
 3
 6
 9

こちらは「３の倍数の時だけ」出力しています。

for (let i = 1; i <= 9; i += 1) {
  if ((i % 3) !== 0) {
    continue;
  }
  console.log(i);
}
 3
 6
 9

先程の「break」はループを完全に抜けてしまいましたが、「continue」を使うとループを抜けずに次の繰り返しを行います。

「３の倍数ではないものは飛ばして」処理をしています。

for (let i = 1; i <= 9; i += 1) {
  if ((i % 3) !== 0) {
    console.log(i);
  }
}
 1
 2
 4
 5
 7
 8

「continue」を書かなければ、「３で割り切れないものだけ」を処理することになります。

while文 と do while文

while

JavaScriptの代表的なループ文が今までご紹介してきた「for」とここで紹介する「while」になります。

for文と似た構文になりますが、書き方に違いがありますので、注意してください。

let num = 5;

while(num < 100){
    console.log(num);
    num = num *3;
} console.log(
    '計算終了');
 5
 15
 45
 計算終了

変数numに５を代入します。

「while(num < 100)」の条件式で変数numは100までと指定しています。

この条件式で「true」か「false」の評価を行います。

「true」であれば次へ進みます。

「false」であれば終了します。

「console.log(num)」で数値を返します。

「true」であった場合は、「num = num *3」の式を行い、結果を条件式に返します。

「false」であれば、while文の外のコードを実行します。

do while

let num = 5;

do{
    console.log(num);
    num = num *3;
}while(num < 100)
 console.log( '計算終了');
 5
 15
 45
 計算終了

「do while」の場合は、書き方に若干の違いがあります。

初期化の後に、実行するコードと式を書き、「do{}」の外に、while分を書きます。

「do{}」の内容をwhile文の条件分だけループするという命令になります。

while と do while の違い

「while」と「do while」の違いは何でしょうか。

一見同じに見えますが、実際ほとんど同じです。

でもこの「ほとんど」という所に違いがあります。

• while ：ループに入る前に条件を判定
• do while ：ループの処理後に条件を判定

このように、いつ条件を判定するかが両者の違いになります。

しばらくは違いがあるんだと覚えておくだけでよいですが、稀にきちんと使い分けている場合がありますので、その際はこの違いを思い出してください。

あとがき

ループで使う、「for」、「while」、「do while」の３つを見てきましたが、結局どれを使うのが良いのでしょうか。

先に大雑把な答えを言えば、「好きなものを使う」ということが答えになってしまいます。

一応、違いとしては、回数の指定があるかどうかで使い分けるのが良いかと思います。

指定回数がある場合は、「for」を、指定回数がない場合は、「while」を使ってみることをお勧めします。

これは、「for」自体が、指定回数のあるものしか使うことが出来ないためです。

繰り返し処理は何度も実際にコードを書いて、イメージした通りの結果が返されるかどうか、反復して学習することが大切です。

ご自身の書いたコードが上手く出来たら、少し数値を変えたり、条件を変えたりして、色々と変更を加えてみてください。

なお、今回ご紹介出来なかった「for…in」と「for…of」については、以下の記事でご紹介させて頂いております。

合わせてご参照ください。

今回も最後までお読み頂きありがとうございました。