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文という使い分けをします。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
実際にプログラムを書いてみよう
では、実際にプログラムを書きながら見ていきましょう。
※変数は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サービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
