jQuery if文のサンプル

jQueryのif文のサンプルです。

サンプル	if文 / ネストの構造
	三項演算子 / undefinedを比較 / nullを比較
	比較演算子
論理演算子	論理積(&&) / 論理和(\|\|) / 論理否定(!)

if文

if (条件){
　　処理
} else if (条件) {
　　処理
} else {
　　処理
}

条件がtrueの場合、配下のブロック{ }の処理が実行され、if文の処理は終了します。
条件がfalseの場合、配下のブロック{ }の処理は実行されず、その下(else if/else/if文終了)に進みます。
else ifは、１つ以上記述できます。省略可です。
elseのブロック{ }の処理は、どの条件もtrueでなかったときに実行されます。elseは１つのみ記述できます。省略可です。

if文のサンプルです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
	const a = 1;

	if (a === 0) {
		console.log("1つめ");
		
	} else if (a === 1) {
			console.log("2つめ"); // 2つめが表示される
		
	} else {
		console.log("3つめ");
	}
});
</script>

4行目は、変数aに値をセットしています。
6行目からif文が始まります。
9行目のif文はtrueになるのでその配下の処理が実行されます。
10行目の処理が実行されif文を抜けます。

ネストの構造

ネストの構造のサンプルです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
	const a = 1;
	const b = 1;

	if (a === 1) {
		if (b === 1) { 
			console.log("p1");//p1が表示される
		}
	}
});
</script>

8行目は、if文の中にif文を記述しています。ネストの構造です。入れ子ともいいます。

比較演算子

上記コードの===は比較演算子です。
比較演算子は、2つの値を比べて真偽値(true/false)を返します。
イコール3つ(===)は値と型を比較します。

比較演算子	説明
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より小さいまたは等しい

論理演算子の論理積(&&)

if (左の条件式) && (右の条件式)

左の式と右の式が両方ともtrueの場合、trueになります。それ以外はfalseです。
左の式がfalseの場合、右の式は判定(評価)されません。これを短絡評価(ショートサーキット評価 : Short-Circuit Evaluation)といいます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
	const a = 6;

	if ((a === 6)  &&  (a < 10)){
		console.log("OK"); // OKが表示される
		
	} else {
		console.log("NG");
	}
});
</script>

6行目は、左の式と右の式が共にtrueなので、trueになります。

論理演算子の論理和(||)

if (左の条件式) || (右の条件式)

左の式または右の式のどちらかがtrueの場合、trueになります。
左の式がtrueの場合、右の式は判定(評価)されません。これを短絡評価(ショートサーキット評価 : Short-Circuit Evaluation)といいます。
論理和(||)は論理演算子です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
	const a = 1;

	if ((a === 0) || (a < 10)){
		console.log("OK"); // OKが表示される
		
	} else {
		console.log("NG");
	}
});
</script>

6行目は、左の式はfalseですが右の式がtrueなのでtrueになります。

論理演算子の論理否定(!)

if !(条件式)

式がfalseの場合にtrueになります。
式がtrueの場合にfalseになります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
	const a = 1;

	if (!(a === 2)){
		console.log("OK"); // OKが表示される
	}

	if (!(a === 1)){
		console.log("OK");
		
	} else {
		console.log("NG"); // NGが表示される
	}
});
</script>

6行目は値の比較でfalseになり、それを!で否定するのでtrueになります。
10行目は値の比較でtrueになり、それを!で否定するのでfalseになります。

三項演算子

変数 = 条件式 ? 値1 : 値2

条件式がtrueのとき、値1が返されます。
条件式がfalseのとき、値2が返されます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
	const a = 1;
	const b = a === 0 ? "test1" : "test2";
	console.log(b); // test2が表示される

	if(a===0){
		console.log("test1");
	} else {
		console.log("test2"); // test2が表示される
	}
});
</script>

5行目は、三項演算子です。
5,6行目をif文で書くと、8～12行目のようになります。

undefinedを比較する

if (typeof 変数 === "undefined")

undefinedは変数に値が代入されていない状態を表します。
undefinedを比較するときは、typeof演算子を使用します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
	var a;
	if (typeof a === "undefined") {
	console.log("aはundefinedです"); // 出力される
	}

	var b = 1;
	if (typeof b !== "undefined") {
	console.log("bはundefinedでない"); // 出力される
	}
});
</script>

5行目は、typeof演算子でundefinedか比較しています。
10行目は、否定(!==)です。

nullを比較する

if (変数 === null)

nullは中身が空の状態を表します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
	var a = null;
  
	if (a === null) {
		console.log("aはnullです"); // 出力される
	}
	
	var b = "test";
	
	if (b !== null) {
		console.log("bはnullでない"); // 出力される
	}
});
</script>

6行目は、比較演算子の===でnullを比較しています。
12行目は、否定(!==)です。