2013/08/06

基礎から学べるJavaScript!【条件分岐】と【繰り返し】

条件分岐と繰り返し JavaScript初級編

今回は、if文などの条件分岐と、for文などの繰り返し処理について説明します。

データの値によって処理を変えたり、データの数だけ同じ処理を繰り返すなどの、複雑な処理が行えるようになります。

目次

関係演算子と論理演算子

if文

まず、処理の制御を説明する前に、関係演算子と論理演算子について説明したいと思います。

JavaScriptでは条件が「正しい(true)」「正しくない(false)」かを判定して状況に応じた処理を行うことがあります。

「10は5よりも大きい」ということを「10 > 5」という風に書くことがありますね?
この式は正しいですから結果はtrueとなります。

ではもし「10 < 5」となっていたらどうでしょうか。
「...5は10よりも大きい...??」
そんなわけありませんね。

この式は間違っているので結果はfalseとなります。 このように、>などの条件を作るときに使う記号をまとめて関係演算子と呼び、判定した結果は真偽値で返ります。

関係演算子
演算子 式がtrueになる場合
== 両辺が等しい場合
!= 両辺が等しくない場合
> 左辺が右辺より大きい場合
>= 左辺が右辺以上の場合
< 左辺が右辺より小さい場合
<= 左辺が右辺以下の場合

※2文字で一つの演算子なので、文字の間にスペースを入れないように!

さらに

  • ・「~かつ~のとき」
  • ・「~もしくは~のとき」
  • ・「~ではないとき」

こんな場合の条件を作りたいときには論理演算子を使います。

論理演算子とは、「条件を評価して真偽を得る」というものです。
言葉で説明されても何を言っているのかピンと来ないと思うので、実際に例を挙げてみましょう。

"6時以降かつ10時以前"の場合のみに"朝です"と表示させたいとき、
論理積を表す&&演算子を使って

(時刻が6時以降) && (時刻が10時以前)

    と表す事が出来ます。

&&演算子は、式の両辺がtrueの場合のみtrueを返します。どちらか一方でも条件に合致しなければfalseを返します。

論理演算子は他にもあり、表のような評価方法となっています。

論理演算子
演算子 式がtrueになる場合 評価
&& 両辺がtrueの場合 左辺 右辺 結果
false false false
false true false
true false false
true true true
|| 両辺のいずれかがtrueの場合 左辺 右辺 結果
false false false
false true true
true false true
true true true
! 右辺がfalseの場合 左辺 右辺 結果
false true
true false

論理演算子は条件や繰り返し処理を書くときに欠かせない重要なものです。よく理解しておいてください。

条件分岐

では、条件分岐処理について説明していきます。

if文

if文

まずif文です。一つの条件を判定して分岐させたい場合に利用します。

if(条件){
処理文;
}

という構文になっていて、条件がtrueの場合にのみ{}内の文を一行ずつ実行していきます。

では実際に見ていきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample1</title>
<script type="text/javascript">
	function Sample1(){
		var hoge = Sample1_form.X.value;	//テキストエリアの値を取得
		
		hoge = parseInt(hoge);				//入力された数字を数値に変換
		
		if(hoge >= 10){						//入力された数字が10以上かどうか
			alert("入力された"+ hoge +"は10以上。");
		}
	}
</script>
</head>

<body>
<form name="Sample1_form" action="Sample1.html">
<input type="text" name="X">
<input type="button" value="Sample1" onclick="Sample1()">
</body>
</html>

10以上の値を入力した場合のみ動くことが理解できたかと思います。
このように、if文を使用すれば条件によって処理を分岐させる事が出来ます。

if~else if~else文

if文

では次にif~else if~else文です。

if文では一つの条件しか判定できなかったのですが、この構文を利用すれば複数の条件を判定する事が出来ます。

if(条件1){
	処理文1;
}else if(条件2){
	処理文2;
}else if(条件3){
	処理文3;
}else{
	処理文4;
}

このような構文になります。

まず条件1を判定し、trueだった場合は処理文1を行います。
falseだった場合は条件2を判定し、条件1がfalseかつ条件2がtrueの場合は処理文2を実行します。
もしfalseの場合は...と条件を判定していき、すべての条件がfalseだった場合は最後のelse内の処理文が実行されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample2</title>
<script type="text/javascript">
	function Sample2(){
		var hoge = Sample2_form.X.value;	//テキストエリアの値を取得
		
		hoge = parseInt(hoge);				//入力された数字を数値に変換
		
		if(hoge >= 20){						//入力された数字が20以上かどうか
			alert("入力された"+ hoge +"は20以上。");
		}else if(hoge < 10){				//入力された数字が10未満かどうか
			alert("入力された"+ hoge +"は10未満。");
		}else{								//どの条件にも合致しなかった場合
			alert("入力された"+ hoge +"は10以上20未満");
		}
	}
</script>
</head>

<body>
<form name="Sample2_form" action="Sample2.html">
<input type="text" name="X">
<input type="button" value="Sample2" onclick="Sample2()">
</body>
</html>

このように、複数の条件によって処理を分岐させ、それぞれに応じた処理を行わせることができます。

