JavaScriptで条件の分岐処理を記述するにはif文を使います。

if文を使うことで、「もし〇〇ならこの処理」「そうでなければこの処理」というように条件によって処理を分けることが可能です。

今回はJavaScriptでのif文の基本的な書き方と、より細かい条件をつける方法について解説していきます。

Javascriptでのif文の基本的な書き方

では、早速Javascriptでif文を書いていきましょう。

if （条件式） {
　条件式が成り立った場合、処理を実行する
}

if文では、()内の条件式が成り立つ場合に{}内の処理が実行されます。
例を使って見ていきましょう。
今回は、変数numが80より大きい場合に「numは80より大きいです。」とコンソールに表示されるようにします。

if文では、()内の条件式が成り立つ場合に{}内の処理が実行されます。
例を使って見ていきましょう。
今回は、変数numが80より大きい場合に「numは80より大きいです。」とコンソールに表示されるようにします。

var num = 90;
if （num > 80） {
　console.log("numは80より大きいです。");
}

コードを解説していきます。

「var num = 90;」で変数numに90を代入します。
「num > 80」が条件式となっており、numには90が入っているので条件式が成り立ち{}内の「console.log("numは80より大きいです。")」の処理が実行されます。
「var num = 70;」など、今回の条件式である「num > 80」が成り立たない数値に変更すると、{}内の処理は実行されません。
条件が成り立つ場合を「true(真)」、成り立たない場合を「false(偽)」といいます。

（1）else：今までの条件に当てはまらない場合に使用

次のようにif文に付け加えることで、条件式が成り立たない場合の処理も書くことができます。

if （条件式） {
  条件式が成り立った場合処理を実行
} else {
  条件式が成り立たなければ処理を実行
}

では、numが80以下だった場合に「numは80以下です。」と表示されるようにコードに追加してみます。

var num = 70;
if （num > 80） {
  console.log（"numは80より大きいです。"）;
} else {
  console.log（"numは80以下です。"）;
}

このコードでは、「num = 70;」となっているため、条件式が「false」となりelseの処理が実行されます。

（2）else if：複数条件の分岐に使用

Aの場合、Bの場合、それ以外の場合、というように条件を複数設定するときに使えるのがelse ifです。

if （条件式1） {
  条件式1が成り立った場合処理を実行
} else if（条件式2） {
  条件式2が成り立った場合処理を実行
}

先ほどまでのコードに、numが60～80の間だった場合の処理を追加してみます。

var num = 70;
if （num > 80） {
  console.log("numは80より大きいです。");
} else if （num >= 60） {
  console.log（"numは60～80の間です。"）;	
} else {
  console.log（"numは60未満です。"）;
}

最初の条件(num > 80)がfalseだった場合、2番目の条件(num >= 60)の判定をします。>=は不等号の≧と同じでnum >= 60は60以上という意味です。
どちらの条件にも当てはまらなかった場合elseの処理が実行されます。
else ifは何個でもつなげて書くことができるため、もっと細かく条件を指定することも可能です。

if文の注意点

if文の基本がわかったところで、if文を書く際の注意点をお伝えします。

（1）実行順序に気をつけよう

else ifを使って複数条件を書く際には、条件式の順序に気を付けなければなりません。順序を間違えると思った通りの動きをしないことがあります。

var num = 70;
if （num > 80） {
  console.log("numは80より大きいです。");
} else if （num >= 50） {
    console.log("numは50～59の間です。");	
} else if （num >= 60） {
    console.log("numは60～80の間です。");	
} else {
    console.log（"numは60未満です。"）;
}

上記コードでは、numは70なので「numは60～80の間です。」と表示されるのが正しいのですが、実際には「numは50～59の間です。」と表示されてしまいます。
これは、if文は上から実行され条件が一致した時点で処理が実行されるというルールがあるからです。

最初の条件式 (num > 80)はfalseとなり処理がされませんが、2番目の条件式(num >= 50)でtrueとなってしまい、処理が実行されます。if文では条件式がtrueとなった時点でそれ以降の条件の処理はおこなわれません。
そのため、条件式の順番は上から処理されたときにおかしくならないように考えて書く必要があります。

