第38回：JavaScript講座本編3「繰り返し処理」
どうも、シノです。
今日は病院があるので、昨日ほど(5記事)は投稿できないです。
まあ、それでも下手したら3記事くらい投稿する可能性はあるわけですが（笑）
さて、今回はJavaScript講座本編第3回です！
前回できなかった、「繰り返し処理」を解説していきます。
というわけで、早速目次をどうぞ。
0.前回の復習
前回は、「条件分岐」をやりました。
何かしらの条件によって処理を行うかどうか分岐させる場合、if文というものを使いましたね。
また、そのときに使う真偽値というものについても解説しました。
今回も、これらの考え方はかなり使うので、よくわからないという方は、前回に戻ってみてください。
1.そもそも繰り返し処理って？
まあ、その名の通りなのですが…一応解説。
繰り返し処理とは、基本的に「ある条件を満たしている間、何回も同じ処理を行う」ことです。
この、『ある条件を満たしている間』というのがポイントになります。
繰り返し処理には、大きく2つの構文があります。
while文とfor文です。一個ずつ見ていきましょう。
2.while文
一つ目、while文です。早速構文を見てみましょう。
while(真偽値){
繰り返し行う処理
}
はい、これだけです。
このwhile文は、まず真偽値を見ます。
そして、trueだった場合に、中括弧内の処理を行います。
ここまではif文と同じですね。
で、ここからがポイント。
中括弧最後までいったら、whileのところに戻って、再度真偽値を見ます。
そして、最初と同じように、trueならもう一度、中括弧内の処理に入ります。
これを、真偽値がfalseになるまで繰り返します。
なお、最初からfalseの場合、中括弧の中身は一回も行われません。
例を見てみましょう。出力部分でどんな出力がされるか想像しながら見てください。
var a = 0;
while(a < 10){
document.write(a);
document.write("<br \/>");
a = a + 1;
}
さて、どんな出力になるでしょうか。
と、その前に5行目になんか気になるものがありますね。
イコールの左右で、同じ変数が使われています。
「これ、いいの？」と思われるかもしれませんが、何の問題もありません。
前々回、イコール1個の場合は「右辺の内容を左辺に代入する」と解説しました。
今回は、aに1を足したものを、もう一回aに入れなおしているんですね。
例えば、元々aが5だったとしましょう。
すると、このイコールの右辺は、5 + 1で6になります。
それが、イコールの左辺、aに代入されるんですね。
これを踏まえて、どんな表示になるか考えてみましょう。
表示させた例は、以下の通りです。
はい、0から9までの数字が1個ずつ表示されていれば正解です！
このように、while文はある条件によって繰り返させたい場合に有効です。
ここで1個注意。
無限ループというやつです。
例えば、以下のようなソースを考えてみましょう。あ、これは書かないでください。
var a = 0;
while(a < 10){
document.write(a);
document.write("<br \/>");
}
最初の例から、aの値を増やす箇所を削りました。
そうすると、whileの小括弧の真偽値は、常にtrueになりますね。
つまり、延々とこの繰り返しを続けてしまうんです。そのまま先に進めません。
これを無限ループと言います。こうなると、ブラウザが止まったり、処理が異様に重くなったりします。
これにならないように、注意しましょう。
3.for文
次に、for文です。本質はwhile文と同じですが、書き方が違います。
例を見てみましょう。
var a = 0;
for(var b = 0; b < 10; b++){
document.write(a);
document.write("<br \/>");
a = a + 1;
}
やってることは、上のwhile文の例と同じです。
ただ、2行目が変わっていますね。見ていきます。
このfor文も繰り返し処理を行うのですが、while文に2つ処理が追加されています。
まず、小括弧の中身です。
セミコロンで、3つの部分に分かれています。それぞれの意味を解説していきましょう。
一つ目、「var b = 0;」の部分です。
ここは、このfor文の処理に入った時、最初一回だけ実行される内容です。
つまり、ここでは最初に「bという変数を用意し、0を代入する」ことをやっているんですね。
次に、二つ目。「b < 10;」の部分です。
ここは、while文と同じ、真偽値の判定を行います。
ここがtrueになると、中括弧内の処理を行い、最後までいったら、また戻ってきます。
falseの場合もwhile文と同様、for文の処理を終わって、中括弧が終わった後の処理に続きます。
が、中括弧最後から戻ってくるときの動作も少し変わります。それが三つ目の部分です。
三つ目、「b++」です。
ここでは、繰り返し処理が終わるとき、つまり中括弧内の処理が最後まで行ったときに行われます。
この処理が行われてから二つ目の真偽値判定を再度行い、trueなら中括弧へ。以下ループです。
さて、三つ目の内容もまた変なものが出てきてますね。「b++って何してるの？」って話です。
これは、インクリメントといって、数字が入った変数に対して使います。
やっている内容は、その数字に1を足す。
つまり、「b = b + 1」とやっていることは全く同じです。
念のため、for文を使った表示例も出します。whileと全く同じになればOKです。
4.「continue」と「break」
さて、繰り返し処理で使える、便利なものを紹介しましょう。
タイトルにある、「continue」と「break」です。
まず、「continue」は、実行されるとその中括弧の処理の最後までジャンプします。
これも例を出した方がいいでしょう。
var a = 0;
while(a < 10){
a++;
if(a % 2 == 0){
continue;
}
document.write(a);
document.write("<br \/>");
}
aのインクリメントを先に持ってきて、そのあとにif文の条件分岐を加えています。
このif文でどんな条件判定を行っているかは大丈夫ですね？aが偶数の場合にcontinueを実行しています。
で、このcontinueが実行されると、その下に書いてある出力が行われなくなります。
つまり、今回の場合だと…
はい、このように偶数のときに出力がされなくなります。
次に、「break」は、実行されるとそのwhile文、for文を終了して、そのままその後ろから処理が続く処理になります。
これも例を見てみましょう。
var a = 0;
while(a < 10){
a++;
if(a == 5){
break;
}
document.write(a);
document.write("<br \/>");
}
document.write("while文が終了しました。");
はい、if文の条件を変え、continueをbreakに変えました。
あと、わかりやすいように、while文の後に出力も加えています。
こうすると、aが5になったらbreakが実行されます。
つまり…aが5のときの出力がされなくなり、4の表示の次に最後の「while文が終了しました」という表示がされます。
表示例は以下の通りとなります。
今回は両方ともwhile文で試しましたが、もちろんfor文でも使えます。
まとめ
いかがだったでしょうか。
今回は、繰り返し処理について解説しました。
前回と分けてよかった…もし一緒に解説してたら、過去最長の長さになっていました。
さて、次回はいよいよ関数に入っていこうと思っています。
今のところしっかりは解説していませんでしたが、処理をまとめたもの、というイメージです。
ちょろっと触れたのは、文字出力の「write()」がそうだよくらいですね。
これを、今度は自分で処理をまとめていきます。
これができると、一気に書くのが楽になります。
是非、身に付けていきましょう！
更新情報はTwitterでも呟いてますので、よかったらどうぞ。
次回：関数(2020/1/18投稿しました！！！)
それでは。
最後に、1つ問題を出します。
問.1から10を、一つずつ改行しながら出力してください。そのとき、偶数の下にさらに改行を1つ追加してください。
実行例は以下です。
今回の内容でできます。が、その中でも複数通りのやり方があります。
一つできたら、他の方法でもできないか考えてみてください。
