同じ(あるいは,良く似た)一連の手順を何度も繰り返すような処理を反復処理と呼ぶ. 反復の仕方としては,
などの場合がある.いずれにしても, 繰り返しを永遠に続けるようなプログラムを書かないように注意する必要がある (繰り返しを永遠に続けることを「無限ループ」と呼ぶ).
while ステートメントは,繰り返しのたびに論理式を計算し, その値が真(true)である間は繰り返しを続行するような処理手順を記述するものである.
JavaScript の while ステートメントの基本的な書き方は以下の通りである.

また,その流れ図を右に示す.
この while ステートメントは,以下のような順序で実行される.
この は, if ステートメントの true パートなどと同様にブロック (複数ステートメントを並べて { } でくくったもの) を用いるのが一般的である.
また,反復の条件を表す は, いずれは偽になるようにしておかないと,反復が止まらなくなって無限ループに陥ることになるので, 注意が必要である.
var i;
i=1;
while (i<=10) {
document.write("i = ");
document.writeln(i);
i=i+1; // i++; や i+=1; としても同じ(→特殊な代入)
}
(参考: 繰り返し(while) in とほほのJavaScriptリファレンス)
do-while ステートメントも while ステートメントと同じように, 繰り返しのたびに論理式を計算して,その値が真(true)である間は繰り返しを続行する. ただし,while ステートメントとは異なり,論理式の計算は反復の末尾で行う.
JavaScript の do-while ステートメントの基本的な書き方は以下の通りである.

また,その流れ図を右に示す.
この do-while ステートメントは,以下のような順序で実行される.
なお,while ステートメント等と同様に, は ブロック を用いるのが一般的である. また,やはり,反復の条件を表す は, いずれは偽になるようにしておくことも必要である.
var i;
i=1;
do {
document.write("i = ");
document.writeln(i);
i=i+1; // i++; や i+=1; としても同じ(→特殊な代入)
} while (i<=10);
(参考: 繰り返し(do) in とほほのJavaScriptリファレンス)

while と do-while の違いは,反復条件の論理式を計算するタイミングのように見えるが, いずれの場合も,計算結果が真であれば再び反復パートを実行するし, 偽であれば反復を終了するので,その点ではあまり大きな違いはない.
見方を変えれば,while と do-while の違いは, 反復を開始するポイントの違いと見ることもできる. 上に挙げた do-while の流れ図を,接続の関係は変えずに変形すると, 右のような流れ図も作成できるが,これと,while の流れ図とを比較してもらいたい. そうすれば do-while は, while の最初の反復の最初の条件判定を素通りしたものともみなせることがわかるだろう.
つまり,do-while は,最初の反復だけは無条件に実行するような while ともみなせるのである.
反復処理の中には,反復を制御するための変数 (制御変数) を用意して, その変数の内容を反復ごとに更新し, その変数が一定の条件を満たす間は反復を繰り返すようなタイプのものがある. 例えば,反復の回数を数える変数を用意しておき, その回数が一定値に達するまで繰り返すような場合である.
そのような反復処理を記述するために,JavaScript では for ステートメントが用意されている.
JavaScript の for ステートメントの基本的な書き方は以下の通りである.

また,その流れ図を右に示す.
この for ステートメントは,以下のような順序で実行される.
for ステートメントの典型的な使い方としては,例えば以下のようなものがある.
(i++ は i=i+1 と同じ働き.(参考:特殊な代入))
var i; for (i=1 ; i<= ; i++) { }
この場合,変数 i の値を 1 から順に 1 ずつ増やしながら,
を越えるまで反復することになるので,
は都合
回実行されることになる.以下に例を示す.(こちらで実行できる,
流れ図はこちら)
var i;
for (i=1; i<=10; i++) { // i++ は i=i+1 と同じ働き(→特殊な代入)
document.write("i = ");
document.writeln(i);
}
for (i=10; i>0; i--) { // i-- は i=i-1 と同じ働き(→特殊な代入)
document.write("i = ");
document.writeln(i);
}
また,後述する break ステートメント を用いることを前提に,
無条件の反復 (無限ループ) を記述したい場合,for の式を省略して
for (;;) とする場合も多い.
(参考: 繰り返し(for) in とほほのJavaScriptリファレンス)
反復処理の途中で,強制的に処理を中断して反復を抜け出したい場合がある. そのような場合,JavaScript では break ステートメントを用いる.
JavaScript の break ステートメントの基本的な書き方は以下の通りである.
while や do-while や for などの反復ステートメントの の途中で break ステートメントが実行された場合, の残りの部分 (break より後の部分) は実行されずに, ただちにその反復ステートメントを終了してその次へ進む.(右下図参照)

