JavaScript if文 条件分岐を行うサンプル

nas2017/03/24

目次

01. if文のサンプル

・if文のみ (trueのとき処理する)

・ifとelse (trueとfalseそれぞれ処理する)

・ifとelse ifとelse (複数の条件で処理を分ける)

・if文の中にif文

02. 比較演算子

・比較演算子

03. 論理演算子

・論理積(&&) AかつB

・論理和(||) AまたはB

・論理否定(!) Aではない

・排他的論理和(^)

04. 値を比較

・undefined

・null

・空文字

・三項演算子

if文のみ (trueのとき処理する)

条件がtrueの時のみ処理します。falseでは処理しません。

if (条件){
 　　処理
}

コード

<script>
    const a = 3;

    if (a === 3) {
        console.log("ok1"); // ok1が出力される
    }
    if (a !== 1) {
        console.log("ok2"); // ok2が出力される
    }
    if (a > 2) {
        console.log("ok3"); // ok3が出力される
    }
    if (a >= 3) {
        console.log("ok4"); // ok4が出力される
    }
    if (a < 5) {
        console.log("ok5"); // ok5が出力される
    }
    if (a <= 3) {
        console.log("ok6"); // ok6が出力される
    }
</script>

point

・条件が合致することをtrue(真)といいます。
・条件が合致しないことをfalse(偽)といいます。
・条件が合致する場合、配下のブロック{ }の処理が実行され、if文の処理は終了します。
・条件が合致しない場合、配下のブロック{ }の処理は実行されず、if文の処理は終了します。
・条件の判定で使用している===等は比較演算子です。

 

ifとelse (trueとfalseそれぞれ処理する)

条件がtrueの時は、trueの処理をします。falseの時は、falseの処理をします。

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

コード

<script>
    const a = 2;

    if (a === 1) {
        console.log("test1");
    } else {
        console.log("test2"); // test2が出力される
    }
</script>

4行目は、aの値は2なのでfalseとなり7行目が実行されます。

 

ifとelse ifとelse (複数の条件で処理を分ける)

複数の条件で処理を分けたい場合に使用します。elseは条件にあてはまらない場合に処理されます。

if (条件1){
 　　処理1
} else if (条件2) {
 　　処理2
} else {
　　処理3
}

コード

<script>
    const a = 2;

    if (a === 1) {
        console.log("test1");
    } else if (a === 2) {
        console.log("test2"); // test2が出力される
    } else {
        console.log("test3");
    }
</script>

4行目は、aの値は2なのでfalseとなり次の分岐の6行目へ進みます。
6行目は、aの値は2なのでtrueとなり、7行目が実行されます。
if文は終了となり11行目に進みます。

point

・else ifは、１つ以上記述できます。
・elseは、１つのみ記述できます、または省略可能です。
・else ifが多くなるときはswitch文の使用を検討します。
JavaScript switch文のサンプル

 

if文の中にif文

if文の中にif文の記述は可能です。

if (条件1){
  if (条件2){
 　　処理
  }
}

コード

<script>
    const a = 1;
    const b = 1;

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

5行目は、aの値は1なのでtrueとなり6行目が実行されます。
6行目は、bの値は1なのでtrueとなり7行目が実行されます。

point

・ネストの構造、入れ子ともいいます。

 

比較演算子

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

JavaScript if文の == と === の違い

 

論理積(&&)  AかつB

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

左の式と右の式が両方ともtrueの場合、trueになります。それ以外はfalseです。

<script>
  const a = 2;
  const b = 2;

  if (a === 2 && b === 2) {
    console.log("true"); // true 表示される
  }
</script>

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

point

左の式がfalseの場合、右の式は判定(評価)されません。これを短絡評価(ショートサーキット評価 : Short-Circuit Evaluation)といいます。

 

論理和(||)  AまたはB

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

左の式または右の式のどちらかがtrueの場合、trueになります。

<script>
  const a = 1;
  const b = 2;

  if (a === 2 || b === 2) {
    console.log("true"); // true 表示される
  }
</script>

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

point

左の式がtrueの場合、右の式は判定(評価)されません。これを短絡評価(ショートサーキット評価 : Short-Circuit Evaluation)といいます。

 

論理否定(!)  Aではない

if  !(条件式) 
  • 式がfalseの場合にtrueになります。
  • 式がtrueの場合にfalseになります。
<script>
    const a = 1;

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

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

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

 

排他的論理和(^)

if (左の条件式) ^ (右の条件式)
  • 左の式がtrueで右の式がfalseの場合、trueになります。
  • 左の式がfalseで右の式がtrueの場合、trueになります。
  • 左の式と右の式が両方ともtrueの場合、falseになります。
  • 左の式と右の式が両方ともfalseの場合、falseになります。
<script>
    const a = 2;
    const b = 2;

    if ((a === 2) ^ (b === 3)) {
        console.log("true"); // trueが表示される
    } else {
        console.log("false");
    }

    if ((a === 3) ^ (b === 2)) {
        console.log("true"); // trueが表示される
    } else {
        console.log("false");
    }

    if ((a === 2) ^ (b === 2)) {
        console.log("true");
    } else {
        console.log("false"); // falseが表示される
    }

    if ((a === 3) ^ (b === 3)) {
        console.log("true");
    } else {
        console.log("false"); // falseが表示される
    }
</script>

5行目は、左の式がtrueで右の式がfalseなので、trueになります。
11行目は、左の式がfalseで右の式がtrueなので、trueになります。
17行目は、左の式と右の式が両方ともtrueなので、falseになります。
23行目は、左の式と右の式が両方ともfalseなので、falseになります。

 

値が代入されているか(undefined)

if (typeof 変数 === "undefined") 
  • undefinedは変数に値が代入されていない状態を表します。
  • undefinedを比較するときは、typeof演算子を使用します。
<script>
    let a; //constの場合、値の代入がないとエラー

    if (typeof a === "undefined") {
        console.log("true"); // true 出力される
    }

    if (a) {
        console.log("true");
    } else {
        console.log("false"); // false 出力される
    }

    const b = 3;

    if (b) {
        console.log("true"); // true 出力される
    }
</script>

4行目は、typeof演算子でundefinedか比較しています。
8,16行目のように、変数のみでの判定もできます。

 

nullを比較

if (変数 === null) 

nullは中身が空の状態を表します。nullと空文字("")は別です。

<script>
  const a = null;
  
  if (a === null) {
    console.log("true"); // true 出力される
  }
  
  if (a) {
    console.log("true");
  } else {
    console.log("false"); // false 出力される
  }

  if (a === "") {
    console.log("true");
  } else {
    console.log("false"); // false 出力される
  }
</script>

 

空文字を比較

nullと空文字("")は別です。

<script>
  const c = "";
  
  if (c === "") {
    console.log("true"); // true 出力される
  }

  if (c) {
    console.log("true");
  } else {
    console.log("false"); // false 出力される
  }

  if (c === null) {
    console.log("true");
  } else {
    console.log("false"); // false 出力される
  }
</script>

 

三項演算子

変数 = 条件式  ?  値1 : 値2
  • 条件式がtrueのとき、値1を返します。
  • 条件式がfalseのとき、値2を返します。
<script>
    const a = 1;

    // 三項演算子
    const b = a === 0 ? "true" : "false";
    console.log(b); // falseが表示される

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

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

関連の記事

JavaScript if文の == と === の違い
JavaScript if文で配列を比較するサンプル

△上に戻る