あーりーです。
JavaScriptで遊んでいます。
ここ最近は、JavaScriptの「分岐処理」について記事を書いてきました。
お姫様を助ける冒険の旅に出て、伝説の剣を手に入れたり、町の人から情報をもらったりと、楽しみながら勉強しています。
さてさて。
今回のテーマはJavaScriptの「反復処理」です。
反復処理とは
反復処理とは、プログラム上の同じ場所をグルグルと行ったり来たりして、処理を繰り返すことです。
while（ホワイル）
反復処理のひとつに「while文」があります。
構造
「while文」の構造は、こちらです。
while(条件式){
条件式が成立するときの処理
}
最初に「条件式」があります。
その「条件式」が成立する間は、ずっと「条件式が成立するときの処理」が繰り返されます。
と、言われても…
言葉があいまいすぎてピンと来ませんよね。
具体的に見ていきますね。
具体例
以下が「while文」を使った反復処理の具体例です。
<html> <head> </head> <body> <script> var x=1; while(x<=3){ document.write(x); x++; } </script> </body> </html>
HTMLの中に直接JavaScriptを組み込む形式で書いています。
緑色の部分がJavaScriptです。
HTMLの部分は、話のメインではないので、できるだけあっさりと書いています。
実行のしかた
上の内容を実行する方法は、こうです。
まず、上の内容をメモ帳などのエディタにコピペします。
それをHTML形式で保存します。
あとは、そのファイルを開くだけです。
実行結果
上の内容を実行すると（ファイルを開くと）ブラウザにこんなふうに表示されます。
123
これのどこが反復処理なの？
これのどこが反復処理かというと…
1回目に「1」という数字が表示され、
2回目に「2」という数字が表示され、
3回目に「3」という数字が表示されています。
そういう反復処理が行われています。
解説
では、どういう仕組みなのか、詳しく見ていきましょ～。
解説のため、JavaScriptの部分を切り取りますね。
こちらです。
var x=1;
while(x<=3){
document.write(x);
x++;
}
変数「x」
まず、この赤い部分をご覧ください。
var x=1;
while(x<=3){
document.write(x);
x++;
}
変数「x」に数字の「1」を代入しています。
while文の条件式
つぎに…
この赤い部分をご覧ください。
var x=1;
while(x<=3){
document.write(x);
x++;
}
ここで「while文」が登場します。
条件式は「x<=3」です。
この意味は、
変数「x」は「3」以下
です。
この条件式が成立するあいだは、それ以降の処理が繰り返されます。
※変数「x」の中身はこの後どんどん変わるので、いつか成立しなくなります。
条件式が成立するときの処理
では…
条件式が成立するあいだは、どんな処理が行われるでしょう。
それがこの赤い部分です
var x=1;
while(x<=3){
document.write(x);
x++;
}
まず…
「document.write(x);」によって、変数「x」が画面に表示されます。
変数「x」は「1」ですから、画面には「1」と表示されます。
つぎに「x++;」です。
これは複合代入演算子です。
意味は、
変数「x」に「1」を加算する
です。
これによって、変数「x」の中身は「2」になります。
1周目が終了
はい。
これで1周目の処理が終わりました。
2週目に突入
「while文」の2週目に突入するため、またこの赤い部分に戻ります。
var x=1;
while(x<=3){
document.write(x);
x++;
}
ここでまた条件式が成立するかどうか、判定されます。
現在、変数「x」は「2」になっています。
条件式は、
変数「x」は「3」以下
です。
まだ成立します。
いけます！
というわけで…
今回も1周目と同じように「document.write(x);」によって、変数「x」が画面に表示されます。
現在、変数「x」は「2」なので、画面には「2」と表示されます。
さらに…
これも1周目と同じように「x++;」によって、変数「x」に「1」が加算されます。
変数「x」は「3」になります。
あとはこの繰り返し
これを繰り返すことで、画面には「1」「2」「3」が順番に表示されます。
いつか条件式が成立しなくなる
変数「x」が「4」になったとき…
「x<=3」という条件式が成立しなくなります。
終了
条件式が成立しなくなったら、「while文」は終了です。
もう、処理が行われることはありません。
だから、「4」が画面に表示されることもありません。
こうして、画面の表示結果は
123
となります。
以上が、「while文」を使った反復処理でした～。
今回はこれでおしまいです。
JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。
