アフィテク

アフィ収入月10万円以下の初心者を対象に『アフィリエイトで稼ぐテクニック』を発信!

柔軟な処理を実現!条件分岐(if文、switch文)とは?【JavaScript入門】

      2017/12/04

関数に続き今回は条件分岐です。条件分岐とはその名の通り条件に応じて処理を分岐することをいいます。条件分岐にはif文とswitch文があります。

if文とは

if文は特定の条件を満たす場合のみに処理を実行したい場合に使用します。条件式に使用する演算子はこちらのサイトを参照ください。

var a = 5;

if(a == 5){
	alert("変数aの中身は5です。");
}

上記の例では変数aの中身が5であればアラートを表示し、違えば何もしません。条件を満たさない場合に何かを実行したい場合は下記のようにelse文を使用します。

var a = 3;

if(a == 5){
	alert("変数aの中身は5です。");
}else{
	alert("変数aの中身は5ではありません。");
}

さらに下記のようにelse if文を使用することで詳細に処理を分岐することが可能です。

var a = 3;

if(a == 5){
	alert("変数aの中身は5です。");
}else if(a == 3){
	alert("変数aの中身は3です。");
}else{
	alert("変数aの中身は5でも3でもありません。");
}

else if文は複数指定することが可能です。

var a = 3;

if(a == 5){
	alert("変数aの中身は5です。");
}else if(a == 3){
	alert("変数aの中身は3です。");
}else if(a >= 3){
	alert("変数aの中身は3以上です。");
}else{
	alert("変数aの中身は5でも3でもありません。");
}

上記の例では大きな落とし穴があるので注意が必要です!上記の例ではalert(“変数aの中身は3以上です。”);の部分は実行されません。条件を満たしているのに何故でしょう? それはif文は上から順に評価されその時点でif文のブロックから抜ける為です。その為、if文は記述する順序も重要になります。

switch文とは

switch文は少し特殊な条件分岐文です。switch(ラベル){…}で指定したラベルの位置までジャンプします。まず例を見てみましょう。

var label = 3;

switch(label){
	case 5:
		alert("labelは5です。");
		break;

	case 3:
		alert("labelは3です。");
		break;

	default:
		alert("labelは5でも3でもありません。");
		break;	
}

上記の例では、変数labelには3が入っているのでcase 3:というラベルまでジャンプします。default:はラベルが存在しない場合に移動します。else文のようなものですね。

switch文はあくまで指定のラベルまでジャンプするだけの機能です。指定のラベル以下の処理(他のラベルの処理も含む)は全て実行されます。

では何故、上記の例では条件を満たすラベル部分の処理だけが実行されるのか?その答えがbreakです。breakを使えばswitchブロックから抜けることができます。この機能のおかげで条件分岐が可能になっているわけです。

これだけ見るとあえてswitch文を使う必要性が無いような気がしますがswitchならではの特徴があります。下記をご覧ください。

var label = 3;

switch(label){
	case 5:
		alert("labelは5です。");
		break;

	case 4:	
	case 3:
	case 2:
	case 1:
		alert("labelは1~4です。");
		break;

	default:
		alert("labelは6以上です。");
		break;	
}

あえてcase 4:、case 3:、case 2:にはbreakを指定しないことで処理をコンパクトにまとめることに成功しています。

if文、switch文の使い分けですが、条件が少ない場合や「~以上、~以下」という条件の場合はif文、条件が複数かつピンポイントなモノの場合はswitch文を使うのが良いかと思います。

次回繰り返し構文を解説しようと思います。

 - Web制作テクニック , , ,