switch文

if文

前述のif~else if~else文と同じように、複数の条件によって処理を分岐させることの出来るswitch文という構文も存在します。

switch(式){
	case 値1:
		処理文1;
		break;
	case 値2
		処理文2;
		break;
	default:
		処理文3;
		break;
}

switch文は、式の値が各々のcaseの値と合致すれば、そのcase内の処理文をbreakまで実行します。 どの値にも合致しなかった場合はdefault以下の処理文を実行します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample3</title>
<script type="text/javascript">
	function Sample3(){
		var hoge = Sample3_form.X.value;	//テキストエリアの値を取得
		hoge = parseInt(hoge);				//入力された数字を数値に変換
		
		switch(hoge){
			case 1:
				alert("入力された数字は1です");
				break;
			case 2:
				alert("入力された数字は2です");
				break;
			case 3:
				alert("入力された数字は3です");
				break;
			default:
				alert("入力された数字は1~4の数字ではありません");
				break;
		}
	}
</script>
</head>
<body>
<form name="Sample3_form" action="Sample3.html">
<input type="text" name="X">
<input type="button" value="Sample3" onclick="Sample3()">
</body>
</html>

繰り返し

続いて、繰り返し処理について説明していきます。

たとえば、10人の成績を表示させたいとしたとき、10回分同じ処理をさせるソースコードを書くのは手間がかかりますよね。
10人なら平気!と思っても、50回、100回となったら手間もかかるしソースコードも長くなって読みづらくなってしまいます。

そこで、成績を表示する処理を人数分だけ繰り返すことの出来るような、繰り返し文という構文を利用してみましょう。

for文

if文

まずはfor文から説明します。

for(初期化;繰り返し条件;カウンタ変数の更新){
	処理文;
}

構文だけ見てもよくわかりませんね。実際に動くソースコードで確認してみましょう

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample4</title>
<script type="text/javascript">
	function Sample4(){
		var hoge = Sample4_form.X.value;	//テキストエリアの値を取得
		
		hoge = parseInt(hoge);				//入力された数字を数値に変換
		
		for(var i=0 ; i<hoge ; i++){
		alert("for文による繰り返し"+(i+1)+"回目");
		}
	}
</script>
</head>

<body>
<form name="Sample4_form" action="Sample4.html">
<input type="text" name="X">
<input type="button" value="Sample4" onclick="Sample4()">
</body>
</html>

for文では、

  • ①変数を初期化
  • ②条件式がtrueならば処理文を実行、変数を更新
  • ③条件式がfalseになるまで②を実行

この場合には、

  • ①変数をiとし、iに0を代入して初期化、
  • ②入力された値とiを比較して、trueならばポップアップ表示をさせる処理を実行し、iに1加算
  • ③入力された値とiを比較して、falseになるまで②を実行

ということになります。

while文、do~while文

if文

while文

while(条件){
	処理文;
}

while文は条件がtrueである限り、処理文を実行し続けます。

do~while文
do{
処理文;
}while(条件);

do~while文は、まず処理文を一度実行し、その後条件を判定します。

while文は条件がfalseだった場合に処理は実行されませんが、do~while文は必ず最初に処理を実行することになっています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample5</title>
<script type="text/javascript">
	function Sample5_w(){
		var hoge = Sample5_form.X.value;	//テキストエリアの値を取得
		var i = 0;
		hoge = parseInt(hoge);				//入力された数字を数値に変換
		
		while(i < hoge && hoge <= 5){
			alert("while処理"+ (i+1) +"回目");
			i++;
		}
	}
	
	function Sample5_d(){
		var hoge = Sample5_form.X.value;	//テキストエリアの値を取得
		var i = 0;
		hoge = parseInt(hoge);				//入力された数字を数値に変換
		
		do{
			alert("do while処理"+ (i+1) +"回目");
			i++;
		}while(i < hoge && hoge == 5 )
	}
</script>
</head>

<body>
<form name="Sample5_form" action="Sample5.html">
<input type="text" name="X">
<input type="button" value="Sample5_w" onclick="Sample5_w()">
<input type="button" value="Sample5_d" onclick="Sample5_d()"
</body>
</html>

5以下の数字を入力してみてください。

5を入力した場合は両方とも同じ動きをします。

4以下の数字を入力した場合に、while文では繰り返し実行されるのに対し、do~while文では一度しか実行されません。
do~while文では、条件に合致しなくても一度は実行されることがお解かりいただけたかと思います。

while文を使う上での注意点として、最終的に条件がfalseになるようにしておかないと、ループを抜けられなくなってしまい、何時まで経っても処理が終わらないという事になりかねませんので、使用する場合は意識するようにしてください。

まとめ

今回説明した条件分岐と繰り返しを上手く利用することによって、複雑な処理を行えるようになります。
条件やデータ数、データの値によって処理が分けられるので、プログラミングの幅も広がります。

また、演算子は様々な条件に対応するためには深く理解している必要がありますし、これらを使わないソースコードは無いと言っても過言ではないほど重要な構文ですので、しっかり理解しておいてください。