format_list_bulleted
【JavaScript】演算子を用いたif文の書き方・三項演算子の書き方について解説
最終更新日時:2020-05-03 12:52:40



JavaScriptの演算子は、代入演算子、算術演算子、比較演算子、論理演算子など、たくさんありますが、今回はif文に関する演算子(比較演算子、論理演算子、三項演算子)について紹介します。

はじめに(if文のおさらい)

まずは、if文についておさらいしましょう。if文は与えられた条件をもとに評価し、結果が真(true)であれば、if文内の処理を実行します。また、偽(false)であれば、何も起きないまたはelse文内の処理を実行します。次にif文についてのコードを示してあります。

if (条件) {
  //条件が真(true)であれば実行
  } else {
  //条件が偽(false)であれば実行
}

比較演算子

比較演算子について

比較演算子とは、if文などの条件式に用いる演算子で、2つの値を比較するときに使います。

比較演算子については次の表にまとめました。

比較演算子演算子の意味
>右辺より左辺の方が大きい場合、真(true)
>=右辺より左辺の方が同じか大きい場合、真(true)
<左辺より右辺の方が大きい場合、真(true)
<=左辺より右辺の方が同じか大きい場合、真(true)
==左辺と右辺の値が等しい場合、真(true)
===左辺と右辺の値が等しくかつ同じ型の場合、真(true)
!=左辺と右辺の値が等しくない場合、真(true)
!==左辺と右辺の値が等しくないまたは型が違う場合、真(true)

ここで「==」の演算子については等価演算子と呼ばれ、値が等しいか判断する演算子です。また、「===」の演算子については厳密等価演算子と呼ばれ、値が等しいか判断することに加え変数の型(intやstring)も一致しているかを判断する演算子です。次にそれぞれの演算子を用いた際の例と出力結果をコメントして示しています。

console.log(8 == 8.00) //true
console.log(8 == '8') //true
console.log("8" == "8.0") //false(数字は等しいが、文字列で比較しているので等しくない)
console.log('8' == '8') //true
console.log(8 === 8.00) //true
console.log(8 === '8') //false
console.log("8" === "8.0") //false
console.log('8' === '8') //true

使用例

比較演算子(==)を用いたif文の使用例を次に紹介します。

if(10 == 5){//false
  console.log("等しい")//falseなので実行しない
}else{
  console.log("等しくない")//falseなので「等しくない」と表示される
}

論理演算子

論理演算子とはtrue/falseのような真偽値を複数取り扱うことができ、かつ複数の真偽値を判定するための演算子です。これによって、3つ以上の値を比較することができます。論理演算子にはAND(&&)演算子、OR(||)演算子、NOT(!)演算子があります。ではそれぞれの演算子について解説を行っていきます。

AND(&&)演算子

AND(&&)演算子は論理積とも呼ばれ、すべての真偽値が真(true)の場合に真(true)を返します。また、それ以外は1つでも偽(false)があると、偽(false)になってしまいます。

次にAND(&&)演算子の例を示します。

true && true //true
true && false //false
true || false //true 

OR(||)演算子

OR(||)演算子は論理和とも呼ばれ、いずれかの真偽値が真(true)の場合に真(true)を返します。また、すべての真偽値が偽(false)の場合出ないと偽(false)を返しません。

次にOR(||)演算子の例を示します。

true || false //true
true || true //true
false || false //false

NOT(!)演算子

NOT(!)演算子は真偽値否定演算子とも呼ばれ、もとの真偽値と逆の真偽値を返します(trueだったらfalseに,falseだったらtrueに)。次にNOT(!)演算子の例を示します。

!false //true
!true //false

使用例

では論理演算子の使用例をif文を使って簡単に示します。こちらの条件式はtrueなので、”true”が出力されます。

if ((7 == 7) || (7 > 1)) { 
      //trueなので実行
     console.log("true")
  } else {
     //trueなので実行されない
     console.log("false")
}

さらに複雑な条件を設ける場合の例を示します。

if ((!(7 > 3) || 3 == 7) && (!4==4 || 8 == 4)) {
    //trueなので実行
    console.log("true")
   } else {
    //trueなので実行されない
    console.log("false")
}

三項演算子

三項演算子とは

三項演算子は条件演算子とも呼ばれ、3つの被演算子を用いることでif文を簡潔に記述することができる演算子です。次に三項演算子のコードを示します。条件が真(true)だったとき処理1を実行し、偽(false)だったとき処理2を実行します。

条件 ? 処理1(条件式が真(true)の時実行) : 処理2(条件式が偽(false)の時実行)

使用例

if文を用いて記述する場合は次のような5行の文を記述する必要がありますが、三項演算子を用いることで、1行だけで記述することができます。

if(10 > 5){
    console.log("10は5より大きい")
  }else{
    console.log("10は5より小さい")
}

三項演算子を用いて記述する場合

(10 > 5)? console.log("10は5より大きい") : console.log("10は5より小さい")

この記事のまとめ

本記事ではJavaScriptのif文に関する演算子について紹介しました。

最後に要点をまとめてみましょう。

  • 比較演算子を用いることで、2つの値を比較することができる
  • 論理演算子を用いることで複数の真偽値を取り扱うことができる
  • 三項演算子を用いることで、if文を簡潔に記述することができる

三項演算子を使ってJavaScriptをさらに便利に使用しましょう!