TOPページ ▶ プログラミング ▶ JavaScript ▶

【JavaScript】if文の使い方と条件の種類

更新日：2024/02/27

ほとんど全てのプログラミング言語では条件分岐でif文を使用します。
しかし言語によって使い方に差異があります。
他言語で学んだとしても、一度はJavaScriptのif文を確認する必要があります。

今回は初心に帰って、JavaScriptのif文についてまとめてみます。

このページの目次

1if文の使い方
基本形
else
else if
2条件の書き方
条件1:抽象比較
条件2:厳密比較
条件3:値、式
条件4:ANDとOR
条件5:否定

if文の使い方

if文は『もし~だったら、この処理をおこなう』というロジックを記述できる構文です。

他言語を学習した人は、JavaScriptの『もし~だったら』の部分が少し特殊と感じるかもしれません。
そこで『もし~だったら』の部分は後回しにして、if文の形を先に解説します。

基本形

JavaScriptのif文は、条件を丸括弧で囲みます。
条件とは『もし~だったら』の部分です。

その後に波括弧を記述して、その中に処理したい内容を記述します。

ifの構文

if( 条件 ){
    条件を満たすときの処理
}

処理したい内容が1行のみなら、波括弧を省略できます。

波括弧の省略

if( 条件 ) 条件を満たすときの処理;
 // 行を変えてもＯＫ
if( 条件 )
  条件を満たすときの処理;

ただし後から処理を追加すると、波括弧を付け忘れることがあります。
すると、意図しない動きになります。
それに気が付かずに数日後にコードを見たとき、{}を付け忘れたのか、それとも1行だけなのかと悩むかもしれません。

波括弧の付け忘れパターン

if( 条件 )
  条件を満たすときの処理;
  if内に後から追加した処理; // ←　数日後に見るとif内の処理かどうかわからない

プログラミングに慣れていないうちは、1行だけでも波括弧で囲むようにしたほうが良いです。

else

条件を満たさないときの処理は、if文の後にelse文を使用します。

if...elseの構文

if( 条件 ){
   条件を満たすときの処理
}else{
   条件満たさないときの処理
}

elseも、処理したい内容が1行のみなら波括弧を省略できます。

elseの波括弧の省略

if( 条件 ){
   条件を満たすときの処理
}else
   条件満たさないときの処理

if...else構文で処理内容が1行のみの場合、3項演算子に置き換えられるかどうかを検討しましょう。
■【JavaScript】 3項演算子とは？意外とハマる落とし穴に注意

else if

if文とは異なる条件を続けて記述したいときは、else if文を使用します。

else ifは ifの満たさないときに、別の条件判定を行います。

if...else ifの構文

if( 条件1 ){
   条件1を満たすときの処理
}else if( 条件2 ){
   条件1を満たさず、条件2を満たすときの処理
}

else ifも、処理したい内容が1行のみなら波括弧を省略できます。

また、複数のelse ifを記述できます。
さらに、最後にelseを記述できます。

複数のelse ifとelseの構文

if( 条件1 ){
   条件1を満たすときの処理
}else if( 条件2 ){
   条件1を満たさず、条件2を満たすときの処理
}else if( 条件3 ){
   条件1と条件2を満たさず、条件3を満たすときの処理
}else{
   条件1と条件2と条件3を満たさないときの処理
}

else ifは、直前までの全ての条件を満たさないときに条件判定されます。
複数のelse ifを重ねていくと、とても分かりにくいプログラムコードになりやすいです。

else ifの数を減らす工夫が、プログラマとしての腕の見せ所です。

例えば次のような、if文のみの関数があるとします。

const func =()=>{
  if( 条件１ ){
     なんらかの処理
  }else if( 条件２ ){
     なんらかの処理
  }else{
     なんらかの処理
  }
}

次のように、if内でリターンするとシンプルなコードになります。

const func =()=>{
  if( 条件１ ){
     なんらかの処理
     return;
  }
  if( 条件２ ){
     なんらかの処理
     return;
  }
  なんらかの処理
}

条件の書き方

if文の条件は、二つの値の比較を記述することが多いです。
実際には、比較だけでなく、多種多様な計算を記述できます。

