Search

検索したいワードを入力してください

2019年02月27日

JavaScriptでループするwhile文の使い方まとめ

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を書くことが可能です。

ループ処理の中でループ処理を行うことをループ処理のネストと言います。例えば表の値を順番に参照する場合には2階層の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);
// 現在の列を1増やす
col = col + 1;
}
// 現在の行を1増やす
row = row + 1;
}
// 数字の合計をポップアップで表示する
window.alert("合計=" + sum);
</script>

ループ処理のネストの注意点

ループ処理のネストは複数階層にすることが出来ますが、あまり階層の深いネストはしない方が良いです。

例えばループ処理が10階層もあった場合、非常にプログラムが見辛くなります。ループ処理は多くても3階層までに留めた方が良いです。

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を設定する
・絶対に終わらない無限ループは作成しない
・繰り返し処理の中で繰り返し処理を行うことが可能である
・繰り返し処理の中に繰り返し処理を記載する場合、多くても3階層までとする
・繰り返しを一時停止する場合はwhile文ではなくsetIntervalで繰り返し処理を作成する

【PR】多くの人がプログラミングを諦めてしまう理由をご存知ですか?



近年プログラミングを勉強する人が増えています。

プログラミング学習者の多くは独学から取り組もうとしますが、だいたい80%ほどは3ヶ月も続かずに諦めてしまいます。早い人は1日目で。

多くの人がプログラミングを独学しようとして諦める理由は、次の3つ。
●モチベーションが維持できない
●エラーの原因・解決方法が分からない
●どう学習すればよいか分からない

TechBoostというプログラミングスクールでは、みんなと一緒にプログラミングをするのでモチベーションの維持ができ、分からないことがあればマンツーマンで教えてくれ、徹底的に研究された初心者向けの教材が揃っています。

TechBoostを卒業後、実際にエンジニアとして転職した方もいるほど。

本気でプログラミングを学びたい方は、一度無料のカウンセリングでご相談ください。プログラミングを嫌いになる前に。

tech boostについて

オーダーメイド型の学習コンテンツを提供する「tech boost」 は、エンジニアのキャリア支援に特化したサービスを複数展開している株式会社Branding Engineerが運営しているプログラミングスクールです。最短3ヶ月間で、未経験から『プログラミングの基礎』、『実際に業務で必要となるスキル』、『今のトレンドとなっている知識』まで学べ、ご希望の方にはプロのキャリアアドバイザーによる就業支援を行うことができます。

tech boost卒業生インタビュー

tech boostの卒業生の声を聞きました。あなたがプログラミングを学びたい理由を、一度考えてみてください。
営業→Javaエンジニア→Rubyエンジニアと転向し、第一志望のFinTech企業で働く山下さん
元営業、ビジネスのわかるエンジニアを目指す菅原さん
サンフランシスコに交換留学し、シリコンバレーのVCでインターン中の梅本さん
予備校の営業から半年でエンジニア転職を果たした小田島さん

tech boostの口コミ



Related