【JavaScript入門】while文で繰り返し処理の使い方まとめ!

javascript-while-re2
マサト
書いた人 マサト
侍エンジニア塾ブログは、未経験からWebアプリ開発と仕事獲得をサポートする
侍エンジニア塾のオウンドメディアです。
プログラミング学習を覗き見

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

今回は、JavaScriptで繰り返し処理を行うための「while文」について学習をしていきましょう!

この記事では、

・「while文」とは?
・「while文」の使い方

という基本的な内容から、

・「do…while文」の使い方
・ループ処理を抜ける方法
・ループ処理の遅延(wait)処理
・無限ループの注意点

などの応用的な使い方に関しても解説していきます。

この記事で、「while文」をしっかり学習して自分のスキルアップを目指しましょう!

「while文」とは?

それでは、まず最初に「while文」について基本的な知識から学習を進めていきましょう!

「while文」は、主に回数の決まっていない繰り返し処理を行うために使われるメソッドになります。

一般的にプログラムは、上から下へ処理されて1度実行されると終了してしまいます。

そこで、何度も同じプログラムを実行したい場合には繰り返し処理として「while文」のようなメソッドが必要なのです。

特に、ゲームプログラムなどにおいては、繰り返し処理を駆使してダイナミックな動きを表現することがあります。

「while文」の使い方

この章では、「while文」の基本的な使い方について学習をしていきましょう!

基本となる書き方や実行方法、実践的なサンプル例などについて見ていきます。

while文の構文と書き方について

まずは、「while」の構文について学んでいきましょう!

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

このように、まず最初に「条件式」を評価するところから始まります。

この条件式が「true」の間はずっと繰り返し処理を実行し続けるという意味になるので覚えておきましょう!

whileでループ処理を作成する方法

次に、実際のサンプル例として簡単な繰り返し処理を作ってみましょう!

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

この例では、whileの条件式が「count <= 50」となっているのが分かりますね。

つまり、変数「count」の値が50より大きい数値になるまでは、繰り返し処理を続けるという意味です。

繰り返し処理の中では「count」を1ずつカウントアップしているのが分かります。

そのため、変数「count」が50より大きくなったら自動的に繰り返し処理を抜けて終了するわけです。

実践的なループ処理のサンプル例

今度は、もう少しだけ実践的な繰り返し処理を作ってみましょう!

Boolean型を活用して、任意のタイミングで繰り返し処理を抜けるようにしてみます。

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

このサンプルでは、まず最初に「flag」へ「true」が代入されているのが分かります。

これにより、「while文」の条件式はtrueと評価されるため、「flag」がfalseになるまで繰り返しを続けるという意味になります。

そして、繰り返しの中身ですが、「random()」を使って0〜9までの乱数を毎回発生させています。

この乱数に「1」が出現したタイミングで、「IF文」の処理が実行されて「flag」にfalseが代入されると終了します。

このように任意のタイミングで繰り返し処理を制御する方法はよく使われるので参考にしてみてください。

「do…while文」の使い方

この章では、while文とよく似た機能を持つ「do…while文」について学習します。

基本的な構文や書き方と繰り返し処理の作り方について見ていきましょう。

do…while文の構文と書き方について

まずは、基本となる構文から見ていきましょう!

考え方としては「while文」と同じなのですが、処理の手順に違いがあるので混乱しないようにしてください。

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

「while文」と決定的に違うのは、条件式に関わらず必ず処理を最初に1回だけ実行するという点です!

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

do…whileでループ処理を作成する方法

次に、実際の流れを確認するために簡単な繰り返し処理を作ってみましょう!

まずは、次のサンプル例を見てください!

実行結果

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

注目して欲しいのは「count」の初期値に「0」が代入されている点です。

これが5よりも大きな数値が初期値として代入されていたらどうなるでしょうか?

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

実行結果

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

通常の「while文」であれば、何も実行することなく処理が終了しますよね?

ところが、「do…while文」の場合はまず最初に繰り返し処理が1回実行されるので、カウントアップ処理が行われます。

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

この違いは重要なので、実際に自分でもプログラミングして確かめるようにしてみてください。

ループ処理を抜ける方法

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

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

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

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

「continue」を使って処理をスキップする方法

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

出力結果は…

となります。

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

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

「break」を使って処理を止める方法

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

出力結果は…

となります。

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

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

JavaScriptのfor文について詳しく知りたい方は以下の記事が参考になります。

ぜひ、for文における「continue」と「break」も使いこなせるようになり、プログラミングの幅を広げてみましょう。

ループ処理の遅延(wait)処理

この章では、繰り返し処理の実行タイミングについて詳しく見ていきましょう!

ここで言う実行タイミングとは、一定の速度で実行される処理を意図的に遅延させる方法のことです。

while文だと意図的に繰り返し処理を遅延させることはできませんので、他のメソッドを利用します。

必要なのはJavaScriptの標準で用意されている「setInterval()」メソッドです。

これは一般的なタイマー処理を実現させるメソッドですが、繰り返し処理を作る方法としてもよく利用されます。

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

この例では、setInterval()の第2引数に500を設定することで、0.5秒間隔で繰り返し処理を実行しています。

つまり、第2引数の値を変更することで意図的に遅延を制御することができるわけです。

注意点として、setInterval()を利用した際には「clearInterval()」でタイマーを停止させておくようにしましょう。

このように記述すれば、指定した条件によって自動的にタイマーは停止するので処理の負荷を軽減できます。

さらにsetInterval()について詳しく学習したい方は、次の記事でまとめているので参考にしてみてください!

無限ループの注意点

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

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

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

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

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

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

まとめ

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

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

・while文は、条件式が「true」の間はずっと繰り返し処理を実行する!
・do…while文は、最初に1回だけ繰り返し処理を実行する!
・繰り返し処理を途中で制御するには「continue」「break」がある!
・条件式に、直接「true」を記述すると無限ループになるので要注意!

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

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

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

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


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

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


無料体験レッスン実施中

今あなたはこんな悩みをお持ちではないでしょうか?

「つまづいてばかりで学習が進まない…」
「どこまで勉強すればいいのか、終わりが見えない…」
「習得できたとしてもどうやって仕事につなげればいいのかわからない…」

プログラミング学習やキャリアに関してお困りであれば、まずは『無料体験レッスン』にお申し込み下さい。

あなたにとって、最適の解決策をご提案させていただきます。

詳しくは下の画像をから詳しいサービス内容をご確認ください。

cta_js2

学習者インタビュー

人気講師インタビュー

人気記事セレクション

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

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


LINEで送る
Pocket

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

最新情報をお届けします

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。
疑問や質問などあればお気軽にどうぞ!
お問い合わせフォーム