var i;
i=1;
for (;;) { // break がなければ無限の反復
document.write("i = ");
if (i>10) break;
document.writeln(i);
i=i+1; // i++; や i+=1; としても同じ
}
上の for (;;) { … } という表現は無条件の反復を意味し,
通常は無限ループになるため,使用は避けなければならないが,
break ステートメントを用いれば,そのような無条件反復の途中からでも脱出できる.
break はまた,switch ステートメント の途中から脱出するためにも用いられる.
(参考: ループを抜ける(break) in とほほのJavaScriptリファレンス)
反復処理の途中では,その回の反復は中断して,次の回に移行したい場合もある. そのような場合,JavaScript では continue ステートメントを用いる.
JavaScript の continue ステートメントの基本的な書き方は以下の通りである.
while や do-while や for などの反復ステートメントの の途中で continue ステートメントが実行された場合, の残りの部分 (continue より後の部分) は実行されずに,ただちに次の反復へ進む. ただし,その場合でも,for の や は計算(実行)されるので,厳密に言えば,
ジャンプすることになる.
![]() do-while での continue |
![]() for での continue |
var i;
for (i=1; i<=10; i++) { // i++ は i=i+1 と同じ働き
document.write("i = ");
if (i%3==0) continue; // i が 3 で割り切れるときのみ continue を実行する
document.writeln(i);
}
(参考: ループを続ける(continue) in とほほのJavaScriptリファレンス)

反復処理の反復パートの中に,さらに反復処理のパターンが埋め込まれているような場合, 多重反復と呼ばれる.
意味的には,「『反復処理』を反復するような処理」と考えると良い. 例えば,1枚の餃子の皮を作るのに,8回伸ばす動作が必要で,それを枚数分繰り返すようなものである. (右図参照)
多重反復における問題点は,内側の反復パート内で break や continue が実行された場合, それが「どの」反復に対するものかが曖昧になるということである.これを明示するためには, 反復のステートメントに名前を付けておき,break や continue でその名前を指定して 「どの」反復に対する break や continue であるかを示す.(下図参照)

この「ステートメントにつけた名前」はラベルと呼ばれる. どんなステートメントでも,その前にコロン(:)で区切って,このラベルをつけることができる.
例: inner: while (…) { … }
break や continue では,break inner; のように,
後ろにラベルを付けて,対応するステートメントを指定する.
(参考: とほほのJavaScriptリファレンス: ループを抜ける(break), ループを続ける(continue))
5つの数値を入力し,反復を用いて,その中の最大の値を見つけて答えるプログラム.
入力には prompt() を,
出力には document.writeln()
を用いる.
ファイル名は js04-1.html とする.
雛形を以下に示す.
<!DOCTYPE html>
<title>JavaScript Sample 4-1</title>
<body>
<script type="text/javascript">
<!--
// 変数の宣言
var i, x, m; // i:カウント,x:入力,m:最大値
// 入力・計算
// ここは自分で考えよう.前回の課題(分岐処理 a)が参考になるはず.
// どのやり方が反復に向いているだろうか?
// ヒント・注意
// 1. 流れ図を書いてみよう.(例 - できれば自分で書いてから見てみよう)
// 2. prompt() で表示する文字列など瑣末なことは気にしなくてよい.
// "?" だけでもOK.余力のある人は,"x1=?", "x2=?" とか聞いてくる
// ようにしてみては?
// 3. prompt() で入力されるデータは文字列なので,Number関数で
// 数値に変換するとよい.
// 4. for を使うとスマートにできるが,while でもできる.
// 出力
document.writeln("<p>最大のものは" + m + " です.</p>");
// -->
</script>
</body>
例を以下に示す.リンクをクリックすれば実行できる.(別ウィンドウで実行される)
js04-1a.html,
js04-1b.html
(各例のコードと流れ図)
複数個の数値を入力し,反復を用いて,その中の最大の値を見つけて答えるプログラム.
個数はあらかじめ定めず,空 (空文字列) の入力でデータ入力の終了を表すものとする
(少なくとも1個はデータを入力するものとする).
入力には prompt() を,
出力には document.writeln()
を用いる.
ファイル名は js04-2.html とする.
雛形を以下に示す.
<!DOCTYPE html>
<title>JavaScript Sample 4-2</title>
<body>
<script type="text/javascript">
<!--
// 変数の宣言
var x, m; // x:入力,m:最大値
// 入力・計算
m = Number(prompt("?"));
// ここは自分で考えよう.前回の課題(分岐処理 a)が参考になるはず.
// どのやり方が反復に向いているだろうか?
// ヒント・注意
// 1. 流れ図を書いてみよう.(例 - できれば自分で書いてから見てみよう)
// 2. prompt で表示する文字列など瑣末なことは気にしなくてよい.
// "?" だけでもOK.
// 3. 入力はとりあえず文字列で変数に格納しておいて,空文字列かどうかの
// 判定に用いるとよい.大小の比較をするときには,Number関数で数値に
// 変換する必要がある.
// 4. while を使うのが一般的だが,意外に for (;;) { … } の中で
// if (…) break; と言うのも悪くなかったりする.
// 出力
document.writeln("<p>最大のものは" + m + " です.</p>");
// -->
</script>
</body>
例を以下に示す.リンクをクリックすれば実行できる.(別ウィンドウで実行される)
js04-2a.html,
js04-2b.html,
js04-2c.html
(各例のコードと流れ図)
| 課題番号: | 4-1, 4-2 |
| 課題名: | 反復処理 a, b |
| ファイル名: | task04-1.html, task04-2.html |
| 締切: | 次回の演習日の直前の日曜日,18:00まで |
下記の各々のプログラムを作成すること.
入力には prompt() を,
出力には document.writeln()
を用いる.
Moodle の各々の課題ページから各々のファイルを提出すること.ファイル名はすべて半角文字とする.