JavaScriptで繰り返し処理を行う際に用いるwhile文及びbreak、continue命令について用途及び記述の仕方をサンプルコードを交えてご紹介致します。また、while文を使用する際の注意点をご説明致します。
while文とは
while文はJavaScriptで繰り返し処理を行うための構文です。特定の条件を満たしている間、同じ処理を繰り返し行う際に利用します。例えばファイルを一行毎に読み込んで処理する場合に使用します。
JavaScriptのwhile文とdo while文の違い
JavaScriptで繰り返し処理を行うwhile文には、while文とdo…while文の二種類があります。
while文とdo…while文の違いは繰り返し条件の判定タイミングになります。
while文は処理の最初に繰り返し条件を判定します。do…while文は処理の最後に繰り返し条件を判定します。
while文とdo while文の基本的な書き方
whileとdo whileの違いを見るために簡単なコードを使って比較してみましょう。while文が最初に条件判定をしている一方、do while文は先にサイコロの目の合計を数える処理が入っています。
while文の書き方
while文の記述方法は以下になります。
while( /*条件式*/ ){
// 繰り返し処理
}
【サンプル】
サイコロの目の数(1～6の数字)の合計を計算する。
var i = 1; // サイコロの目
var sum = 0; // サイコロの目の合計
// サイコロの目が6を超えるまで処理を繰り返す
while( i <= 6 ){
sum = sum + i; // 合計に現在のサイコロの目の数を加える
i = i + 1; // サイコロの目を1増やす
}
// サイコロの目の合計をポップアップで表示する
window.alert("合計=" + sum);do…while文
do…while文の記述方法は以下になります。
do{
// 繰り返し処理
}while( /*条件式*/ );
【サンプル】
サイコロの目の数(1～6の数字)の合計を計算する。
var i = 1; // サイコロの目
var sum = 0; // サイコロの目の合計
// サイコロの目が6を超えるまで処理を繰り返す
do{
sum = sum + i; // 合計に現在のサイコロの目の数を加える
i = i + 1; // サイコロの目を1増やす
}while( i <= 6 );
// サイコロの目の合計をポップアップで表示する
window.alert("合計=" + sum);JavaScriptのbreakとcontinue命令
JavaScriptにはwhile構文の繰返し処理を途中で中断するbreak命令と繰り返し処理をスキップするcontinue命令があります。
while文を終わりにする方法として前章でwhile(/*繰返し条件*/)で記載する方法を紹介致しました。この方法は一つの繰返し処理が全て完了してからwhile文を終了します。繰返し処理の途中でwhile文を終わりにすることはできません。繰返し処理の途中でwhile文を終わりにしたい場合はbreak命令を使用します。
continueは処理を途中で止めて、次の繰返し処理を行う際に使用します。
JavaScript while文におけるbreakの使い方
JavaScriptのbreak命令の記述方法は以下になります。
while( /*条件式*/ ){
// 繰り返し処理
break;
// 繰り返し処理
}
【サンプル】
1から順番に100までの数字を足し、計算の都度に処理を継続するかユーザーに確認し、ユーザーが処理の終了を指示した場合は計算処理を終了する。
var i = 1; // 現在の数字
var sum = 0; // 数字の合計
// 現在の数字が100を超えるまで処理を繰り返す
while(i <= 100){
sum = sum + i; // 合計に現在の数字を加える
// 計算を続けるかポップアップで確認を行う
if(!window.confirm(i + "を足しました。計算を続けますか？")){
// ポップアップでいいえを選択した場合は繰り返し処理を終了する
break;
}
i = i + 1; // 現在の数字を1増やす
}
// 数字の合計をポップアップで表示する
window.alert("合計=" + sum);JavaScript while文におけるcontinueの使い方
JavaScriptのcontinue命令の記述方法は以下になります。
while( /*条件式*/ ){
// 繰り返し処理
continue;
// 繰り返し処理
}
【サンプル】
サイコロの目の数(1～6の数字)の内、奇数の数字の合計を計算する。
var i = 0; // サイコロの目
var sum = 0; // サイコロの目の合計
// サイコロの目が6を超えるまで処理を繰り返す
while(i < 6){
i = i + 1; // サイコロの目を1増やす
// 偶数の場合は処理をスキップし次の繰り返し処理に移る
if(i % 2 == 0) {
continue;
}
// 奇数の場合は合計に現在のサイコロの目の数を加える
sum = sum + i;
}
// 数字の合計をポップアップで表示する
window.alert("合計=" + sum);
偶数の場合は合計値には入りませんが、breakと違いループ処理自体は継続しています。
JavaScript while文における無限ループについての書き方
今まで紹介したwhile文には全て終了条件が決められていましたが、場合によってはユーザーが処理を終了するまで無限に処理をしたいというケースがあります。無限に繰り返し処理を行うことを無限ループと言います。
JavaScriptで無限ループを行う場合は、繰り返し条件にtrueを設定します。
while(true){
// 繰り返し処理
}【サンプル】
1から順番に数字を足し、計算の都度に処理を継続するかユーザーに確認し、ユーザーが処理の終了を指示した場合は計算処理を終了する。
var i = 1; // 現在の数字
var sum = 0; // 数字の合計
// 無限ループ処理を行う
while(true){
sum = sum + i; // 合計に現在の数字を加える
// 処理を続けるかポップアップで確認する
if(!window.confirm(i + "を足しました。計算を続けますか？")){
// ポップアップでいいえを選択した場合は繰り返し処理を終了する
break;
}
i = i + 1; // 現在の数字を1増やす
}
// 数字の合計をポップアップで表示する
window.alert("合計=" + sum);無限ループの注意点
ループ処理には必ず終了条件を入れて下さい。
while(true)による無限ループをする場合でも、break処理を入れて必ずループ処理が終わるプログラムにしてください。処理が終わらない本当の無限ループを作ってしまうと、ページがフリーズしてユーザーが操作を行えなくなってしまいます。
またパソコンのCPUリソースを消費し、無限ループが発生しているページ以外のアプリケーションも動作が遅くなる場合があります。
【サンプル】
本当の無限ループのサンプルです。実行するとページが砂時計のままとなります。またタスクマネージャーを立ち上げてCPUの利用状況を閲覧すると大量のCPUを使用し続けていることが確認できます。
大体のプログラムはCtrl + Cで中断できるので、実行する場合は先に中断方法を確認してから実行してください。
var i = 1; // 現在の数字
var sum = 0; // 数字の合計
// 無限ループ処理を行う
while(true){
sum = sum + i; // 合計に現在の数字を加える
i = i + 1; // 現在の数字を1増やす
}
// 数字の合計をポップアップで表示する
window.alert("合計=" + sum);while文のネストについて
while文の中にもwhileを書くことが可能です。
ループ処理の中でループ処理を行うことをループ処理のネストと言います。例えば表の値を順番に参照する場合には２階層のwhile文を用います。以下は表の値を全て合計するサンプルコードです。
【HTML】
<table id="tbl">
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
</table>【JavaScript】
<script>
var row = 0; // 現在の行
var sum = 0; // セルの値の合計
// 表のデータを変数に格納する
var data = document.getElementById("tbl");
// 行毎に繰り返し処理を行う
while(row < 3){
var col = 0; // 現在の列
// 列毎に繰り返し処理を行う
while(col < 3){
// セルの値を取得する
var val = data.rows[row].cells[col].innerHTML;
// セルの値を合計に加える
sum = sum + parseInt(val);
// 現在の列を１増やす
col = col + 1;
}
// 現在の行を1増やす
row = row + 1;
}
// 数字の合計をポップアップで表示する
window.alert("合計=" + sum);
</script>ループ処理のネストの注意点
ループ処理のネストは複数階層にすることが出来ますが、あまり階層の深いネストはしない方が良いです。
例えばループ処理が１０階層もあった場合、非常にプログラムが見辛くなります。ループ処理は多くても３階層までに留めた方が良いです。
JavaScriptの繰り返し処理のsleepについて
JavaScript以外の言語の場合、while文を一定時間停止する命令が用意されている場合があります。例えば、Java言語の場合、waitコマンドで一定時間処理を中断することが可能です。
無限ループの説明の際にCPU使用量について触れましたが、ループ処理はCPUを多く使うため長時間ループ処理を行う場合は繰り返し処理毎に処理を一時中断して、CPUを他のアプリケーションに明け渡すようにプログラムをする場合があります。
しかし、JavaScriptにはwhile文を一時中断するコマンドがありません。JavaScriptでsleepを使う場合はwhile文では無く、setIntervalを用います。
【setIntervalの実装サンプル】
var count = 0; // カウンター
// 1,000ミリ秒毎にカウンターをインクリメントする
var timerId = setInterval(function(){
count = count + 1;
// カウンターが9を超えた場合にループ処理を終了する
if(count > 9){
// 繰り返し処理後にタイマーをクリアする
clearInterval(timerId);
// テストのため繰り返した回数を表示
window.alert(count + "回繰り返し処理を行いました。");
}}, 1000);while文を利用する際の要点のまとめ
最後にJavaScriptのwhile文を利用する際の要点を改めて記載します。繰り返し処理はプログラミングの基本であり、どんなときでも使うと言ってもいいほどよく使うものです。
しっかりと勉強しておきましょう。
【while文を利用する際のポイント】
・繰り返し処理にはwhile文またはdo…while文を使用する
・繰り返し条件を始めに判定する場合はwhile文を使用する
・繰り返し条件を最後に判定する場合はdo…while文を使用する
・繰り返し処理を途中で終了する場合はbreak命令を使用する
・繰り返し処理をスキップする場合はcontinue命令を使用する
・無限ループを作成する場合はwhile文の繰り返し条件にtrueを設定する
・絶対に終わらない無限ループは作成しない
・繰り返し処理の中で繰り返し処理を行うことが可能である
・繰り返し処理の中に繰り返し処理を記載する場合、多くても３階層までとする
・繰り返しを一時停止する場合はwhile文ではなくsetIntervalで繰り返し処理を作成する
