while文JavaScript入門

更新日:2020.10.10
  1. HOME
  2. JavaScript入門
  3. while文

前項では回数の分かっている場合の繰り返し文を説明しました。しかし、いつも繰り返し回数が分かっている訳ではありません。このページでは、繰り返し回数分からない場合の処理について説明してみます。

while文の記述の仕方

繰り返し回数が分からない場合は、 while文を使います。while文はある一定の条件を指定し、その条件を満たしている間繰り返します。以下のように記述します。

while ( 繰り返しの条件 ) { 処理 }
条件を満たしている間、中括弧内の処理を繰り返します。

繰り返しの条件の部分には、ある変数と数値の比較などを指定します。

while ( num < 100 ) { 処理 } //numが100未満の間繰り返す

他にも、繰り返し条件をtrueにして、ある条件になった時にbreakで抜け出す方法を取ることもできます。

while ( true ) {
  処理;
  if ( 条件 ) break; //条件に合致した時while文から抜け出す
}

もちろんこのような方法を取る場合は、確実にwhile文から抜け出せるように指定する必要があります。 抜け出せないと無限ループに陥って動かなくなります。

while文のサンプルスクリプト

ではwhile文を使って、「1+2+3+…で幾つまで足すと合計が5桁になるか」と言う問題を解いてみましょう。

<script>

var num = 0;    //連番を入れる変数
var gokei = 0;  // 連番の合計を入れる変数

//gokeiが5桁(10000)より少ない間繰り返す
while ( gokei < 10000 ){
  num++;
  gokei = gokei + num ;
}

//5桁に達した際の数を書き出す
document.write( num );

</script>

サンプル(別窓)

サンプルを見てみると、141という答えが得られました。実際に答えが合っているかfor文を使って確かめてみました。ちゃんと合っています。

サンプルスクリプトの解説

では、上記サンプルについてみていきましょう。

var num = 0;
var gokei = 0;

コメントに書いていますが、変数numには「連番」を、変数gokeiには「連番の合計」を入れていきます。 numの初期値を0にしていますが、while文の最初でnum++としているので1から足し算することになります。

while ( gokei < 10000 ){ }

そしてwhile文です。繰り返し条件は「gokei < 10000」で、5桁未満の場合は繰り返すとしています。

num++;
gokei = gokei + num ;

while文の中で、最初にnum++として変数numの値を+1にしています。次に変数gokeiと変数numを加えた合計を、変数gokeiに代入しています。

この2行の順番を逆にするとうまくいきません(逆にすると、変数gokeiが10000を超えた後さらに1回num++されます。その後繰り返しを抜けても、numの値は実際より一つ多くなっています)。

document.write( num );

最後に、document.write()を使って5桁に達した段階の数(変数numの値)を表示しています。

このようなwhile文は、ローン返済の計算をしたり、ページ内のリンク数を調べたりといった色々なケースで活用することができます。for文と共にしっかり覚えておきましょう。

次のページでは基礎編の最後として、JavaScriptを外部ファイルに記入する方法を説明いたします。

楽天booksのJavaScript解説本 JavaScriptワークブック第3版 JavaScript基礎入門 プログラミングTypeScript 作りながら学ぶWebプログラミング実践入門 新しいJavaScriptの教科書 子どもから大人までスラスラ読めるJavaScriptふりがなKidsプログラミン 30時間アカデミック JavaScript入門 確かな力が身につくJavaScript「超」入門 第2版 いちばんやさしいJavaScriptの教本第2版 HTML&CSS JavaScriptプログラミング基礎演習ワークブック

Supported by Rakuten Developers