ゼロから始めるJavaScript講座Vol08 while文を使った繰り返し処理


ゼロから始めるJavaScript講座Vol08 while文を使った繰り返し処理
目次
  1. ゼロから始めるJavaScript講座while文を使った繰り返し処理
  2. while文とは
  3. while文の書き方
  4. 繰り返し処理の使い分け
  5. 課題1
  6. 課題2

ゼロから始めるJavaScript講座while文を使った繰り返し処理

while文とは

繰り返し処理を行うことができ、ループとも呼ばれます。まずはお手本にある通り、while文を使ったプログラムを書いてみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>while文</title>
</head>
<body>
    <script>
        var i = 0;
        while (i < 10) {
            document.write(i);
            i++;
        }
    </script>
</body>
</html>

javascript-while1-639

0から9まで順に表示されます。お気づきかと思いますが、for.htmlと結果は同じです。

while文の書き方

以下のような書式でループを行います。

while(条件式

ループ開始時に毎回判定を行う条件式

for文と同じく繰り返し処理を行いますが、for文よりは理解しやすいかもしれません。

具体的にどのような順番で処理が行われるのか、while.htmlを例に示します。

while.htmlの詳細な処理の順番は以下となります。

javascript-while2-639

javascript-while3-639

javascript-while4-639

javascript-while5-639

「条件式→繰り返し行う処理内容」

の順に実行されていき、条件式の結果がfalseとなると、while文が終了します。

重要なのは条件式で、while文の中に記載する繰り返し行う処理内容は、条件式がtrueとなった場合に実行されるため、ループ1回目の判定でfalseとなった場合、1度も実行されません。

javascript-while6-639

また、条件式がfalseとなるまでループが継続されるため、条件式によっては無限ループとなることがありますので、気をつけましょう。

javascript-while7-639

繰り返し処理の使い分け

for文、while文と2つの繰り返し処理を学びましたが、この使い分けは一般的に以下となります。

繰り返しの回数が決まっている場合for文

ある条件を満たすまでループを行いたい場合while文

あくまで一般的な例のため必ずしもこのように使い分ける必要はありません。

また最初はうまく使い分けることが難しいかもしれませんが、この場合は使いやすいほうを利用するでも構いません。

課題1

1+2+3+…と足される数を1ずつ増やしながら足していき、和が1000を超えるときの足される数値と、合計値を表示してください。

課題2

1から100までの整数に対し、

  • 3で割り切れる場合は「Fizz」- 5で割り切れる場合は「Buzz」- 3でも5でも割り切れる場合は「FizzBuzz」- 上記以外は数値そのまま

を表示してください。

なおどの繰り返し処理を利用するかは自由です。

解答例)1から18までの表示

javascript-loop-work-639

NEXTLESSON配列とは配列とは

PREVLESSONfor文を使った繰り返し処理for文を使った繰り返し処理


CodeCampus編集部
この記事を書いた人
CodeCampus編集部
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp