JavaScript - if による処理の分岐

公開日:2018-11-29 更新日:2019-05-13

1. 概要

if で処理の流れを分岐します。

if ( 条件式 ) {
	条件式に当てはまる場合
}

if ( 条件式 ) {
	条件式に当てはまる場合
} else {
	条件式に当てはまらない場合
}

2. if

var value = 70;

if (value >= 10) {
	console.log("10以上です。");
}

if (value >= 50) {
	console.log("50以上です。");
} else {
	console.log("50未満です。");
}

if (value >= 100) {
	console.log("100以上です。");
} else {
	console.log("100未満です。");
}
10以上です。
50以上です。
100未満です。

3. 条件式の例

console.log( 2 >= 0 ); //true
console.log( 2 >  1 ); //true
console.log( 2 == 2 ); //true
console.log( 2 != 2 ); //false
console.log( 2 <  1 ); //false
console.log( 2 <= 1 ); //false
//console.log( 2 => 0 ); // エラー「=>」は使えない
//console.log( 2 =< 1 ); // エラー「=<」は使えない
//console.log( 2 =! 2 ); // エラー「=!」は使えない

文字の比較も行えます。
文字と数値の比較の場合は、文字が数値に変換されて比較されるようです。
console.log( "a"   == "a"  ); //true
console.log( "b"   >= "a"  ); //true
console.log( "020" <  "10" ); //true
console.log( "020" <   10  ); //false
console.log( "020" <   30  ); //true

文字と数値の比較で、文字が数値に変換できない場合は、全て false になります。
console.log( "a" >  0); //false
console.log( "a" == 0); //false
console.log( "a" < 0);  //false

=== を使うと、厳格な比較が行えます。型が異なる場合は false となります。
console.log( "1"   ==  1 ); //true
console.log( "1"   === 1 ); //false
console.log( "1"   !=  2 ); //true
console.log( "1"   !== 1 ); //true
console.log( false ==  0 ); //true
console.log( false === 0 ); //false
console.log( true  ==  1 ); //true
console.log( true  === 1 ); //false