プログラミング入門　⑧繰り返し処理。for文について

今回は、プログラミングの基本の一つである
「繰り返し処理（ループ）」について説明していきます。

繰り返し処理は以下のサンプルプログラムでも使っていました。

◆サンプル2-1

◆サンプル2-2

「繰り返し処理」はコンピューターの長所の一つでもあります。
「繰り返していっぱい出してくれる」ということをコンピューターがやってくれるため、
人の手を使わなくてもたくさんのものを出力してくれます。

あと、リスト化されたデータを一個一個読み取っていく際にも必須です。

そんな「繰り返し処理」について学んでいきましょう。

繰り返し処理はfor文を使う
while文という手段を使う方法もある

繰り返し処理はfor文を使う

繰り返し処理は「for」というのをよく使います。

forを使ったプログラムは以下のように書きます。

for (初期値; 続ける条件; 増減値) {

	（繰り返す処理）

}

以上の書き方だとちょっと分かりにくいですが、
大体は以下のように書くことが多いです。

for (var i = 0; i < 10; i++) { // ※10回繰り返す場合

	（繰り返す処理）

}

変数名「i」はfor文と一緒に使われることがやたらと多いので、
for文の一部というぐらいセットで覚えておきましょう。

上記のソースだと、変数「i」は0から始まって、
一回ごとに1ずつ加算されていき（i++がそういう意味）、
値が9になるまで続いて、10以上になったら処理されないようになります。
あと、繰り返し処理内で変数「i」を使うことができます。

※注意点として、「i = 0」から「i <= 10」だと、0から始まるので処理回数は11回です。なので10回処理したい場合は「i < 10」としましょう。

簡単な例として、以下のソースコードを実行してみましょう。

◆サンプル8-1

<!DOCTYPE HTML><html>
<head>
<meta charset="SJIS">
<title>サンプル8-1</title>
<script type="text/javascript"><!--

function sampleExecute() {

	document.getElementById("resultArea").style.display ="block";

	var output = document.getElementById("outputArea");
	output.innerHTML = "";
	
	for (var i = 0; i < 10 ; i++)
	{
		output.innerHTML += (i + 1) + "<br>";
	}

}

// --></script>
</head>
<body bgcolor="aliceblue">
<center><h1>サンプル8-1</h2>
<div style="width:550px;background-color:white;padding:18px;border-radius:16px;"  >
<input type="button" value="実行" onClick ="sampleExecute()"><br>
<div id="resultArea" style="display:none"><h3>～実行結果～</h3>
<span id="outputArea"></span></div>
</div>
</center>
</body>
</html>

あと、「i++」という加算の方法があるということで、
「i–」という減算の方法もあります。

◆サンプル8-2

<!DOCTYPE HTML><html>
<head>
<meta charset="SJIS">
<title>サンプル8-2</title>
<script type="text/javascript"><!--

function sampleExecute() {

	document.getElementById("resultArea").style.display ="block";

	var output = document.getElementById("outputArea");
	output.innerHTML = "";
	
	for (var i = 10; i > 0 ; i--)
	{
		output.innerHTML += i + "<br>";
	}

}

// --></script>
</head>
<body bgcolor="aliceblue">
<center><h1>サンプル8-2</h2>
<div style="width:550px;background-color:white;padding:18px;border-radius:16px;"  >
<input type="button" value="実行" onClick ="sampleExecute()"><br>
<div id="resultArea" style="display:none"><h3>～実行結果～</h3>
<span id="outputArea"></span></div>
</div>
</center>
</body>
</html>

「i–」はいつも使うようなものではないし、
使わなくてもやりたいことはできるものですが、一応覚えておきましょう。

それから、「break」と「continue」というのがあります。
「break」は繰り返し処理を直ちに終了し、
「continue」は実行中の繰り返し処理を中断し、次の繰り返し処理に進みます。

これはたまに使うので、こういう処理があるということを知っておきましょう。

◆サンプル8-3

