ステップ12 breakとcontinue


breakとcontinueを利用すると、繰り返し処理を途中で中断ですることが可能となります。そのほか、ステップ12では、条件を満たす間だけ処理を繰り返すwhile文についても学習します。


12.1　breakの利用方法


　「1、2、3、…、100の合計を求める」のように繰り返す回数がわかっている処理は、for文を使ってJavaScriptを記述できます。（STEP08「Sample8_1.html」参照）。しかし、「1、2、3、…を順に加算し、その合計が200以上になる瞬間を求める」などの場合は、そうもいきません。このように、『何回繰り返すかは不明であるが、繰り返し処理を実行したい』という場合に活用できるのがbreakです。breakは、繰り返し処理を強制終了する命令であり、通常はif文と組み合わせて使用します。
　たとえば、「1、2、3…を順に加算し、その合計が200以上になる瞬間を求める」という処理は、以下のJavaScriptで実行できます。


▼Sample12_1.html抜粋


　このJavaScriptでは、５～１０行目で変数「i」を1、2、3、…と変化させ、その合計を変数「kai」に代入しています。さらに、７行目で「kai」1が200以上であるかを判定し、200以上の場合のみbreakを実行します。breakは、forなどの繰り返し処理を強制終了し、以降のJavaScriptへ進む命令となります。このため、「kai」が200以上になると繰り返し処理が強制終了され、１１行目のalert( )により変数「i」と「kai」の値が表示されます。
　なお５行目のfor文は繰り返し回数を１００（i=1～100）としていますが、この繰り返し回数は「kai」が200を超えれば何回でも構いません。仮に、繰り返し回数を２００（i=1～200）としても、同じ実行結果を得られます。
　実際に、このJavaScriptを実行してみると、図12-1のような結果が表示され、1～20まで加算した時点で、その合計が200以上になることを確認できます。


図12-1　breakの利用

整数の合計


以下のボタンをクリックすると、
1、2、3、…の合計が200を超える瞬間を求めることができます。




12.2　continueの利用方法


　繰り返し処理は、continueで中断することも可能です。continueとbreakが異なる点は、breakが繰り返し処理を強制終了するのに対して、continueは以降の処理を中断し、繰り返し処理の先頭に戻ることです。


■breakとcontinueの違い
　

　これだけの解説では少しわかりにくいと思うので、具体的な例を用いてcontinueの利用方法を解説していきましょう。以下は、１～１００の整数のうち“２または３で割り切れない数値”を求めてホームページに表示するJavaScriptです。


▼Sample12_2.html(抜粋)


　“○で割り切れない数値”は、余りを求める演算子「%」を利用すると判定できます８行目のif文では、「2で割ったときの余りが0」または「3で割ったときの余りが0」を条件式としています。よって、“2または3で割り切れる場合”が「真」、“2または3で割り切れない場合”が「偽」となります。そして、「真」の場合は９行目のcontinueにより以降の処理が中断され、繰り返し処理の先頭（７行目）に戻ります。一方、「偽」の場合は繰り返し処理が続行されるので、１１行目のdocument.write()で変数「i」の値が表示されます。
　この結果、図12-2のように“２または３で割り切れない数値”だけをホームページに表示することが可能となります。


図12-2　continueの利用

2または3で割り切れない数値

1～100の間で、2または3で割り切れない数値は以下のとおりです。



12.3　while文による繰り返し


　続いては、一定の条件を満たす間のみ処理を繰り返すwhile文を紹介しておきましょう。while文の記述方法は以下のとおりで、条件式に処理を繰り返す条件、{………}に繰り返す処理を記述します。


while　(条件式){………}

　たとえば、「Sample12_1.html」で紹介した「1、2、3、…を順に加算し、その合計が２００以上になる瞬間を求める」を、while文で記述することも可能です。この場合の繰り返し条件は、合計「kai」が200未満となるため、「kai<200」となります（６行目）。また、for文の変数「i」のように、値が自動的に変化していく変数がないため、変数「i」の値は自分で制御する必要があります（５、８行目）。


▼Sample12_3.html（抜粋）

図12-3　whileの利用

整数の合計


以下のボタンをクリックすると、
1、2、3、…の合計が200を超える瞬間を求めることができます。




演習

（１）変数「x」が1、2、3、…と変化するfor文を利用し、以下のような３次方程式の解を求めるホームページを作成してみましょう。なお、３つの解が見つかった場合は、breakで繰り返し処理を強制終了させます。


三次方程式

　x3－53x2+620x－1036=0


※三次方程式の解は3個あり、全て1以上の整数です。
※ボタンをクリックすると、三次方程式の解を表示できます。


※ボタンをクリックすると、関数「kaitou()」を実行します。
※関数「kaitou()」では、配列「kai」および変数「s」「i」を宣言します。
　　var kai = new Array(3);　　　＜見つかった解を保持する配列＞
　　var s;　　　　　　　　　　　　　 ＜解の判定に使用する変数＞
　　var i = 0;　　　　　　　　　　　 ＜見つかった解の個数を数える変数＞
※変数「x」の繰り返し処理では、変数「s」に「x3－53x2+620x－1036」の計算結果を代入します。
※変数「s」が０であった場合、配列「kai[i]」に変数「x」を代入し、「i」を１つ増やします。
※「i」が３になったら、breakで繰り返し処理を強制終了させます。
※繰り返し処理が終了した後は、alert()で配列「kai[0]」「kai[1]」「kai[2]」を表示します。


（２）演習（１）と同じ処理をwhile文で作成してみましょう。





※ここに直接入力できます。↓↓(テキストボックスのサイズは、右下の角をドラッグすると調節できます。)






→STEP11へ
→STEP13へ