■抽象比較

const value = 5;
  // 左右が同じかどうかを判定
if( value == 5 ){ console.log("true"); }else{ console.log("false"); }
>> true
  // 大小比較（数値文字列は数値として扱われる）
if( value <= "10" ){ console.log("true"); }else{ console.log("false"); }
>> true

■厳密比較

const value = 5;
  // 左右の型と値が同じかどうかを判定
if( value === 5 ){ console.log("true"); }else{ console.log("false"); }
>> true
if( value === "5" ){ console.log("true"); }else{ console.log("false"); }
>> false

■値、式

  // リテラル値
if( 100 ){ console.log("true"); }else{ console.log("false"); }
>> true
if( 0 ){ console.log("true"); }else{ console.log("false"); }
>> false

  // 変数、計算式
const value = 100;
if( value ){ console.log("true"); }else{ console.log("false"); }
>> true
if( value - value ){ console.log("true"); }else{ console.log("false"); }
>> false

■ANDとOR

const value = 100;
if( value > 10 && value < 150 ) { console.log("true"); }else{ console.log("false"); }
>> true
if( value < 10 || value > 150 ) { console.log("true"); }else{ console.log("false"); }
>> false

const flg1 = true , flg2 = false;
if( flg1 && flg2 ) { console.log("true"); }else{ console.log("false"); }
>> false
if( flg1 || flg2 ) { console.log("true"); }else{ console.log("false"); }
>> true

■否定

if( ! 10 ) { console.log("true"); }else{ console.log("false"); }
>> false
if( ! 0 ) { console.log("true"); }else{ console.log("false"); }
>> true

const flg1 = true , flg2 = false;
if( !( flg1 && flg2 ) ) { console.log("true"); }else{ console.log("false"); }
>> true
if( !( flg1 || flg2) ) { console.log("true"); }else{ console.log("false"); }
>> false

条件1:抽象比較

『二つの値が同じか？』『左側の値が右側より大きいか？』など、値を比較します。
このとき、数値として判断できるもの（数値文字列等）は数値に変換してから比較されます。

比較に使用する記号を比較演算子と呼びます。

数値文字列を数値として扱う

比較演算子でのコード例です。
数値と数値、数値と数値文字列で比較しています。

比較の例

const a = 10; // ←　数値型
if( a <= 2 ) { 
  console.log( "aは0から2" );
}else if( a <= "5" ) { // ← 数値文字列は数値型に変換される
  console.log( "aは3から5" );
}
else {
  console.log( "aは6以上" );
}
>> aは6以上

上記のコードを実行すると、コンソールに "aは6以上" と表示されます。
比較演算子は数学の記号と同じなので、流れがわかりやすいですね。

比較演算子の種類

比較演算子には、次のようなものがあります。

比較演算子	例	意味
==	a == 100	左と右が等しい
!=	a != 100	左と右が等しくない
<	a < 100	左より右が大きい
>	a > 100	左より右が小さい
<=	a <= 100	左より右が大きいまたは等しい
>=	a >= 100	左より右が小さいまたは等しい

等しいか等しくないかの比較をJavaScriptの仕様上では抽象等値比較(Abstract Equality Comparison)と呼びます。
大小比較は抽象関係比較(Abstract Relational Comparison)と呼びます。

比較は計算結果を返す

比較演算子は、加算(+)や減算(-)と同じように計算を行います。
加算等と異なるのは、計算結果としてtrueまたはfalseを返す点です。

const a = 200;
const b = a == 1; // b に a == 1 を計算した結果が代入される
const c = a > 100; // c  a > 100 を計算した結果が代入される
console.log( b ); // 結果:false
>> false
console.log( c ); // 結果:true
>> true

falseかtrueを返すだけなので、上記のように比較演算子はif文以外でも使用できます。

比較演算子の注意点

比較演算子は、重要な注意点があります。
最初に書いてありますが数値と数値文字列の区別をしない点です。

例えば、数値1 と文字列 "1" を == で比較すると『左と右が等しい』と判定されます。

