home
twitter
ページトップへ
目次
  • JavaScriptのwhile文とは?
  • なぜwhile文は便利か?
  • while文の具体的な書き方
  • どのように動くか?
  • 無限ループを避ける
  • 「繰り返す処理」は複数行、追加できる。
  • 一度も処理が実行されない場合もある。
  • do while文とは?
  • 「do while文」の具体的な書き方
  • 何が起こっているか?
  • 「while文」と「do while文」の違いとは?
  • この違いによる影響
  • どんなところで便利か?
  • 拡張性を考える時
  • 読みやすさ
  • まとめ
about
categories
page
archive
皇帝ペンギンブログ

2022/08/21 (更新日:2024/12/04)

【JavaScript】「while文」と「do..while文」の使い方!【繰り返し処理】

Categories > JavaScriptの入門編
JavaScriptのwhile文の使い方が知りたい!

この記事では、JavaScriptのwhile文の使い方を解説します。

while文を使うことで、条件によって繰り返される処理が簡潔に書けます。

初心者にも分かるように丁寧に書いていますので、ぜひ一度お読みください!

また、下の動画でも「while文」と「do..while文」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ!

では、内容へ入ります!

目次
非表示
  • JavaScriptのwhile文とは?
  • なぜwhile文は便利か?
  • while文の具体的な書き方
  • どのように動くか?
  • 無限ループを避ける
  • 「繰り返す処理」は複数行、追加できる。
  • 一度も処理が実行されない場合もある。
  • do while文とは?
  • 「do while文」の具体的な書き方
  • 何が起こっているか?
  • 「while文」と「do while文」の違いとは?
  • この違いによる影響
  • どんなところで便利か?
  • 拡張性を考える時
  • 読みやすさ
  • まとめ

JavaScriptのwhile文とは?

JavaScriptにおけるwhile文を使うことで、「条件によって」繰り返しの処理が「簡潔に」書くことができます。

なぜwhile文は便利か?

この書き方をすると、何度も同じコードを書かなくてもいいので、単純にコードがすっきりします。

また、急な修正にも対応しやすくなります。

while文の具体的な書き方

while ( 条件式 ) {
    繰り返す処理
}

この様に、書くことで、while文は動きます。

どのように動くか?

まず、条件式が評価されます。

その結果が「true」であれば、{}の中の「繰り返す処理」の部分が一度だけ実行されます。

そして、また条件式が評価されます。

その結果が「true」であれば、{}の中の「繰り返す処理」の部分が、また一度だけ実行されます。

これを繰り返して、whileに与える条件式が「false」になったら、ループ処理は止まります。

無限ループを避ける

<pre><code>let i = 0;
while ( i &lt; 4 ) {
    alert(&quot;GO!&quot;);
}</code></pre>

このような「while文」を書くと、「i」はずっと「0」のままなので、無限ループとなります。

意図的にそれがしたい時はOKですが、他の命令が止まってしまうので、基本的に無限ループは使いません。

let i = 0;
while ( i < 4 ) {
    alert("GO!");
    i++;
}

このように「i++」加えてあげることで、無限ループを回避することができます。

「繰り返す処理」は複数行、追加できる。

let i = 0;
while ( i < 4 ) {
    alert("GO!");
    console.log( i );
    console.log( i * 2 );
    i++;
}

この様に、「繰り返す処理」は複数行書くことが可能です。

一度も処理が実行されない場合もある。

let i = 10;
while ( i < 4 ) {
    alert("GO!");
}

このような時は、一度も {} の中の処理は実行されません。

まず、条件式が評価され、その初めての評価の時点で「false」が返されてしまうため、一度も「繰り返す処理」の部分が実行されないのです。

「少なくとも1回は処理を実行させたい。」

このような時は、「do while文」を使えば上手くいきます。

do while文とは?

「do while文」を使うと、少なくとも1回は「繰り返す処理」の部分を実行させることができるバージョンのwhile文です。

では、その書き方を具体的に解説しますね。

「do while文」の具体的な書き方

do {
    繰り返す処理
} while ( 条件式  );

「do while文」は、このように書きます。

何が起こっているか?

まず、「繰り返す処理」の部分が実行されます。

そして条件式が評価されます。

その条件式が「true」の場合は、もう一度「繰り返す処理」の部分が実行されて、

また評価されます。

そしてこのループが条件式が「false」になるまで続きます。

なので、少なくとも1回は「繰り返す処理」の部分が実行されます。

「while文」と「do while文」の違いとは?

「while文」と「do while文」の違いは、条件式の評価が「どのタイミングで行われるか」です。

while文は「繰り返す処理」が実行される「前」に「毎回」評価されます。

do while文は、「繰り返す処理」が実行された「後」に「毎回」評価されます。

この違いによる影響

この違いは何に影響を及ぼすのか?を考えていきます。

while文は、1回も「繰り返す処理」の部分が実行されない可能性があります。

do while文は、少なくとも1回は「繰り返す処理」が実行されます。

この違いですね。

どんなところで便利か?

