DESIGNMAP

  1. TOP
  2. 公開講座
  3. ゼロから始めるJavaScript入門
  4. 繰り返し処理(while文) ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.8】

繰り返し処理(while文) ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.8】

今回はwhile文を使った繰り返し処理を学びます。

Atomで新規ファイルをつくり「文字列型 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.2】」で作った「js-study」フォルダ内に、「while1.html」というファイル名で保存します。

以下のコードを書いて保存します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script>
    var num = 1;
    while(num <= 10){
      console.log(num);
      num++;
    }
    </script>
  </body>
</html>

Google Chromeで「while1.html」を開き、JavaScriptコンソールを開きます。1から10までが出力されていれば成功です。

while(条件式){
    条件式がtrueを返した時に実行される文
}

while文は条件式がtrueならば、ブロック内の文が実行されます。ブロック内の文が終わると、再度、条件式に巻き戻しされます。再度、条件式が実行されます。falseであれば、whileの外に抜けます。

繰り返しを途中でやめる

「js-study」フォルダ内に、「while2.html」というファイル名で保存します。
コードは<script>以前、</script>以降のコードは「while1.html」と同じなので掲載は省略しています。

var num = 1;
while(num <= 10){
  if(num === 3){
      break;
  }
  console.log(num);
  num++;
}

実行すると、2までが出力されます。

1
2

3回目のループのときに、if(num === 3){trueを返すので、 break;が実行されます。breakはループの外にでて、while文は終了します。

繰り返しの特定の回をスキップする

「js-study」フォルダ内に、「while3.html」というファイル名で保存します。
コードは<script>以前、</script>以降のコードは「while1.html」と同じなので掲載は省略しています。

var num = 1;
while(num <= 10){
  if(num === 3){
      num++;
      continue;
  }
  console.log(num);
  num++;
}

実行すると、3以外が出力されます。

1
2
4
5
6
7
8
9
10

3回目のループのときに、if(num === 3){trueを返すので、continue;が実行されます。continueはブロック内の処理をスキップして、「繰り返しを継続する条件式」に戻ります。特定の回の実行をスキップしたいときに使います。

do while

do while文という書き方もあります。
「js-study」フォルダ内に、「while4.html」というファイル名で保存します。

コードは<script>以前、</script>以降のコードは「while1.html」と同じなので掲載は省略しています。

var num = 1;

do {
  console.log(num);
  num++;

} while(num <= 10);

実行すると、1から10までが出力されていれば成功です。whileとの違いは、条件にかかわらずブロック内の文は一度は実行される点です。

下記のコードは、条件式はfalseを返すのですが、一度はブロック内の文が実行されます。もしwhile文ですと、条件式はfalseを返すので、ブロック内の文は実行されません。

var num = 11;

do {
  console.log(num);
  num++;

} while(num <= 10);
11

do whileはほとんど使われず、書く機会、読む機会はほとんどないかと思います。

スポンサーリンク

プロフィール

DESIGNMAP
制作ディレクター。
お問い合わせ