繰り返し処理

2014年5月18日：JavaScript

プログラムの基本であるループ処理をJavaScriptでどのように記述するかを紹介します。

 

for文で指定回数繰り返す

まず、for文について解説します。

for文では、ある指定した数、命令を繰り返すことができます。

例えば、

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
</head>
<body>
<h1>１から１０の和</h1>
<p>１から１０の和は
<script>
S=0;
for(n=1;n<=10;n++){
 S=S+n;
}
document.write(S);
</script>です。
</p>
</body>
</html>

とコーディングすれば、

「１から１０の和は５５です。」

と表示されます。

 

注目すべきは以下の命令です。

<script>
S=0;	//Sに0を代入
for(n=1;n<=10;n++){	//n=1からはじめ、ループごとにnに1をたす。nが10以下ならループを続ける
	S=S+n;	//Sにnを加える
}
document.write(S);	//Sの値を出力する
</script>

コメントを見れば、だいたい命令の意味がわかるかと思います。

for(A;B;C)では、Aで初期条件を定め、Bでループを継続する条件を決めます。

そして、Cでループごとに行う命令を記述します。

よって、今回の場合、n=1,2,3,…,10とカッコ内の命令

S=S+n;

が繰り返されます。これにより

S=1+2+3+…+10

になり、最終的にSは55となり、

document.write(S);

で値が出力されるというわけです。

whileで条件が満たしている間繰り返す

続いてwhileを使ってforと同じことをやってみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
</head>
<body>
<h1>１から１０の和</h1>
<p>１から１０の和は
<script>
S=0;
n=1;
while(n<=10){
	S=S+n;
	n++;
}
document.write(S);	//Sの値を出力する
</script>です。
</p>
</body>
</html>

ここで重要な部分が

<script>
S=0;
n=1;
while(n<=10){
	S=S+n;
	n++;
}
document.write(S);	//Sの値を出力する
</script>

です。まず、はじめにSとnにそれぞれ0と1を代入しています。

そして、while文でnが10以下なら繰り返しカッコ内の命令が行われます。

そして、カッコ内では

n++;

により、ループごとにnがインクリメント(１くりあげ)されていきます。

そして、いずれnが11になりループを抜けます。

そのループの間、Sに1,2,3,…,10と値がたされていき、最終的に55となり

document.write(S);

で出力されるという流れになっています。

do-whileで繰り返す

では最後の、同様の操作をdo-whileを使って実現します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
</head>
<body>
<h1>１から１０の和</h1>
<p>１から１０の和は
<script>
S=0;
n=1;
do{
	S=S+n;
	n++;
}while(n<=10)
document.write(S);	//Sの値を出力する
</script>です。
</p>
</body>
</html>

これも基本的にwhile文と同じですが、while文と異なり、条件分岐が最後にあります。

まず、doにより括弧内の命令をとりあえず実行します。

そして、カッコ内の命令が終わったらwhile(n<=10)でn<=10ならまたカッコ内の動作を続行します。

最後に

以上でループについての命令の解説を終わります。

どれも基本的には同じことをしており、一つだけですべてを補うことが可能です。

気楽に使ってみてください。

著者：安井 真人(やすい　まさと)

TOP