回数未定のループ処理 while文とdo...while文

というわけでみなさま、このような駄文に長らくお付き合い頂きありがとうございました。

次の記事は総まとめなので、なんと当記事がJavaScript入門編最後の項目となります。

これまで勉強してきた方はとってもお疲れ様でした。JavaScriptについての概要は掴めてきたでしょうか。当記事を読んでみなさまのスキルが上がって頂ければ執筆しているわたしもとっても嬉しいでございます。

というわけで今回は『while文』(ほわいるぶん)のご紹介です。ついでに『do...while文』(でゅーほわいるぶん)もご紹介します。まずは『while文』から解説していきますね。

『while文』は『for文』と同じくループ処理を行う構文となります。なんと『for文』よりも簡単にループ処理を構築できたりします。その分、記述をちょろりと間違えただけで簡単に永遠のループ処理が完成してしまうのでそこは超気をつけてください。

使用頻度に関しては『for文』の方がはるかに高く、『while文』を使用する機会はそこまで多くありません。

そして『for文』との違いは『ループ処理をさせる回数が未定』といったところがあげられます。『for文』は『for文』そのものの構文にループ処理をさせる回数を記述しますが、『while文』はその回数指定の記述が構文として組み込まれていません。

ちょっと前回の『for文』を振り返ってみましょう。

for(var num = 0; num < 10; ++num){
    console.log(num);
}

『()』の中の条件部分に注目すると『num < 10』となっていますね。つまり10回処理をしたら終了になります。

しかし、『while文』はその回数が決まっていませんのでこんな感じの構文になります。

var num = 0;

while(num < 10){
    console.log(num);
    ++num;
}

『for文』と比べると超簡潔になってますね。では処理をそれぞれみていきましょう。

まず変数『num』を宣言し、初期値として『0』が代入されています。そして『while』の後に『()』がありますね。

この『()』の中が『条件式』になります。『for文』と同じです。この『()』の中が成立している間(trueが成立している間)はずっとループ処理、『{}』の中身が実行されます。

ご覧のとおり『for文』のように『初期値』、『条件』、『更新』の指定がなく、とってもシンプルです。

上記の構文で『++num;』がもし存在してなかったら変数『num』はずっと『0』で、『num < 10』が永遠に成立してしまいますね。こんな風に永遠なるループ処理が簡単に構築できるので気をつけてください。

var num = 0;

while(num < 10){ // これは永遠のループ処理です。実行すると危険です。
    console.log(num);
}

上記の構文は実行しないでくださいね、PCが壊れるということはまずないですが、CPUにちょいと負担がかかっちゃったりブラウザの再起動が必要になっちゃったりします。

なので「『while文』を書くときは『()』の中で使用している変数等の数値を変更する処理を必ず入れる必要がある」ということは肝に銘じておいてください。

さて、この『while文』は『回数が未定でもループ処理を実行出来る』のでそれを利用した色々な演算をさせることができます。

例えば『1日1回、500円貯金していった場合、1万円に到達するのは何日目になるか』といった問題も『while』文を使えば簡単です。ちょっと書いてみましょう。今回はその日数をアラートダイアログで表示するものとします。

答えはこれです。

var count = 0,
    chokin = 0;

while(chokin <= 10000){
    if(chokin >= 10000){
        alert(count + "日目でした！");
    }
    ++count;
    chokin = chokin + 500;
}

まず何日目かを数える必要があるので変数『count』を用意、そして貯金総額を代入する変数も必要なので変数『chokin』も同時に用意します。0日目の0円から数え始めるので両方共初期値は『0』です。

そして『貯金総額』が『1万円』以下の間はループ処理をさせたいので『while文』の『()』の中には『chokin <= 10000』と記述します。

そして『1万円以上』になったときに『alert()』関数を実行させたいので『while文』の『{}』の中で『if文』を使い、その条件に『chokin >= 10000』と指定します。

そして続く記述で、『++count;』と記述し日数を計算、そして『chokin = chokin + 500;』でループ処理が行われる度に変数『chokin』に『500』を加算していきます。

上記のサンプルの解説はこんな感じですね。これを参考に色々書いてみると良いかもしれません。人間が手で計算するとなると大変な演算もコンピューターに任せてしまうと一瞬で解決できたりしますので結構楽しめるかと思います。

では続きまして『do...while文』のご紹介です。こちらもループ処理を構築する構文で、『while文』と動作はほとんど変わりません。ただ、一点だけ大きな違いがあり、1回目の処理は必ず実行してくれるwhile文といった感じになっています。ちょっとサンプルを見てみましょう。

var num = 0;

do{
    console.log(num);
    ++num;
}while(num < 10);

これが『do...while文』になりますね。では文法を確認していきましょう。

まず『do』と記述します。そのとなりに『{}』を記述し、その中にお好きな処理を書きます。ここがループされる部分になりますね。

そして『while』と記述し、そのとなりに『条件式』(上記のサンプルだと『(num < 10)』が該当)を記述します。『while文』と違い、『条件式』を末尾に書く必要がありますので注意して下さい。

そして『{}』を使った『while文』と違い、『do...while文』では末尾の『;』(セミコロン)が必要なのでこちらも記述しておきます。JavaScriptでは『;』が省略できますのでエラーとなることはありませんが、正式な文法では『do...while文』の末尾には『;』を書く必要があります。ここ抜けやすいところなので気をつけて下さい。文法についてはこんな感じです。

では続きまして『do...while文』の動作を確認していきましょう。以下のサンプルを見て下さい。

var x = false;

do{
    console.log(x);
}while(x);

このサンプルでは条件式に変数『x』と指定しています。そして変数『x』の中身は『false』です。ということは最初から条件が成立していないわけなんですが、『do...while文』では「1回目の処理は必ず実行してくれる」のでこれを実行させるとこうなります。

false

1回だけ『false』と出力され、その後のループ処理は行われていないようですね。こんな感じで「1回だけ必ず処理を行い、その後は状況に合わせてループ処理をさせたい」といった場合に非常に便利な構文となっています。状況によってはかなり強力な構文なのでバッチリ使いこなしてしまって下さい。

for(var i = 0; i < 10; ++i) console.log(i);

var n = 0;
while(n < 10) console.log(++n);

var _n = 0;
do console.log(++_n); while(_n < 10);

というわけで『while文』と『do...while文』の使い方の解説を終わりたいと思います。『for文』と違って構文は非常にシンプルなので特に難しくはないかと思います。その分、永遠なるループ処理を構築してしまわないように注意してくださいね。

これまでのお勉強、大変お疲れ様でした、次は総まとめになります。

次の総まとめでこれまで勉強した内容で忘れちゃったこととかを再確認すればより身に付けることができるかと思います。

今までありがとうございました。次回またお会いしましょう。

ではではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

Tweet

シェア