JavaScript

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

JavaScript

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

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

・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("合格です。");
}
// 実行結果
合格です。

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

  

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

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

var score = 72;

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

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

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

サンプルコードのスコアは72点としているので、実行結果は「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("次回さらに頑張りましょう。");
}
// 実行結果
合格です。

こちらの実行結果からスコアは100点だけど初めの70点以上の場合の判定で真(true)となっていて、

else if文で書かれた100点の場合の処理が実行されない設計となってしまいます。

現場でもたまに絶対に到達しない条件式が書かれていることがあるので、

一旦、条件を整理してからif文の作成を行いましょう

そうすることでミスの少ないコーディングが行えます。

スポンサーリンク
在宅最高思想のエンジニア