if( 1 == "1" ){ 
  console.log( "等しい" );  // ← こちらが表示される
} else { 
  console.log( "等しくない" );
}
>> 等しい

実際には次の法則で、数値以外の値が数値に変換されます。

値	変換後の値
数値文字列	対応する数値
true	1
false	0
Null	0
空文字""	0
一つ以上のスペース文字" "	0

この特性を理解していないと、思わぬ不具合を入れ込んでしまう可能性があります。
次のコードは文字列を受け取った引数が文字列以外ならエラーとして false を、文字列なら文字数を返す関数を定義しています。

const func = ( text )=>{
  if( typeof text != "string" ) return false;
  return text.length;
}

const length = func( "" );
console.log( length );
>> 0

if( length == false ){ // 0 == 0 なので等しいと判定
  console.log( "文字列を指定してください" );
}
>> 文字列を指定してください

コードの後半では空文字列で関数を実行しています。
そして、エラー判定するために false と比較してます。

ここで問題発生。
関数の戻り値は0なのでエラーではないのに、エラー判定されます。
意図しない不具合ですね。

対象法は、次項の厳密比較演算子を使用します。

if( length === false ){ //

なお、nullと他の0変換される値との比較は false 判定されます。

console.log( null == 0 );
>> false
console.log( null == false );
>> false

console.log( 0 == false );
>> true
console.log( "" == false );
>> true
console.log( 0 == "" );
>> true

undefinedとnullの比較

undefinedとnullを比較すると、等しいと判定されます。

if( undefined == null ){ 
  console.log( "等しい" );  // ← こちらが表示される
} else { 
  console.log( "等しくない" );
}
>> 等しい

undefinedとnullを異なる値として比較するときは、次項の厳密比較で比較します。

条件2:厳密比較

型を区別しての比較、例えば数値と数値文字列を異なる値として比較するときは、厳密比較演算子を使用します。

厳密比較演算子の種類

比較演算子	例	意味
==	a === 100	左と右が型と値が等しい
!=	a !== 100	左と右が型または値が等しくない

この演算子を使用した比較は、JavaScriptでは厳密等値比較(Strict Equality Comparison)と呼びます。

大小比較は厳密比較演算子がありません。
型も含めた大小判定は、事前にtypeof演算子で型チェックをおこないます。

次のコードは、二つの変数の型が同じかどうかを確認しています。

const value1 = 1;
const value2 = "3";
  // 二つの変数の型が同じかどうか判定
if( typeof value1 !== typeof value2 ){
  console.log( "型が不一致！" );
}
>> 型が不一致！

  // 二つの変数の型が数値型かどうか判定
if( typeof value1 !== "number") {
  console.log( "value1が数値ではない！" );
}
if( typeof value2 !== "number") {
  console.log( "value2が数値ではない！" );
}
>> value2が数値ではない！

文字列の比較

文字列の内容が同じかどうかは、厳密比較演算子で比較します。

const value = "hello!";

if( "hello!" === value ){
  console.log( "内容が同じ！" ); // ← こちらが表示される
}else{
  console.log( "内容が異なる！" );
}
>> 内容が同じ！

抽象等値比較(==)でも問題ありませんが、空文字判定があいまいになるので、厳密比較をおすすめします。

オブジェクトの比較

二つのオブジェクトが同じかどうかを確認するときも厳密比較演算子を使用します。

const obj1 = {};
const obj2 = obj1;

if( obj2 === obj1 ){
  console.log( "同じオブジェクト" ); // ← こちらが表示される
}else{
  console.log( "異なるオブジェクト！" );
}
>> 同じオブジェクト

オブジェクトの内容が同じかどうかの判定ではないので、注意しましょう。

const obj1 = {value:1};
const obj2 = {value:1};

if( obj2 === obj1 ){
  console.log( "同じオブジェクト" );
}else{
  console.log( "異なるオブジェクト！" ); // ← こちらが表示される
}
>> 異なるオブジェクト！

条件3:値、式

条件には、変数や計算式、数値や文字列などのリテラル値、関数呼び出しなど、最終的に値を生成する式を記述できます。
最終的に生成された値は、次の法則でtrueまたはfalseに変換されて条件判定されます。

型	変換後の値
Boolean	trueならtrue。falseならfalse
Undefined	false
Null	false
Number	0またはNaNならfalse。それ例外はtrue
String	空文字("")ならfalse。それ以外ならtrue
Symbol	true
BigInt	0nならfalse。それ以外ならtrue
Object ※配列・関数含む	true

抽象比較では空文字とスペース文字を同じ値として判定しましたが、ここでは空文字をfalse、スペースをtrue判定します。

  // リテラル値
if( 100 ){ console.log("true"); }else{ console.log("false"); }
>> true
if( 0 ){ console.log("true"); }else{ console.log("false"); }
>> false
if( "abc" ){ console.log("true"); }else{ console.log("false"); }
>> true
if( "" ){ console.log("true"); }else{ console.log("false"); }
>> false
if( " " ){ console.log("true"); }else{ console.log("false"); }
>> true

  // 変数、計算式
const value = 100;
if( value ){ console.log("true"); }else{ console.log("false"); }
>> true
if( value - value ){ console.log("true"); }else{ console.log("false"); }
>> false

  // 関数呼び出し
const func = ()=>100;
if( func() ){ console.log("true"); }else{ console.log("false"); }
>> true
if( value - func() ){ console.log("true"); }else{ console.log("false"); }
>> false

 // オブジェクト
if( {} ){ console.log("true"); }else{ console.log("false"); }
>> true
if( ()=>{} ){ console.log("true"); }else{ console.log("false"); }
>> true
if( [1,2,3] ){ console.log("true"); }else{ console.log("false"); }
>> true
if( [] ){ console.log("true"); }else{ console.log("false"); }
>> true

他のプログラム言語では、空の配列をfalse判定するものもあります。
JavaScriptは内容の有無に関係なくtrueです。

条件4:ANDとOR

二つの条件を && で連結することでAND条件を生成できます。
また || で連結することでOR条件を生成できます。

const value = 100;
if( value > 10 && value < 150 ) { console.log("true"); }else{ console.log("false"); }
>> true
if( value < 10 || value > 150 ) { console.log("true"); }else{ console.log("false"); }
>> false

const flg1 = true , flg2 = false;
if( flg1 && flg2 ) { console.log("true"); }else{ console.log("false"); }
>> false
if( flg1 || flg2 ) { console.log("true"); }else{ console.log("false"); }
>> true

論理演算子	例	意味
&&	value1 && value2	左辺が偽なら左辺を、真なら右辺の値を返す
\|\|	value1 \|\| value2	左辺が真なら左辺を、偽なら右辺の値を返す

各辺は条件3:値の表に従って、真偽値に変換されます。

この演算子は true または false ではなくて、値を返す点に注意が必要です。

  // 論理演算子は値を返す
console.log( 10 && 100 );
>> 100
console.log( 0 && 100 );
>> 0
console.log( 10 || 100 );
>> 10
console.log( 0 || 100 );
>> 100

論理演算がif文内等で条件として使用されたとき、演算結果が条件3:値の表に従って真偽値に変換されます。

JavaScriptではOR演算子よりAND演算子の方が優先度が高く設定されています。
そのため、意図しない結果を得る可能性があります。

例えば 10 || 100 && 0 なら、次のような計算の流れを期待するかもしれません。

( 10 || 100 ) && 0 ⇒ 10 && 0 ⇒ 0

実際には、次のような計算になります。

10 || ( 100 && 0 ) ⇒ 10 || 0 ⇒ 10

意図する結果を得るには、()が必要です。

console.log( ( 10 || 100 ) && 0 );
>> 0

条件5:否定

論理否定演算子 ! を使用すると、値を条件3:値の表に従って真偽値に変換した後、真偽値を反転させます。

if( ! 10 ) { console.log("true"); }else{ console.log("false"); }
>> false
if( ! 0 ) { console.log("true"); }else{ console.log("false"); }
>> true

const flg1 = true , flg2 = false;
if( !( flg1 && flg2 ) ) { console.log("true"); }else{ console.log("false"); }
>> true
if( !( flg1 || flg2) ) { console.log("true"); }else{ console.log("false"); }
>> false