あーりーです。
先日は、JavaScriptの「while文」を使ってレストランに星をつけました。
「入力ダイアログ」に星の数を入力すると、その数字に応じて、
☆☆☆ 星3つ
などと表示される、というものです。
詳しくは「while文でレストランに星を付ける」をご覧ください。
さて。
今回は、同じことを「for文」でやってみようと思います。
この記事の概要
この記事では、まず前半で「for文」がどんなものか確認します。
そして後半では、「for文」を使ってレストランに星をつけるスクリプトを実際に作ってみようと思います。
for文とは
「for文」とは、「while文」とおなじく反復処理（繰り返し）を行うためのものです。
反復処理（繰り返し）
反復処理（繰り返し）とは、文字通り、おなじ処理を何度か繰り返すことです。
入力された数字の数だけ「☆」マークの表示を繰り返す…
という形で、反復処理を行います。
構造
「for文」の構造は、こちらです。
for(カウンタ設置;条件式;増減){ 条件式が成立するときの処理 }
って急に言われても…
何がなんだかわかりませんよね。（少なくともぼくならわかりません…汗）
では。
具体的に見ていきましょう。
そのほうがわかりやすいと思います。
☆マークを3回表示するとき
たとえば…
処理を3回繰り返すとき（☆マークを3回表示するとき）は、こんなふうになります。
for(var i=1;i<=3;i++){
document.write("☆");
}
カウンタ設置
まず、この赤い部分をご覧ください。
for(var i=1;i<=3;i++){
document.write("☆");
}
変数「i」に「1」が代入されています。
これがカウンタです。
このカウンタの値は、このあと「1」「2」「3」と増えていきます。
そして「3」を超えたら（つまり「4」になったら）繰り返しは終了です。
条件式
つぎに、この赤い部分です。
for(var i=1;i<=3;i++){
document.write("☆");
}
ここが「条件式」です。
「i<=3」という条件式が成立する間は、処理が繰り返されます。
今回は「☆」マークを3回表示したいので、条件式の数字は「3」になっています。
開始直後、変数「i」には「1」が代入されています。
これを条件式にあてはめると「1<=3」となります。
「1」は「3」以下
という意味です。
あってますね。
条件式は成立します。
なので、つぎで説明する「条件式が成立するときの処理」が行われます。
条件式が成立するときの処理
赤い部分が、条件式が成立するときに行う処理です。
for(var i=1;i<=3;i++){
document.write("☆");
}
「document.write(“☆”);」によって「☆」マークを1つ表示しています。
カウンタの増減
最後が、この赤い部分です。
for(var i=1;i<=3;i++){
条件式が成立するときの処理
}
「i++」の意味は…
変数「i」の数値に「1」を加算する
です。
※「++」マークは、複合代入演算子のひとつです。
ところで。
変数「i」って何だったかというと…
カウンタの数値でしたよね。
現在は「1」です。
ここでカウンタの数値に「1」が加算されて「2」にアップします。
余談
今回の例ではカウンタの数値をアップさせていますけど、あらかじめカウンタの数値を大きめに設定しておいて、それをダウンさせていくっていうやり方もあります。
一連の流れが終了
ここまでで、「for文」の一連の流れが終了します。
あとは、これを何回繰り返すかです。
（今回の例では3回繰り返します）
for文のはじめに戻る
一連の流れが終了したら、「for文」の最初に戻ります。
カウンタの設置は飛ばす
2回目以降は、カウンタの設置（var i=1）は自動的に飛ばされます。（スキップ、スルーされます）
カウンタの設置は、はじめの1回きりです。
そうじゃないと、毎回「i」に「1」が代入されて、カウンタの数値が永遠に変化しません。
2回目以降は条件式からスタート
2回目からは、カウンタの設置は飛ばして、条件式から入ります。
条件式 ↓ 条件式が成立するときの処理 ↓ カウンタの数値アップ
これを、条件式が成立しなくなるまで繰り返します。
今回の条件式は「i<=3」でしたよね。
だから今回は、カウンタの数値が「1」「2」「3」の間は処理が行われます。
計3回です。
こうして「☆」マークが3回表示されます。
カウンタの数値が「4」になると、もう処理は行われません。
以上が「for文」の説明です。
では、これを使って、レストランに星をつけるスクリプトを実際に作ってみますね。
実際のスクリプト
「for文」でレストランに星をつけるスクリプトがこちらです。
<html>
<head>
</head>
<body>
<script>
var s;
s=prompt("星の数は？","");
for(var i=1;i<=s;i++){
document.write("☆");
}
document.write("<br>星"+s+"つ");
</script>
</body>
</html>
実行すると？
上の内容をメモ帳などのエディタにコピペしてHTML形式で保存し、そのファイルを開くと…
「星の数は？」という質問とともに、入力ダイアログが出てきます。
入力ダイアログに半角で数字を入れて、OKをクリックします。
すると、その数字の数だけ「☆」マークが表示されます。
たとえば入力ダイアログに「3」と入れると、こんなふうに表示されます。
☆☆☆ 星3つ
仕組み
では。
どんな仕組みか、ざっと見ていきます。
変数「s」
まず…
変数「s」を使う宣言をしています。
以下の赤い部分です。
var s; s=prompt("星の数は？",""); for(var i=1;i<=s;i++){ document.write("☆"); } document.write("<br>星"+s+"つ");
入力ダイアログ
つぎに…
入力ダイアログを表示し、そこに入力された数字を変数「s」に代入します。
以下の赤い部分です。
var s; s=prompt("星の数は？",""); for(var i=1;i<=s;i++){ document.write("☆"); } document.write("<br>星"+s+"つ");
for文
for文が登場します。
赤い部分です。
var s; s=prompt("星の数は？",""); for(var i=1;i<=s;i++){ document.write("☆"); } document.write("<br>星"+s+"つ");
カウンタ設置、条件式、カウンタ値の増減などは、このページの前半で見てきたとおりです。
今回の条件式は「i<=s」となっています。
「s」って何だったかというと…
入力ダイアログに入力された数字です。
つまり、レストランの星の数ですね。
☆マークを表示する
「for文」の条件式が成立するあいだは、「☆」マークを表示します。
「☆」マークの表示が行われているのが、以下の赤い部分です。
var s; s=prompt("星の数は？",""); for(var i=1;i<=s;i++){ document.write("☆"); } document.write("<br>星"+s+"つ");
繰り返し
あとは、「for文」によって「☆」マークの表示が何度か繰り返されます。
（入力ダイアログに入力された数字のぶんだけ繰り返されます）
星いくつ
「for文」が終わったら、今度は「星2つ」とか「星3つ」といった言葉が表示されます。
それをやっているのが、以下の赤い部分です。
var s; s=prompt("星の数は？",""); for(var i=1;i<=s;i++){ document.write("☆"); } document.write("<br>星"+s+"つ");
以上が、「for文」でレストランに星をつける方法です。
今回はこれでおしまい。
最後までお付き合いありがとうございます。
JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。