「ところで、for文を使ったループ処理ってそんなに便利なの?」という疑問もでるかもしれないので、それについて解説します。

結論、上手く使えば便利です。

拡張性を考える時

例えば、「10回だけ同じ処理を繰り返す」、などのようなコピペなどで対応できそうなコードも、将来的にそのコードが100回繰り返すように変更するかもしれません。

その時に備えて、柔軟に書けるように準備しておくと、いいかもしれません。

修正するときも簡単

修正が入る時に、while文を使っていたら、「繰り返す処理」の箇所を変更するだけで済みます。

ですが、なんども同じ処理を書いていた時は、その分、書き換える箇所が多いはずなので、ミスが起こったり、単純に面倒です。

読みやすさ

while文を使っても使わなくても、動きは同じかもしれませんが、読みやすさが違ってきます。

while文だと、すっきりかけますし、何回繰り返すかも、条件式と変化式を見ることで簡単に把握できます。

コピペで何行も同じ処理を書いていた場合は、何回繰り返すのかが分かりづらいです。

また、全て同じ処理が書かれているか?を確認する必要もでてくる、かもしれないです。

他人が読むかも

そして、自分は分かっていても、他の人がそのコードを読むことが後からあるかもしれないので、そのことも考慮するとfor文は積極的に使うべきだと思います。

例えば、なんかの理由によりチーム開発に切り替えるとか、単純に引き渡すとか、教えてもらうときに読んでもらうとか、ですかね。

まとめ

JavaScriptのwhile文を使うと、繰り返す処理が簡潔に書ける。

while ( 条件式 ) {
    繰り返す処理
}

このように書く。

※「繰り返す処理」は複数行書ける。

while文は条件式が「true」となる限り繰り返される。

一度でも条件式が「false」となると、while文は止まる。

条件式が評価されるのは、「繰り返す処理」が実行される「前」である。

よって、1回も「繰り返す処理」が実行されない可能性がある。

「do while文」

「do while文」は、少なくとも1回は「繰り返す処理」を実行させたい時に便利。

do {
    繰り返す処理
} while ( 条件式  );

この様に、書く。

また、下の動画でも「while文」と「do..while文」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ!

「while文」と「do while文」を上手く」使うとより簡潔にコードが書けるようになるので、どんどん活用していきましょう!

それではまた!

自分のロゴ!

皇帝ペンギン

全力で、書きます。
少しでもお役に立てたら幸いです。
楽しんで読んで下さい 。-_- 。
よろしくお願いします!

x(旧twitter) youtube
Categories
  • トップへ
  • ITパスポート (1)
  • programming (168)
    • CSSのアニメーション編 (26)
    • CSSのグリッドレイアウト編 (1)
    • CSSのセレクター編 (58)
    • CSSのフレックスボックス編 (1)
    • CSSのメディアクエリー編 (7)
    • CSSの基本編 (34)
    • HTMLのformタグ編 (1)
    • HTMLの基本編 (3)
    • JavaScriptの入門編 (30)
    • JavaScriptの基本編 (5)
    • Web制作をする環境を整えよう! (1)
  • Uncategorized (23)
  • VScode (1)
  • おすすめ商品! (1)
  • クラロワ (2)
  • マーケティング (17)
  • 大学生活 (7)
  • 心理学 (9)
  • 映画 (1)
  • 法学 (4)
  • 経済学 (4)
  • 読書 (7)
Pages
  • プライバシーポリシー
  • 免責事項
  • プロフィール
Archive
  • 2025年3月 (1)
  • 2025年1月 (9)
  • 2024年12月 (13)
  • 2024年11月 (5)
  • 2024年10月 (10)
  • 2024年9月 (15)
  • 2024年8月 (5)
  • 2024年7月 (6)
  • 2024年6月 (5)
  • 2024年5月 (10)
  • 2024年4月 (24)
  • 2024年3月 (11)
  • 2024年2月 (6)
  • 2024年1月 (10)
  • 2023年12月 (4)
  • 2023年11月 (3)
  • 2023年10月 (2)
  • 2023年9月 (3)
  • 2023年8月 (6)
  • 2023年7月 (3)
  • 2023年6月 (8)
  • 2023年5月 (2)
  • 2023年3月 (1)
  • 2023年2月 (1)
  • 2022年10月 (2)
  • 2022年9月 (2)
  • 2022年8月 (8)
  • 2022年7月 (2)
  • 2022年6月 (6)
  • 2022年5月 (9)
  • 2022年4月 (2)
  • 2022年2月 (4)
  • 2021年12月 (1)
  • 2021年11月 (4)
  • 2021年10月 (8)
  • 2021年9月 (14)
  • 2021年8月 (6)
  • 2021年6月 (1)
  • 2021年5月 (2)
  • 2021年4月 (1)
  • 2021年3月 (1)
  • 2021年2月 (2)
  • 2020年10月 (1)
  • 2020年7月 (1)
  • 2020年4月 (1)
  • 2020年1月 (1)
  • 2019年12月 (2)
© Copyright Syuta Chiba, 2019 All Rights Reserved.