JavaScript

JavaScriptのwhileでループを行う【無限ループに注意】

どうも、つよぽんです!

今回は、JavaScriptでループ処理を実装するために使う「while」の解説をします。

今回の記事は次のような方に向けて書きました。

想定読者
  • ループ処理ってなに?
  • 繰り返す処理を実装したい
  • whileの使い方を知りたい

今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
JavaScriptでループ処理をする【Whileループ】プログラミングでは同じ処理を繰り返し行いたい場面が数多く現れます。そのような場面で使える「Whileループ」について学習します。また、「Whileループ」を使うときは気をつけないと処理が止まってしまう可能性もあるので、その注意点の解説もします。...

それでは次の内容で話を進めていきます。

今回の内容
  1. ループ処理とは
  2. JavaScriptのwhileの書き方
  3. JavaScriptのwhileを使うときの注意点

 

ループ処理とは

この章では、「ループ処理とは何か?」について解説します。

まず最初に結論から言うと、ループ処理とは「同じ処理を何回も繰り返して行うこと」を言います。

これだけだとわかりづらいかと思うので2つほど例を出して考えてみましょう。

例1: 授業で生徒20人の出席確認を行う

あなたは学校の先生生徒20人のクラスを受け持っていると想像してください。

授業が始まる前に生徒20人が全員出席しているかどうか確認をする際にループ処理を行います。

このときのループ処理の流れは次のようになります。

出席確認のループ処理
  1. 1人の生徒の名前を呼ぶ
  2. 返事があれば出席、返事がなければ欠席と出席簿に記述する
  3. 全員分の出席確認が終わっていなければの処理を繰り返す
  4. 全員分の出席確認が終わっていればループ処理を終了する (出席確認終了)

例2: 10問正解が出るまで帰れないクイズ番組

帰れま10」というクイズ番組をご存知でしょうか?

この番組は、飲食店の人気商品をトップ10を出さないと帰れないクイズ番組で、この番組の内容をプログラムで実現したいときにもループ処理で実装することが出来ます。

このときのループ処理の流れは次のようになります。

帰れま10のループ処理
  1. 1つ商品を選ぶ
  2. 選んだ商品が「トップ10の商品であれば正解」、「トップ10の商品でなければ不正解」
  3. トップ10の商品の中にまだ答えが出ていないものがあればを繰り返す
  4. トップ10の商品を全て解答したらループ処理を終了する (帰ることが出来る)

このように「ある条件を満たさない限り同じことを繰り返す」処理をループ処理といいます。

JavaScriptのwhileの書き方

この章では「while」を使ったループ処理の書き方について解説します。

以下の画像は「while」を使ったループ処理についてまとめた画像となります。

ループ処理の書き方とサンプルコードループ処理の書き方とサンプルコード

画像左上の緑背景部分に書いて内容が「while」を使ったループ処理の書き方になります。

条件と書いている部分がtrueである間は「{}」の中に記述された部分の処理が何度も繰り返されます。

上のサンプルコードでは「console.log(‘ループ内: ‘, num);」「num++;」という処理が繰り返し実行される処理となります。

画像内で使っているサンプルコードは以下のリンクから確認することが出来ます。

whileループのサンプル

JavaScriptのwhileを使うときの注意点

この章では、「while」を使うときの注意点について解説します。

注意点の内容を説明するためにもう一度先程の画像を以下に貼り付けます。

ループ処理の書き方とサンプルコードループ処理の書き方とサンプルコード

画像左上の緑背景部分でも書いてあるとおり、条件trueである限り「{}」の中に記述されている処理が繰り返し実行されます。

このときに注意したいのが「条件」の部分で、もしこの「条件」の部分に「true」という値を直接セットしたら、一生trueのままになるのでループ処理を終了させることが出来ません

この状態のことを「無限ループ」といいます。

無限ループを発生させないためには「条件」の値が切りかわるように「比較演算子」や「論理演算子」を使います。

ループ処理が終了するまでの流れ

上の画像内のサンプルコードでは「num < 1000」という比較演算子を使って、「true」「false」を切りかえられるようにしています。

そして「num」の値はループ処理の末尾で「num++;」とすることで1回ループするごとに「1, 2, 3, …」と値を1つずつ足しています。

そのうち「…, 998, 999, 1000」となるので「1000」になったタイミングで「条件」が「false」となるのでループ処理が終了します。

無限ループが発生した場合の挙動

無限ループが発生してしまうと、ループを抜けたあとの処理に移ることが出来なくなります。

また、処理の続きを実行できなくなるだけでなく、Webページが固まってしまいます。(スクロールできない、クリックできないなど)

そのような状態になると、Webページにアクセスした人は「どうして動かないんだ?」「壊れてしまったのかな?」といった状態になるので、「while」を使うときは無限ループが発生しないように気をつけましょう。

最後に、ループ処理が発生してしまうサンプルを以下の画像にまとめておきます。以下の画像に書いてある実装は避けるようにしましょう。

無限ループが発生する例無限ループが発生する例

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  1. ループ処理とは「同じ処理を繰り返すこと」である
  2. while」を使うことでループ処理を実装できる
  3. whileループは実装を気をつけないと無限ループを発生させてしまう

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
JavaScriptでループ処理をする【Whileループ】プログラミングでは同じ処理を繰り返し行いたい場面が数多く現れます。そのような場面で使える「Whileループ」について学習します。また、「Whileループ」を使うときは気をつけないと処理が止まってしまう可能性もあるので、その注意点の解説もします。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です