【JavaScript入門】while文を完全マスターする4つのコツ!

javascript-while-tutorial-top_2
マサト
書いた人 マサト

こんにちは、ライターのマサトです!

今回は、繰り返し処理の実装で代表的な「while文」について学習します!

「for文」と違い、「while文」は繰り返し回数が決まっていない場合に使われますが、その構文の仕様上「無限ループ」を作ってしまいがちなので、途中でループを抜ける方法も一緒に学習しておきましょう!

そこで、この記事では「while文」の基本的な知識から学習を始め、「do – while文」との違いやループ処理についての具体的なポイントを整理しながら学習できるようにしましたので、ぜひ参考にしてみてください!

「while文」を使ってみよう!

それでは、基本となる「while文」の使い方から学習を進めていきましょう!

一般的な構文は次のとおりになります!

このように、まず最初に「条件式」を評価するところから始まり、この条件式が「true」であればずっと繰り返し処理を実行し続けるという意味になります。

次のサンプルで、簡単な例を見てみましょう!

この例では、条件式が「count <= 50」となっており、繰り返し処理の中で「count」を1ずつカウントアップしているのが分かります。

つまり、変数「count」が50以上になったら、繰り返し処理を抜けて終了するという意味になります。

次に、もう少し具体的なサンプルを見てみましょう!

このサンプルでは、まず最初に「flag」へ「true」が代入されているのが分かります。
これにより、「while文」の条件式はtrueと評価されるため、「flag」がfalseになるまで繰り返しを続けるという意味になります。

そして、繰り返しの中身ですが、「random()」を使って0〜9までの乱数を毎回発生させています。
この乱数に「1」が出現したタイミングで、「IF文」の処理が実行されて「flag」にfalseが代入されると繰り返し処理が終了するという流れになっています。

最初のサンプルでは、何らかの変数を比較してループ処理を作成していましたが、上記のサンプルでは「true / false」を代入することでループ処理を作成しました。

どちらの方法もよく使われるので、実際に試しながら使い方を確認しておきましょう!

「do – while文」を使ってみよう!

ここからは、「do – while文」について学習をしていきます。

基本的な考え方は「while文」と同じなのですが、処理の手順に違いがあるので混乱しないように詳しく見ていきましょう!

まずは、一般的な構文です!

「while文」と決定的に違うのは、繰り返し処理を必ず最初に1回実行するという点です!

そのあとで、「条件式」を評価してループを抜けるかどうかを決めていく流れになっています。

「繰り返し処理」を最初に実行するという考え方は、次のサンプルで具体的に見ていきましょう!

出力結果は…

となります。

このサンプルでは、変数「count」が1つずつカウントアップしていき、「5」よりも大きくなったら処理を終了する基本的な例です。

ここでは、「count」の初期値に「0」が代入されていますが、5よりも大きな数値が初期値として代入されていたらどうなるでしょうか?

次のサンプルを見てください!

出力結果は…

この例では、条件式にある「5」よりも大きな数値が「count」に初期値として代入されています。

通常の「while文」であれば、何も実行することなく処理が終了するのですが、「do – while文」の場合はまず最初に繰り返し処理が1回実行されるので、カウントアップ処理が行われます。

そのため、出力結果に初期値の「10」から1つカウントアップした「11」が表示されたというわけです。

実際のプログラミングにおいて「do – while文」を使う機会は少ないですが、「while文」との違いについてはよく理解しておくようにしましょう!

ループ処理を抜ける方法!

ここからは、繰り返し処理を途中で抜けるための「continue」「break」について、学習をしていきましょう!

それぞれの違いは次のとおりです!

・continue:処理を中断して、次の処理に移る

・break:処理を中断して、繰り返しを終了する

まずは、次のサンプルを例にして「continue」の使い方を解説します!

出力結果は…

となります。

このサンプルでは、変数「count」が偶数の時だけ「IF文」を使って「continue」を実行しています。

「continue」を実行することで、それ以降の処理が行われないので、結果的に偶数が表示されずに奇数だけが出力結果に表示されるわけです。

それでは、このサンプルを「break」に置き換えてみましょう!

出力結果は…

となります。

このサンプルで分かるように、「break」が実行されると「while文」を途中で終了させてしまうので、出力結果に表示されるのは最初の「1」だけとなるわけです。

この「continue」と「break」については、「for文」などにも利用できるので、繰り返し処理を「条件式」以外で制御する方法として覚えておくようにしましょう!

無限ループについて!

最後に、無限ループについて解説しておきます!

「無限ループ」とは、永久に繰り返し処理が続いてしまう状態のことを指し、何も操作ができなくなってしまうだけでなく、コンピュータに不具合を起こしかねないケースに繋がることもあります。

「while文」を例にすると、次のサンプルコードは「無限ループ」になります。

「while文」は条件式を評価し、その条件が「true」になっている間は繰り返し処理を実行するわけですが、その条件式に「true」を直接指定すれば永久に処理が繰り返されて「無限ループ」になるというわけです。

もちろん、条件式が間違っていたり、カウントアップ処理を忘れていた場合なども同じように「無限ループ」が起こりかねません。

このような場合に備えて、先ほど学習した「break」などで制御できる処理を書いておくのも1つの方法でしょう。

まとめ

今回は、「while文」の基本から注意するべきポイントまで、一通り学習しました!

ここで、もう一度ポイントだけをピックアップしてみましょう!

・while文は、条件式が「true」の間はずっと繰り返し処理を実行する!

・do – while文は、最初に1回だけ繰り返し処理を実行する!

・繰り返し処理を途中で制御するには「continue」「break」がある!

・条件式に、直接「true」を記述すると無限ループになるので要注意!

これらのポイントを踏まえて、ぜひ自分なりの繰り返し処理を書けるように実践してみましょう!

JavaScriptカリキュラム無料公開中!

この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。

JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


JavaScriptを最短で習得したい方へ

弊社マンツーマンレッスンでは、未経験者の方でも安心して学習できるように

  • プログラミング基礎学習
  • オリジナルアプリ開発
  • 仕事獲得

まで徹底したサポートを行っています。

まずは『無料体験レッスン』で、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか?

JavaScriptならではの学習方法や仕事獲得方法など、より具体的なアドバイスもさせていただいています。

詳しくは下の画像をクリックして弊社サービス内容をご確認ください。

cta_js5

学習者インタビュー

32歳ベンチャー企業元役員が起業してプログラミングを学んだ話
ヨガスタジオのマネージャーだった私が3ヶ月でWeb制作をマスターするためにした”たった1つ”のこと
Uターン女子がRubyを学んで理想のライフスタイルを手に入れた話
ダメ営業マンがわずか3ヶ月でエンジニアデビューできた理由

プログラミング学習者必見

専属講師に質問し放題、レッスンし放題、最短1ヶ月でフリーランスエンジニア
プログラミング学習カリキュラム無料公開中
Ruby学習カリキュラム無料公開中
 1記事最大11,000円!テックライター募集


LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。

JavaScript以外の趣味は、旅をしながらの登山やアジア巡りなど。