JavaScriptのwhile文が誰でもわかる!初心者が知りたい情報満載!

web開発

2017/07/10

web開発

プログラミング言語JavaScriptのwhile文について、JavaScript初心者向けに解説します。

スマホでもPCでも見やすい図を使ってJavaScriptのwhile文について解説しているので、わかりやすい内容です。

本記事を読めば、JavaScriptのwhile文の書き方、具体例、breakとcontinue、無限ループとは何か、while文とdo while文の違いが理解できるでしょう!

盛りだくさんの内容なので、ぜひ最後まで読んで、JavaScriptのwhile文の基礎をマスターしましょう!

 

JavaScript while文の書き方

プログラムのなかで、同じ処理を繰り返し実行したいときがあります。そういった場合は、while文を使うと、簡単にループを実現することができます。

while構文は以下の通りです。

JavaScript while文の解説

whileのカッコ内にある条件式が正(true)の間は、while内の処理を繰り返し実行します。条件式が誤り(false)になった場合にはwhile文を抜けて次の処理に移ります。

では、次の項でwhile文を使ってみましょう。

 

JavaScript while文の具体例

それでは、while文を使った簡単なサンプルコードコード1を見てみましょう。

サンプルコード1は「0から10までの数字を順に出力する」を実現するプログラムです。

実行結果をみると、0〜10が繰り返し実施されていることがわかります。また、10より大きい値が出力されていませんので正しくwhile文の条件式を処理し終了したことがわかります。

 

JavaScript while文におけるbreak

while文での繰り返し処理の中で、ある条件になったら処理を中断して欲しい場合があります。

そのような場合では、「break」を用いてループ処理を強制的に抜けましょう。

構文は以下の通りです。

それでは、breakを使う例を見てみましょう。

次のサンプルコード2では、先程のサンプルコード1に「もしcount変数が3より大きな数字がでたらbreakを実行する」条件を付け加えたものです。

出力結果をみると3からあとの数字は出力されていません。if条件内のbreakが実行されwhile文のループから正常に抜けていることがわかりますね。

 

JavaScript while文におけるcontinue

前項の処理では、ある条件になったらbreakを実行しループ処理を終了するものでした。今回は、「ある周回の特定の条件に一致するループをスキップする」を実現したいと思います。このような、処理を実現するにはcontinueを利用します。

構文は以下の通りです。

continue文が実行されると,以降の処理「繰り返し行う処理2」はスキップされます。

では、サンプルソースコード3を見てみましょう。

こちらは「1〜10」を出力するプログラムに、「もしcount変数が3になったら、その周回をスキップする条件」が追加されたものです。

実行結果では3が出力されていませんが、4〜10の以降の処理は実行されていることがわかります。

continue文が実行されてもループ処理から抜けておらず、継続的に以降のループが実行されていることがわかります。

この様に、continue文を使うことで特定の周回のみをスキップする処理が実現できます。

 

JavaScript while文における無限ループについて

一般的にプログラムのループ処理が終わらず、無限に繰り返し処理が行われる状態を「無限ループ」と呼びます。while文で無限ループを書くとすると下記のように記載することができます。

while文内の条件式が常に成立するにように「1」または「true」を入れることによって無限ループとなります。

無限ループは、上限式が決して「false」になることがありませんのでループが永遠と実行されます。

このような無限ループは、パソコンに負荷をかけ続けることになります。

最終的にはプログラムがクラッシュする場合もあります。whileなどのループを書く場合は、ループ内の条件が必ずfalseになることを確かめるようにしましょう。

無限ループの多くは、記載ミスによって発生することが多いです。

例えば、下記のようなケースを考えてみましょう。

このサンプルコードは、サンプルコード1にcount++を書き忘れてしまったケースです。

count変数が常に0 のままとなってしまいます。条件式が常にtrueとなってしまうことで、無限ループとなります。

この様に、意図していない無限ループにならないように気をつけましょう。

 

JavaScript while文とdo while文の違い

whileを使うケースで 「do…while文」があります。通常のwhile文の処理では、最初に条件式の評価が行われます。

条件によっては、一度もwhile文内の繰り返し処理を行わず。ループが終了してしまう場合があります。

但し、1回はループ内の処理をしてから、条件式の評価をして欲しい場合もあります。そういった場合には「do…while」が有用です。

構文は以下の通りです。

do内の処理が実施後、whileの条件式の評価が正しい限りdo内の処理を繰り返します。

実際に簡単なプログラムを見てみましょう。

do…whileの流れ

①do内の処理:変数countに1を足す。コンソールにcountの値を出力する。
②whileの条件式を評価、正の時①を実施.誤の時,do…whileのループを抜ける。

①の処理が必ず最初に実行されると何がうれしいのでしょうか?普通のwhile文でも同じことができますよね?

では、次のwhile文を見てみましょう。

こちらの実行結果は、先程のdo…whileとまったく同じですね。

それでは、countの値が100の時を考えてみましょう。

do…while文

while文

このような出力の差がでてきました。条件にかかわらず一度処理をしてから評価をしてほしい場合などは「do…while文」を使いましょう。

udemyでは、JavaScript初心者向けの動画学習講座を用意しています。

ぜひ受講して、JavaScriptをマスターしてみてはいかがでしょうか?

目的別!最先端ITスキル講座

海外の人気講師によるWeb制作のベストセラ―講座

【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)
【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)

ウェブデザインの基礎、サーバーサイドプログラミング、モバイルアプリ開発、APIプログラミングなどを網羅的にマスターできる

最新!iOS11アプリ開発講座

【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC
【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC

地図検索、ARなど20個以上のアプリを作って学べる実践講座

日本を代表するデータサイエンティスト辻真吾氏による人気講座

【世界で5万人が受講】実践 Python データサイエンス
【世界で5万人が受講】実践 Python データサイエンス

データ解析の基本、可視化、統計、機械学習などデータサイエンスに関するあらゆる実践的なスキルがPythonで身に付く!

初級者から学べる人工知能講座の決定版

みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習
みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習

初心者向けの人工知能と機械学習のコース。文字認識や株価分析なども実施

  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー
  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー

関連記事