JavaScriptでwhile文を使ってループ処理する方法【初心者向け】現役エンジニアが解説
JavaScriptで【while文】を使ってループ処理する方法をプログラミング初心者向けに解説した記事です。ループ処理のfor文との違いも紹介。処理のあとに条件式の評価を行う「do while文」についても解説しています。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptでwhile文を使ってループ処理する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
- while文とfor文の違い
- while文でcontinue文とbreak文を利用する
- while文とdo while文
- 実際にプログラムを書いてみよう
- countに代入する値が最初から10以上だった場合
- まとめ
- JavaScriptを学習中の方へ
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発できます。
【動画はこちら】
while文とfor文の違い
プログラムの中で、ある数値や数式、文字列を繰り返し用いるシーンは多く見られます。
JavaScriptでループ（繰り返し）処理を行うときは、用途に応じて for文と while文 という2種類を使い分けます。
ざっくり言えば、2つの違いは以下の通りです。
- 繰り返し回数が決まっている場合はfor文
- 繰り返し回数が決まっていない場合はwhile文
この違いがわかったところで、for文の使い方を覚えていきましょう。
while文もfor文のように繰り返し・ループ処理の一種なんですか？
書き方が違うだけで、同じ繰り返し文なんだよ。
同じように処理できるとしても、何か違いがあるんですか？
for文の場合、あらかじめ繰り返す回数を設定するけどwhile文の場合は、より柔軟な形で使えるんだよね。なので無限ループになりやすいので注意が必要だよ。さっそくwhile文を見てみよう！
while文でcontinue文とbreak文を利用する
while文におけるループ処理をスキップする方法
while文におけるループ処理をスキップするためにはcontinueを利用します。
サンプルコード
while (whileの条件) {
if (ifの条件) {
continue;
}
他の処理
}解説
while (whileの条件) {では、whileの条件に合致する間、ループ処理を行います。
if (ifの条件) {では、ifの条件に合致する場合、次のcontinueの処理を行います。
continue;では、ifの条件に合致する場合、それ以降の他の処理を行わず、ループ処理の先頭に戻ります。
while文におけるループ処理を終了させる方法
while文におけるループ処理を終了させるためにはbreak文を利用します。
サンプルコード
while (条件) {
if (ifの条件) {
break;
}
他の処理
}解説
while (whileの条件) {では、whileの条件に合致する間、ループ処理を行います。
if (ifの条件) {では、ifの条件に合致する場合、次のbreakの処理を行います。
break;では、ifの条件に合致する場合、それ以降の他の処理を行わず、ループ処理自体を終了します。
while文でcontinue文とbreak文を利用するサンプルコード
let i = 0;
while (i <= 10) {
i++;
if (i > 5) {
break;
}
if (i % 2 == 1) {
continue;
}
console.log(i)
}
while文でcontinue文とbreak文を利用する解説
let i = 0;では、変数iに0を代入して宣言しています。
while (i <= 10) {では、while文を利用して、変数iが10以下の間処理を繰り返す指定をしています。
i++)、ループ処理を行う度に、変数iに1を加算しています。
if (i > 5) {では、変数iが5より大きい場合という条件を指定しています。
break;では、変数iが5より大きい場合、ループ処理を終了する処理をしています。
つまり、今回のプログラムでは5より大きい数字は処理されないことを意味します。
}では、if (i > 5) {の処理を終了しています。
if (i % 2 == 1) {では、変数iを2で割ったときの余りが1の場合の数値を条件分岐で指定しています。
余りが1ということは、奇数を意味します。
continue;では、ループ処理の最初に戻って処理を継続することを意味します。
つまり、奇数の場合はこれ以降の処理を行わず、ループ処理の最初に戻ります。
これ以降の処理というのは変数iを表示する処理を意味します。
}では、if (i % 2 == 1) {の処理を終了しています。
console.log(i)では変数iをコンソールに表示しています。
コンソールはデベロッパーツールで確認できます。
今回は、このプログラム自体をデベロッパーツールのコンソールに入力して実行していただくと確認できます。
}では、for (let i = 1; i <= 10; i++) {を終了しています。
while文でcontinue文とbreak文を利用する実行結果
while文とdo while文
while文には次の2つがあります。
- while文
- do while文
それぞれの使い方について見ていきましょう。
<while文の構文>
while (条件式) {
繰り返し処理
}
while文の場合は、まず条件式を評価し、その条件式が見合ってはじめて、繰り返し処理を始めます。
ループ処理では、( )のなかの条件式が真である間は、{ }のなかに書いた繰り返し処理を実行し続けます。
条件式が真で制限がなければ、半永久的に処理を繰り返してしまいますので、注意してください。
半永久的に処理が繰り返されることを無限ループと呼びます。
<do while文の構文>
do {
繰り返し処理
} while (条件式)
do while文の場合は、とりあえず先に繰り返し処理を実行して、その後に、whileの条件式を評価し、これが真であれば、そのまま処理を続けるという流れになります。
最初に条件式の評価を行う場合はwhile文、一旦処理を行った後に条件式の評価を行う場合はdo while文という使い分けをします。
実際にプログラムを書いてみよう
では、実際にプログラムを書きながら見ていきましょう。
※変数はcountと指定します
while文の実践
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset = "utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<script>
var count = 0;
while (count < 10) {
document.write (count);
count++
}
</script>
</body>
</html>解説
この変数countが10より小さい場合(count < 10) 、document.writeで値を出力し続けるという処理です。
最後のcount++は、処理を繰り返すごとにcountを1つずつ増やすという指示を意味します。
これがないと、ずっと0の値のままでwhileループがまわってしまうので注意しましょう。
そして、countが0,1,2,……10になったとき、count < 10の条件式が偽になり、ループから抜けます。
ですので、ブラウザではこのように出力されます。
do while文の実践
サンプルコード
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<script>
var count = 0;
do {
document.write (count);
count++;
} while (count < 10);
</script>
</body>
</html>解説
ブラウザには、変わらずこのように出力されますね。
あれ？ whileもdo whileも変わらないのでは？ と疑問に思った方もいるかもしれませんね。
では次は、countに代入する値が最初から10以上だった場合について見てみましょう。
countに代入する値が最初から10以上だった場合
while文の実践
ためしに、countに20を代入して実行してみます。
<script>
var count = 20;
while (count < 10) {
document.write (count);
count++
}
</script>
偽になってしまうので、while文では何も出力されません。
do while文の実践
同じことをdo whileでもやってみます。
<script>
var count = 20;
do {
document.write (count);
count++;
} while (count < 10);
</script>
do whileの場合は、最初の1回は条件に関係なく処理が実行され、2回目以降にはじめて真偽が評価されます。
そのため、ブラウザではこう出力されます。
基本的にはwhile文を使い、条件式を満たすか満たさないかに関わらず一旦処理を実行したいような場合に限り、do while文を使うというような使い分けをします。
まとめ
今回は、JavaScriptでwhile文を使ってループ処理する方法の解説をしました。
繰り返し回数が決まっている場合はfor文を使いました。
繰り返し回数が決まっていない場合はwhile文を使いました。
while文におけるループ処理をスキップするにはcontinueを利用し、ループ処理を終了させるにはbreakを利用しました。
最初に条件式の評価を行う場合はwhile文、一旦処理を行った後に条件式の評価を行う場合はdo while文と使い分ける学習をしました。
他にもPHPでwhile文を使ってループ処理する方法の記事もあるのであわせてご覧ください。
do while文って少し変わってますね。
そうだね。まず実行してから、後で条件式を評価して以後も繰返し処理を続けるかどうか判断するんだよ。
while文やfor文、do while文の使い分けって難しそうですね。
とりあえずは、while文とfor文のどちらかで良いと思うよ。慣れたらwhile文かfor文のどちらが適しているか、すぐにわかるようになるよ！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
