条件分岐

Conditional Branching

条件分岐とは

条件分岐とは、ある条件によって処理を分岐させることです。
条件分岐を使用することで、状況に応じて異なる動作をさせることができます。
基本的な条件分岐の方法としては、if文、else文、else if文、およびswitch文があります。

if文

if文は、JavaScriptで条件分岐を行うための基本的な構文です。
ある条件が満たされた場合にのみ特定のコードを実行し、それ以外の場合には別の処理を行うことができます。

if( 条件式 ){
		// 条件式に合致する場合に行われる処理 → true
} else{
	// 条件式に合致しない場合に行われる処理 → false
}

var lunch = 1000;

if ( lunch < 1000 ) {
	console.log( '食べる' );
} else{
	console.log( '食べる' );
}

falseを省略した場合

if( 条件式 ){
	// 条件式に合致する場合に行われる処理
}

比較演算子

比較演算子とは、JavaScriptで値同士を比較するために使われ、true か false のブール値を返します。
これらは主に、条件文(if文など)で使われ、条件が成立するかどうかを判断するために利用されます。

if( 条件式 ){
	// 条件式に合致する場合に行われる処理
}
比較演算子 意味
> A > B AはBより大きい
>= A >= B AはB以上
< A < B AはBより小さい(未満)
<= A <= B AはB以下
== A == B AはBと等しい
=== A === B AはBと等しい
!= A != B AはBと等しくない
!== A !== B AはBと等しくない

厳密な比較について

厳密な比較 「===」では、値だけでなく型もチェックする比較方法です。これにより、JavaScriptが自動で型を変換せず、正確な結果を得られます。
しかし「==」を使うと型を自動で変換してしまうことがあり、これが意図しない結果を引き起こすことになります。
なので基本的には厳密な比較の「===」と「!==」を使いましょう。

複数条件の組み合わせ

else if文を使ったりif文を入れ子にしたり、様々な方法で条件を組み合わせることができます。

条件式が2つ以上の場合

一つの条件ではなく、複数の条件がある場合には下記のようにします。
複数の条件を順番にチェックしたいときに便利です。

if( 条件式A ){
	// 条件式Aがtrueの場合の処理
} else if( 条件式B ){
	// 条件式Aがfalseで、条件式Bがtrueの場合の処理
} else{
	// 条件式AもBもfalseの場合の処理
}

複数の条件を同時に満たす場合

if 文の中にさらに別の if 文を入れることができます。
特定の条件が true になったとき、さらに細かい条件をチェックしたい場合に使います。

if( 条件式A ){
	if( 条件式B ){
		// 条件式AとBがtrueの場合の処理
	} else{
		// 条件式Aのみがtrueの場合の処理
	}
}

論理演算子

複数の条件を組み合わせて比較する場合、JavaScriptでは論理演算子を使います。
主な論理演算子には、AND(かつ)、OR(または)、NOT(ではない)があります。
これにより、複数の条件を同時にチェックしたり、条件の組み合わせによって異なる処理を実行することができます。

&&(かつ)

すべての条件が true の場合に true を返します。
1つでも false なら、結果は false です。

if( 条件式A && 条件式B ){
	// 条件式AとBが両方trueの時の処理
} else{
	// それ以外の時の処理
}

||(または)

どれか1つでも true なら true を返します。
すべてが false の場合のみ、結果が false になります。

if( 条件式A || 条件式B ){
	// 条件式AとBの少なくともどちらか一方がtrueの時の処理
} else{
	// 条件式AもBもfalseの時の処理
}

!(でない)

true を false に、false を true にします。
条件を反転させたいときに使います。

if( !条件式A ){
	// 条件式Aがfalseの時の処理
} else{
	// 条件式Aがtrueの時の処理
}

var myPhone = 'iPhone'; // or android
var myPc    = 'mac'; // or windows

if( myPhone === 'iPhone' && myPc === 'mac' ){
	console.log('iPhoneかつmac');
}

if( myPhone === 'iPhone' || myPc === 'mac' ){
	console.log('iPhoneまたはmac');
}

if( !(myPhone === 'Android') ){
	console.log('Androidでない');
}

switch文

switch文は値に対して厳密な比較(===)を行います。式の値とケースの値とが完全に一致する場合にそのケースが実行されます。
条件を真(true)と偽(false)に分けて、それぞれ処理を分けるのがif文ですが、複数条件がある場合にはswitch文を使うことでコードがシンプルで読みやすくなるメリットがあります。
switch 文は、複数の if...else if 文を簡潔に書ける方法としてよく使われ、条件が多い場合に特に便利です。

switch ( 条件 ) {
	case 値1:
		// 値1の時に実行される処理
		break;
	case 値2:
		// 値2の時に実行される処理
		break;
	default:
		// どのケースにも一致しない場合に実行される処理
}
  • switch (評価する値): ここで指定した値をチェックします。
  • case: switch の評価に一致する条件です。case の後に処理を書きます。
  • break: break は case に一致する処理を実行した後、switch 文から抜け出すために使います。
    break がないと、次の case にも続けて処理が行われてしまいます。
  • default: どの case にも一致しなかった場合の処理です。
    default はオプションですが、指定しておくと、予期しないケースにも対応できます。

var time = '2時';

switch ( time ) {
	case '1時':
		alert('1回音を鳴らします');
		break;

	case '2時':
		alert('2回音を鳴らします');
		break;

	case '3時':
		alert('3回音を鳴らします');
		break;

	default:
		alert('音はなりません。');
		break;
}