JavaScriptでwhile文を使ってループ処理する方法【初心者向け】

JavaScriptで【while文】を使ってループ処理する方法をプログラミング初心者向けに解説した記事です。ループ処理のfor文との違いも紹介。処理のあとに条件式の評価を行う「do while文」についても解説しています。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptについてプログラミング初心者向けに紹介した記事です。

今回は、JavaScriptでwhile文を使ってループ処理する方法について解説します。

また、入門向けにJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

while文とfor文の違い

プログラムのなかでは、ある数値や数式、文字列を繰り返し用いるシーンは多く見られます。

JavaScriptでループ(繰り返し)処理をおこなうときは、用途に応じて for文と while文 という2種類を使い分けます。

 

ざっくり言えば、2つの違いはこのようになります。

  • 繰り返し回数が決まっている場合はfor文
  • 繰り返し回数が決まっていない場合はwhile文

 

この違いがわかったところで、for文の使い方を覚えていきましょう。

 

大石ゆかり

while文もfor文のように繰り返し・ループ処理の一種なんですか?

田島悠介

書き方が違うだけで、同じ繰り返し文なんだよ。

大石ゆかり

同じように処理できるとしても、何か違いがあるんですか?

田島悠介

for文の場合、あらかじめ繰り返す回数を設定するけどwhile文の場合は、より柔軟な形で使えるんだよね。なので無限ループになりやすいので注意が必要だよ。さっそくwhile文を見てみよう!

 

while文とdo while文

while文には次の2つがあります。

 

  • while文
  • do while文

 

それぞれの使い方について見ていきましょう。

 

 

<while文の構文>

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

 

while文の場合は、まず条件式を評価し、その条件式が見合ってはじめて、繰り返し処理を始めます。

ループ処理では、(  )のなかの条件式が真であるあいだは、{  }のなかに書いた繰り返し処理を実行し続けますが、
このとき、条件式が真で制限がなければ、半永久的に処理を繰り返してしまいますので、注意してください。

 

 

<do while文の構文>

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

 

 

while文にくらべ、do while文の場合は、とりあえず先に繰り返し処理を実行して、その後に、whileの条件式を評価し、これが真であれば、そのまま処理を続けるという流れになります。

 

 

最初に条件式の評価をおこなう場合はwhile文一旦処理をおこなったあとに条件式の評価をおこなう場合はdo while文という使い分けになります。

 

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際にプログラムを書いてみよう

では、実際にプログラムを書きながら見ていきましょう。

※変数は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をひとつずつ増やすという指示を意味します。これがないと、ずっと0の値のままでwhileループがまわってしまうので注意しましょう。

 

そして、countが0,1,2,……10になったとき、count < 10の条件式が偽になり、ループから抜けます。

ですので、ブラウザではこのように出力されます。

while

 

 

これとまったく同じことをdo while文でもやってみます。

 

 

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

 

あれ? whileもdo whileも変わらないのでは? と疑問に思った方もいるかもしれませんね。

では次は、countに代入する値が最初から10以上だった場合について見てみましょう。

 

 

countに代入する値が最初から10以上だった場合

while文の実践

ためしに、countに20を代入して実行してみると……

<script>
var count = 20;
while (count < 10) {
document.write (count);
count++
}
</script>

 

偽になってしまうので、while文では何も出力されません。

while nothing

 

 

do while文の実践

同じことをdo whileでもやってみます。

<script>
var count = 20;
do {
document.write (count);
count++;
} while (count < 10);
</script>

 

do whileの場合は、最初の1回は条件に関係なく処理が実行され、2回目以降にはじめて真偽が評価されます。

 

そのため、ブラウザではこう出力されます。
スクリーンショット 2015-02-28 13.37.13

 

 

基本的にはwhile文を使い、条件式を満たすか満たさないかに関わらず一旦処理を実行したいような場合に限り、do while文を使うというような使い分けになります。

 

JavaScriptでwhile文を使ってループ処理する方法の解説は、以上です。

他にもPHPでwhile文を使ってループ処理する方法の記事もあるので合わせてご覧ください。

 

大石ゆかり

do while文って少し変わってますね。

田島悠介

そうだね。まず実行してから、後で条件式を評価して以後も繰返し処理を続けるかどうか判断するんだよ。

大石ゆかり

while文やfor文、do while文の使い分けって難しそうですね。

田島悠介

とりあえずは、while文とfor文のどちらかで良いと思うよ。慣れたらwhile文かfor文のどちらが適しているか、すぐにわかるようになるよ!

 

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。