第8回【JavaScriptのループ制御(for/while)】


まずは動画を見てください!
今回は繰り返し、ループの制御です。

forとwhileについて

まずはfor文
	for( 初期化式; 条件式; 加算式 )
	{
		...
	}
次にwhile文
	while( 条件式 )
	{
		...
	}
いずれもブロックの中の命令を何回も繰り返す制御文です。
命令文が一つの時は、ブロックじゃなくて命令一つでも構いません。


for文は、まずは初期化式を実行します。
条件式に満たされている間、命令文を実行してから加算式を実行します。

while文は、初期化式と加算式は無く、条件式が満たされる間、命令文を実行します。
while文でfor文を表現する事も可能です。
	初期化式;
	while( 条件式 )
	{
		...
		...
		加算式;
	}

	for(let i=0; i<100 ; i++)
	{
		x+=i;
	}
	let i=0;
	while(i<100)
	{
		x+=i;
		i++;
	}
どちらも同じ結果になります。
まず、変数iに0を入れます。
変数iが100より小さい間、命令文(x+=i)を実行します。 加算式(i++)で変数iに1を足して、改めて条件を見て繰り返します。


for文、while文の使い分けについて。
プログラマーは無意識で使い分けてますが、回数が決まってる時はfor文、何回繰り返すかわからない時はwhileを使う事が多いと思います。

	for(let i=0; i<データの個数分 ; i++)
	{
		...
	}
	while(ボタンが押されるまで)
	{
		...
	}

実例

	for(let i=0; i<5 ;i++ )
	{
		document.write( i + "<BR>");
	}
最初は変数iに0を入れて、iが5未満の間、document.writeが実行され、iが1つ足されます。

	for(let i=0; i<=10 ;i+=2 )
	{
		document.write( i + "<BR>");
	}
条件式を10以下、加算式を+2にしました。

	for(let i=0,j=10; i<=10 && j>0 ;i+=2,j-- )
	{
		document.write( i + "<BR>");
		document.write( j + "<BR>");
	}
初期化式、加算式はカンマで複数入れる事も可能です。
条件式は論理演算子で複数入れる事ができます。


breakとconutinue

for文、while文共通で、breakとcontinueという命令があります。
breakは強制でループを抜ける命令です。
	for(let i=0;i<10;i++)
	{
		if( i==5 )break;
		document.write( i + "<BR>");
	}
iが5になった時点でループを抜けるため、0から4までしか表示されません。

continueはそれ以降の命令を飛ばして次のループに続けます。
	for(let i=0;i<10;i++)
	{
		if( i==5 )continue;
		document.write( i + "<BR>");
	}
この場合はiが5の時は、それ以降の処理(表示)をせず、次(6)から10未満の間、続きます。

whileでも同様に使えます。


whileの場合はフラグで管理することが多くあります。
	while(flag)
	{
		...
	}
これは変数flagがtrueの間、中の命令文を実行します。

	let flag=true;
	let i=0;
	while(flag)
	{
		if( i==5 )flag=false;
		document.write( i + "<BR>");
		i++;
	}
これは、iが5になった時にflagにtrueを入れてますので、5を表示した後にループを終了します。


Boolean型(true/false)について

特殊な型の一つにBoolean型(ブーリアン型、論理型)という型があります。
この型の持つ値はtrueかfalseのいずれかになります。
true/falseは、真/偽の意味があります。

また、比較演算子の結果はすべてBoolean型になります。
プログラミング初心者だと解りづらいかもしれませんが...
	let x=1;
	y=x==1;
これは、まず比較( x==1 )して、xが1で条件式に満たされているのでtrueという結果がyに入ります。
(xはtrueという値になります)

	let x=0;
	y=x==1;
この時は、xは1じゃないので、yにfalseが入ります。

if文、for文、while文などの条件式はすべてtrueかfalseになります。
結果trueの時に、条件式が満たされます。
また、0はfalseとして、1はtrueとして扱う事もできます。
	let flag=true;
	if( flag ) ... 
flagはtrueなので、条件は満たされます。

	let flag=1;
	if( flag ) ... 
1もtrueと扱うので、条件は満たされます。

	if( 条件式 )
	{
		//true になる値
		// 0以外の数値
		// ""(空)じゃない文字列
		// undefinedじゃないオブジェクト
	}
	else
	{
		//false になる値
		// 0
		// ""
		// undefined
		// NaN
		// null
	}


この辺りが使えるようになると中級者という感じです。

	let i=10;
	while(--i)
	{
		document.write( i + "<BR>");
	}
これは、iを減らしていって、0になった時に抜けます。



論理演算子について少し

論理演算子はtrueとfalseの論理演算しています。
以下はまだ理解しなくても大丈夫です!

true  && true  = true;
true  && false = false;
false && true  = false;
false && false = false;
true  || true  = true;
true  || false = true;
false || true  = true;
false || false = false;
!true  = false;
!false = true;

山根の実例

for文の例
	let myName   = "山根";
	let myHeight = 180;
	let myWeight = 54;
	
	let myBMI = myWeight / (myHeight/100)**2 ;
	
	//おはようを表示
	for( let i=0; i<5 ; i++ )
	{
		document.write(myName + "、おはよう<BR>");
		document.write("身長は"+myHeight+"cm<BR>");
		document.write("体重は"+myWeight+"kg<BR>");
		document.write("あなたのBMIは"+myBMI+"です。<BR>");
		document.write(myName + "、さようなら<BR>");
		
		myWeight += 5;
		myBMI = myWeight / (myHeight/100)**2 ;
	}
5回表示して、都度体重を5キロ増やしてBMIを再計算しています。


	let myName   = "山根";
	let myHeight = 180;
	let myWeight = 54;
	
	let myBMI = myWeight / (myHeight/100)**2 ;
	
	//おはようを表示
	while( myBMI < 30 )
	{
		document.write(myName + "、おはよう<BR>");
		document.write("身長は"+myHeight+"cm<BR>");
		document.write("体重は"+myWeight+"kg<BR>");
		document.write("あなたのBMIは"+myBMI+"です。<BR>");
		document.write(myName + "、さようなら<BR>");
		
		myWeight += 5;
		myBMI = myWeight / (myHeight/100)**2 ;
	}
BMIが30未満の間5キロずつ体重を増やし計算を繰り返す

回数がわかる時はfor
whileは何回繰り返すかわかりません。


次回に続く...



akichon/あきちょん
Youtubeでプログラミング講座やってるゲーム好きの(元?)プログラマ...
>>open profile...
■Twitter始めました
https://twitter.com/ak1chon
■Youtubeチャンネルはこちら
akichon(Youtube)