【JavaScript】if文を使った条件分岐

特定の条件で処理を分けたい場合に条件分岐を行う方法の一つにif文が存在します。

JavaScriptの条件で処理を分岐させる書き方を以下を中心に解説します。

・if文の書き方

・if文で複数の条件を分岐させる方法

if文とは

if文とは

初めに、if文とは条件式を記述して実行時に条件式の結果が真（true）であれば直下の処理を行い、

偽（false）であれば次の条件式の判定を行います。

先頭は「if (条件式) {処理}」先頭以降の条件式には「else if (条件式) {処理}」を記載し複数条件を作成します。（「else if」は複数記載することができます。）

また「if」、「else if」が全て偽（false）の場合に「else {処理}」を記載し条件を分岐させることができます。

if文の書き方

if文では条件式の結果に応じて処理を分岐させます。書き方は次のとおりです。

if (条件式) {
    // 条件式がtrueの場合に実行する処理を記載する
}

ifの条件がtrueの場合、直下の処理を行います。

if文のサンプルコード

試しに70点以上を合格とするプログラムを作成してみます。

var score = 72;

if (score >= 70) {
    console.log("合格です。");
}

// 実行結果
合格です。

上記サンプルではスコアが７０点以上なので処理を行っていることが確認できます。

if文で複数条件を指定したサンプルコード

複数条件を指定する場合には、先頭のif文に対して「else if」で次の条件式を付けることができます。

var score = 72;

if (score == 100) {
    console.log("満点です。おめでとう。");

} else if (score >= 70) {
    console.log("合格です。");
}

// 実行結果
合格です。

今回のコードでは初めのif文の条件式がスコアが100点でそうでなければスコアが７０点以上なのか判定を行っています。

サンプルコードのスコアは７２点としているので、実行結果は「else if文」の「合格です。」が出力されました。

elseで条件式以外の場合の処理を記載する

記載したif文、else if文の条件式に該当しなかった場合に「else」で条件式以外の場合の処理を実装することができます。

var score = 67;

if (score == 100) {
    console.log("満点です。おめでとう。");

} else if (score >= 70) {
    console.log("合格です。");

} else {
    console.log("次回さらに頑張りましょう。");
}

// 実行結果
次回さらに頑張りましょう。

今回の条件式は100点の場合、70点以上の場合、それ以外。という3つの条件で記載されています。

スコアが67点なので今回は「else」の処理が実行されています。

if文の注意点

if文は条件を上から順番に判定を行います。

「if」の条件にも該当し「else if」の条件にも該当する場合、

一番はじめに真（true）となった処理を実施することを覚えておきましょう。

var score = 100;

if (score >= 70) {
    console.log("合格です。";)
} else if (score == 100) {
    console.log("満点です。おめでとう。");
} else {
    console.log("次回さらに頑張りましょう。");
}