JavaScript

JavaScriptのforループの書き方【whileとの比較】

どうも、つよぽんです!

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

以前は、forとは別に、「while」を使ったループ処理の実装を解説しました。今回の記事では「for」「while」の違いについても説明していきます。

whileを使った書き方を知らない方は、一度以下の記事を読むことをオススメします。

あわせて読みたい
JavaScriptのwhileでループを行う【無限ループに注意】JavaScriptでループ処理を行うための1つの手段である「while」について解説をします。whileを使うことで、何回も繰り返して行いたい処理を実装できます。しかし無限ループも発生しやすいのでwhileを使うときは注意が必要です。...

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

想定読者
  • forを使ったループ処理の書き方を知りたい
  • forとwhileのループ方法があるけど、どっちを使えば良いの?

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

あわせて読みたい
JavaScriptでループ処理をする【forループ】前回、ループ処理を実現する方法として「Whileループ」について学習しました。今回は別のループ処理である「forループ」について解説します。基本的にはwhileループを使うよりforループを使うほうが安全です。その理由にについても学習します。...

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

今回の内容
  1. JavaScriptのforループの書き方
  2. JavaScriptのforとwhileの比較

 

JavaScriptのforループの書き方

この章では、JavaScriptでの「for」を使ったループの書き方を解説します。

以下の画像は、JavaScriptでのforループの書き方の解説と、実際にforを使ったループ処理の実装をしたサンプルとなります。

JavaScriptのforループの書き方JavaScriptのforループの書き方

画像の左上の緑背景の部分にforループの書き方をまとめています。

forを使うときは、forの直後の「()」中に次の3つを左からセミコロン(;)区切りで記述していきます。

記述する3つの内容
  1. 初期化 : 変数の初期化をする。変数0を代入したものをセットすることが多い。
  2. 条件 : ループを繰り返す条件をセットする。比較演算子を使うことが多い。
  3. 1ループ終わるごとの処理 : 1回ループが終わるごとに実行する処理を記述。で初期化した変数をインクリメントすることが多い。

サンプルコード内の実装を観ると「①let i = 0 (初期化)」「② i < 10; (条件)」「③ i++ (1ループ終わるごとの処理)」となっています。

これにより、このサンプルコードのループの流れは以下の通りになります。

ループの流れ
  1. 1回目のループ開始時は変数iの値は0、「0 < 10」true、ループ終了時に「i++」が実行されて変数iの値は1増えて1になる
  2. 2回目のループ開始時は変数iの値は1「1 < 10」true、、ループ終了時に「i++」が実行されて変数iの値は1増えて2になる
  3. 3回目のループ開始時は変数iの値は2「2 < 10」true、ループ終了時に「i++」が実行されて変数iの値は1増えて3になる
  4. …省略
  5. 10回目のループ開始時は変数iの値は9「9 < 10」true、ループ終了時に「i++」が実行されて変数iの値は1増えて10になる
  6. 11回目のループ開始時は変数iの値は10「10 < 10」false条件falseとなったためループの中身は実行されずに終了して、forループを抜ける。

上記の流れの通り、11回目のループ処理を行おうとしたときに、条件falseとなるため11回目のループは実行されず、実質10回のループを行う実装となる。

上の画像のサンプルコードは以下のリンク先から直接確認することが出来ます。

forループのサンプル

JavaScriptのforとwhileの比較

この章では、「for」と「while」の比較をします。

JavaScriptの「for」と「while」書き方の比較

JavaScriptの「for」と「while」の書き方を比較するのに言葉だけだと分かりづらいので、以下の画像を用意しました。

左が「for」を使ったループの実装、右が「while」を使ったループの実装になります。

ループ内の処理の内容は全く同じですが、書き方は違います。

for・whileの処理で行っていることをまとめると次のとおりです。

for・whileで行っている内容
  1. 変数numに0を代入 (初期化)
  2. 変数numの値が10未満である限りループ処理を行う (条件)
  3. ループ処理の内容は、現在の変数numの値をconsole.logで出力すること
  4. 1ループ終わるごとに「num++」で変数numの値を1増やす

処理内容は全く同じですが、forとwhileで記述方法が異なっています。

forを使った場合は、「初期化」「条件」「1ループ終わるごとの処理」を1箇所まとめて記述します。(forの直後の「()」の中に記述。)

しかしwhileの場合は、「初期化」「条件」「1ループ終わるごとの処理」の処理が全部バラバラで記述されています。

この「全部バラバラで記述」されていることが原因で「while」を使った場合は、実装ミスにより無限ループを発生させる可能性がforと比べて高くなります

JavaScriptの「for」と「while」どっちを使うべき?

基本的には「for」を使ったほうが良いです。

理由は「初期化」「条件」「1ループ終わるごとの処理」をまとめて書くことにより、無限ループが発生する可能性が低いからです。

forとwhileを使い分ける際の考え方としては次の流れで考えると良いでしょう。

for・whileの使い分け
  1. forでシンプルに実装できるのであればforを使う
  2. forを使って実装するのが難しい場合はwhileをつかうことを検討する

以降、ループ処理の実装をする際には上記2点を基準として考えていただけたらと思います。

まとめ

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

今回のまとめ
  1. forを使う場合は、「初期化」「条件」「1ループ終わるごとの処理」を1箇所にまとめて記述することが出来る
  2. whileと比べて、forループを使ったほうが無限ループが発生しづらく、安全にループ処理を記述できる
  3. ループ処理を実装する際には、まずforで実装できないか考え、forでの実装が難しい場合にwhileをつかうことを検討する

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

あわせて読みたい
JavaScriptでループ処理をする【forループ】前回、ループ処理を実現する方法として「Whileループ」について学習しました。今回は別のループ処理である「forループ」について解説します。基本的にはwhileループを使うよりforループを使うほうが安全です。その理由にについても学習します。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

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

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

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

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

無料特典を受け取る

 

COMMENT

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