<!DOCTYPE HTML><html>
<head>
<meta charset="SJIS">
<title>サンプル8-3</title>
<script type="text/javascript"><!--

function sampleExecute() {

	document.getElementById("resultArea").style.display ="block";

	var output = document.getElementById("outputArea");
	output.innerHTML = "";
	
	for (var i = 1; i <= 9999 ; i++)
	{
		
		output.innerHTML += i;
		
		if (i < 9) {
			continue;
		}
		
		output.innerHTML += "　";
		
		if (i >= 100) {			
			break;			
		}
		
	}

}

// --></script>
</head>
<body bgcolor="aliceblue">
<center><h1>サンプル8-3</h2>
<div style="width:550px;background-color:white;padding:18px;border-radius:16px;"  >
<input type="button" value="実行" onClick ="sampleExecute()"><br>
<div id="resultArea" style="display:none"><h3>～実行結果～</h3>
<span id="outputArea"></span></div>
</div>
</center>
</body>
</html>

while文という手段を使う方法もある

繰り返し処理は「for」を使った方法だけでなく、
「while」を使った方法もあります。

while文は以下のように書きます。

while(終了条件) {

	（繰り返す処理）

}

whileは終了条件だけを書くスタンスなので、
変数を使う場合は別途、変数操作をしないといけません。

◆サンプル8-4

<script type="text/javascript"><!--

function sampleExecute() {

	document.getElementById("resultArea").style.display ="block";

	var output = document.getElementById("outputArea");
	output.innerHTML = "";
	
	var i = 0;
	while (i < 10)
	{
		output.innerHTML += (i + 1) + "<br>";
		i++;
	}

}

// --></script>

以上のコードにあるwhile文と、以下のコードのfor文は同じ意味です。

for (var i = 0; i < 10 ; i++) 
{
    output.innerHTML += (i + 1) + "<br>";
}

ということは、これもまたwhile文かfor文のどっちかを使っていけば、
どっちかは使わなくても良いのでは？と思うかもしれませんが
・・・その通りっちゃその通りです。

ただ、普段使いやすいのはfor文の方で、
たまにwhile文を使いたくなるシーンというのはあります。
繰り返しの回数が不明確で、必要に応じて止めたり続けたりしたい時とかです。

例えば、while文は以下のような感じで使うことがあるでしょう。

var loopFlg = true;
while (loopFlg) {
	
	（処理）
	
	if (ループを止める条件) {
		loopFlg = false;
	}
}

ちなみに、while文の危ない所は以下のようなコードを簡単に書くことができる所です。

while (true)
{
	output.innerHTML += "■";
}

以上のようなコードは使わないにせよ、
間違えて以下のようなコードを書いてしまうことはあります。

var i = 0;
while (i < 10)
{
	output.innerHTML += (i + 1) + "<br>";
	
	// 「i++」を書き忘れると・・・
}

こうなると発生するのが「無限ループ」というやつです。
処理が止まるのではなく、ずっと同じ処理をしたまま動きっぱなしになり、
画面が何も受け付けなくなるので、起こしたくない事態ですね。

for文でも以下のようなコードを書くと無限ループが起きます。

for (var i = 0; i => 0 ; i++)
{
	output.innerHTML += (i + 1) + "<br>";
}

while文でやりがちな以下のソースを実行するとどうなるのか・・・

◆サンプル8-5

<script type="text/javascript"><!--

function sampleExecute() {

	document.getElementById("resultArea").style.display ="block";

	var output = document.getElementById("outputArea");
	output.innerHTML = "";
	
	var i = 0;
	while (i < 10)
	{
		output.innerHTML += (i + 1) + "<br>";
		
		// 「i++」を書き忘れると・・・
	}

}

// --></script>

とりあえず、Javascriptの場合はブラウザの「×」ボタンを押せばなんとかなりますが、
状況次第ではめんどくさいことになります。

while文で繰り返し処理を行う時は、
無限ループにおちいらないように気をつけましょう。
　

まとめ