【プログラミング入門】【JavaScript】10日目 繰り返し「For」命令

ホームページにアニメーションなどの動きをつける時に使われるJavaScript(ジャバスクリプト)というプログラミング言語を使って初心者・入門者向けにプログラミングのキホンを解説していきます！

難しい設定などはほとんどなく手軽に本格的なプログラミングを学ぶ事ができます。

簡単なホームページの作り方も解説しますのでホームページ作りに興味がある方もぜひご覧ください。

プログラムの基本は

(1)上から順番に
(2)条件で分かれ道
(3)繰り返し

でしたね！

今回から最後の(3)繰り返しをやっていきます！

本格的なプログラミングの始まりですね！

繰り返し命令を誤って使うと無限ループ(ずっと繰り返しでプログラムが止まらない状態)などに入ってコンピューターに負担をかけてしまう場合があるのできちんと理解して使いましょう！

通常の無限ループの場合ブラウザを「×」ボタンで閉じれば止まります。

もしこれで止まらない場合は近くの詳しい人に聞きましょう！

■10日目　プログラム１■

<script>

	/*jspgm10_1*/
	/*10日目　プログラム１*/

	var suji;

	for(suji = 0;suji < 10;suji = suji + 1){
		document.write(suji + " ");
	}

</script>

■実行結果■

■説明■

「for(フォー)」命令で繰り返し条件を決めて、{}カッコ内を繰り返します。

そして変数「suji」の内容を表示しております。

今回から結果を表示するのに「alert」命令だけではなく「document.write」という命令も使っていきます。

使い方は「alert」命令とほぼ変わらないですが、結果を一気に表示してくれるという特徴があります。

まず繰り返し用の変数を用意します。そして「for」命令の登場です！

for( 初期化 ; 条件 ; 進み方 )

for(suji = 0;suji < 10;suji = suji + 1)

こちらを一つずつ見ていきましょう。

初期化

suji = 0

ここで最初の数を決めます。

条件

suji < 10

次に条件を決めます。この場合は「変数「suji」が「10」より小さい間」という意味ですね！

変数「suji」が「10」になるとその時点で繰り返しをやめるので実行結果が「9」で終わってますね。

ここを「suji <= 10」とすると実行結果の最後は「10」になります。

「if」命令の時に学んだ「suji <= 10」→「10を含む(ふくむ)」・「suji < 10」→「10を含まない(ふくまない)」を注意しましょう！

進み方

suji = suji + 1

最後に進み方を決めます。この場合は繰り返すたびに変数「suji」に「+1」されます！

ここを「suji = suji + 2」とすると繰り返すたびに変数「suji」が「+2」されるので先ほどのプログラムであれば結果は

0 2 4 6 8

のようになります。

繰り返しの条件などをいろいろ変えて試してみましょう！

さきほど登場した

suji = suji + 1;

こちらの部分は

suji++;

と書き換えられます。これを「インクリメント」といいます。同じく

suji = suji - 1;

だった場合は

suji--;

と書き換えられます。こちらは「デクリメント」といいます。

よく使う書き方なので余裕があれば覚えておきましょう！

繰り返し命令を制するものはプログラミングを制する！と言われるほど繰り返しは大事なのでたくさん練習してレベルアップしましょう！

練習その１・・・「おはよう」を５回表示する。

■10日目　プログラム２■

<script>

	/*jspgm10_2*/
	/*10日目　プログラム２*/

	var suji;

	for(suji = 0;suji < 5;suji = suji + 1){
		document.write("おはよう！<br>");
	}

</script>

■実行結果■

■説明■

まずはキホンですね！変数「suji」が「0～4」の間繰り返しをして「5」で繰り返しをやめます。最初の「0」から始まるので「0,1,2,3,4」と５回分繰り返す事になります。

「document.write」命令内の「<br>」というのは改行のHTML記号になります。

詳しくは説明しませんが「document.write」命令で改行をいれたい場合はこの「<br>」を使うぐらいに覚えておいてください。

練習その２・・・「if」命令と組み合わせる。

「10」までカウントして「3」の倍数がきたら「おいっす！」と叫んでみましょう！

■10日目　プログラム３

<script>

	/*jspgm10_3*/
	/*10日目　プログラム３*/

	var kaisuu;

	for(kaisuu = 0;kaisuu <= 10;kaisuu++){
		document.write(kaisuu + " ");
		if(kaisuu == 3)document.write("おいっす！<br>");
		if(kaisuu == 6)document.write("おいっす！<br>");
		if(kaisuu == 9)document.write("おいっす！<br>");
	}

</script>

■実行結果■

■説明■

繰り返しをしている途中で「if」命令の条件が合えば「おいっす！」と表示します。

「10」までのカウントなので「for」命令の条件が「suji <= 10」となってますね！

繰り返しを想像しながらプログラムを作りましょう！

練習その３・・・他の変数も一緒に変化させる。

■10日目　プログラム４

<script>

	/*jspgm10_4*/
	/*10日目　プログラム４*/

	var suji = 0;
	var suji2 = 4;

	for(suji = 0;suji < 5;suji++){
		
		document.write("suji = " + suji);
		document.write(":suji2 = " + suji2 + "<br>");

		suji2--;
		
	}

</script>

■実行結果■

■説明■

繰り返し中一緒に他の変数「suji2」も変化させています。

では繰り返し命令の定番プログラム

「1 + 2 + 3 + 4 + 5 ～ 98 + 99 + 100」

と順番に足していく「１００まで計算」プログラムを作ってみましょう！

■10日目　プログラム５

<script>

	/*jspgm10_5*/
	/*10日目　プログラム５*/

	var suji = 0;
	var goukei = 0;

	for(suji = 0;suji <= 100;suji++){
		goukei = goukei + suji;
	}

	alert("１～１００まで足し算答えは" + goukei + "です！");

</script>

■実行結果■

■説明■

合計を入れる為の変数「goukei」にひたすら増加し続ける変数「suji」を足し合わせております。

試しに変数goukeiの値を少し追ってみましょう！

繰り返し0回目 goukei(0) + suji(0)　→　goukei(0)

繰り返し1回目 goukei(0) + suji(1)　→　goukei(1)

繰り返し2回目 goukei(1) + suji(2)　→　goukei(3)

繰り返し3回目 goukei(3) + suji(3)　→　goukei(6)

繰り返し4回目 goukei(6) + suji(4)　→　goukei(10)

繰り返し5回目 goukei(10) + suji(5)　→　goukei(15)

このように繰り返し命令を使って、変数「goukei」の値を塗り替えていく事で、複雑そうな計算もシンプルな繰り返し命令で書く事ができます！

次回はもう一つの繰り返し「while」命令を紹介したいと思います。

どこまで繰り返せばいいのかわからないけど繰り返したい時や、途中で繰り返しを抜ける方法などについても説明しておりますので今回の「for」命令と合わせてご覧ください。

11日目 繰り返し「while」命令