（2）falseになる条件5つ

次に気を付けたいのが、比較演算子を使わない場合の条件式の判定です。
if文の条件式に使えるのは不等号などの比較演算子だけではありません。

var hoge = 1;
if （hoge） {
  console.log（"true!"）;
} else {
  console.log（"false!"）;
}

このコードでは、変数hogeに1を代入してそれを条件式としており、結果はtrueとなります。
if文の条件式には数値や文字列を使うこともできるのです。
数値は1以上であればtrue、文字列は1文字以上であればtrueとなります。
注意して欲しいのが、このように比較演算子を使わない場合の条件式の判定では、データがない値がfalseとなるということです。
falseとなるのは以下の変数a~eの5パターンです。

var a = 0;    // 数値の0
var b = 0/0;  // 数値として扱うことができない(NaN)
var c = “”;   // 空の文字列
var d = null; // 値が存在しない(null)
var e;        // 値が定義されていない(undefined)

条件式を作る際はこれらのパターンを考慮して書きましょう。

if文の応用的な書き方

if文の書き方はここまで解説してきた以外にもまだあります。

if文を入れ子(ネスト)で使う

if文の中にさらにif文を書くことで、入れ子にして条件分岐させることも可能です。

var num = 70;
if （num >= 60） {
    if （num > 80） {
        console.log（"numは80より大きいです。"）
    } else {
        console.log（"numは60～80の間です。"）
    }
} else {
    console.log（"numは60未満です。"）
}

先ほどelse ifで書いていたコードはこのような書き方に書き換え可能です。

論理演算子を使う

条件式に論理演算子をつかうことで、「AかつB」、「AまたはB」、「Aではない」などの判定ができます。

（1）and（&&）

and（&&）は複数の条件式が全てtrueの場合に結果がtrueになります。

if （条件式1 && 条件式2） {
  条件式1と2が両方ともtrueの場合実行される
}

（2）or（||）

or（||）は複数の条件式で1つ以上trueである場合に結果がtrueとなります。

if （条件式1 || 条件式2） {
  条件式1か2にtrueが存在する場合実行される
}

（3）not（!）

not（!）は条件式の結果を逆にします。条件式がtrueの場合falseを、falseの場合trueを返します。
例えば、条件式を「if(!(num <= 80))」とするとnumが81以上の場合にtrueとなります。

if （!条件式） {
  条件式がfalseの場合、trueになり実行される
}

if文を省略して書く

if文はプログラミング中に頻出の文法のため、省略して書く方法がいくつかあります。

（1）処理が1行しかない場合の省略形

以下のコードのように{}内の処理が1行しかない場合は{}を省略することができます。

if （num > 80） {
  console.log（"numは80より大きいです。"）;
}

上記コードは以下のように省略できます。

if （num > 80） console.log ("numは80より大きいです。"）;

（2）条件（三項）演算子を使った省略形

条件（三項）演算子を使ってif文を書き換えることができます。

条件式 ? trueの処理 : falseの処理
例えば、else ifで書いていたコードは以下のように書き換えられます。

var num = 70;
num > 80 ? console.log（"numは80より大きいです。"）:  
console.log（"numは80以下です。"）;

他にも、条件（三項）演算子はネストさせて書くことも可能で、else ifで書いていたコードよりも、行数を削減することができます。

function getNum（age） {
  return num < 60 ? "60未満です" : num < 70 ? "70未満です" : num < 80 ? "80未満です" : "80以上です";
}
console.log（"numは" + getNum(75));  //numは80未満です

まとめ

if文はプログラミングにおいて頻出の文法であるため、必ず覚える必要があります。条件分岐の組み合わせや様々な演算子を使いこなしてif文をマスターしましょう。

---

TECH PLAYでは、エンジニアの方向けに勉強会・イベント情報を提供しています。
ご興味のある方はぜひご参加ください。

• 「JavaScript」に関する勉強会・イベントを探す
• 「プログラミング」に関する勉強会・イベントを探す
• 「初心者」に関する勉強会・イベントを探す