【JAVASCRIPT】JavaScriptの条件分岐について

タグ :

JavaScriptの条件分岐は、特定の条件に基づいてコードの実行を制御するために使用されます。

1 if 文
2 if…else 文
3 if…else if…else 文
4 switch 文
5 三項演算子（条件演算子）
6 if…else if…else 文の例
7 Switch 文の例1
8 Switch 文の例2
9 三項演算子の例1
10 三項演算子の例2
11 Switch文とif…else if…else文の比較
12 三項演算子とif…else if…else文の比較
13 if…else if…else文の実用例

if 文

if文は、条件が真（true）である場合にのみコードを実行します。



if (condition) {
  // 条件が真の場合に実行されるコード
}

if…else 文

if…else文は、条件が真でない場合に別のコードを実行することを可能にします。



if (condition) {
  // 条件が真の場合に実行されるコード
} else {
  // 条件が偽の場合に実行されるコード
}

if…else if…else 文

複数の条件を評価し、それぞれに対して異なるコードを実行することができます。



if (condition1) {
  // condition1 が真の場合に実行されるコード
} else if (condition2) {
  // condition1 が偽で、condition2 が真の場合に実行されるコード
} else {
  // condition1 と condition2 が両方とも偽の場合に実行されるコード
}

switch 文

switch文は、変数の値に基づいて複数の条件分岐を行います。



switch (expression) {
  case value1:
    // expression が value1 と等しい場合に実行されるコード
    break;
  case value2:
    // expression が value2 と等しい場合に実行されるコード
    break;
  // 他のケース
  default:
    // すべての case がマッチしない場合に実行されるコード
}

三項演算子（条件演算子）

三項演算子は、条件が真か偽かに基づいて異なる値を返します。短い条件分岐に便利です。



let result = condition ? value1 : value2;

if…else if…else 文の例

以下のコードでは、scoreの値に基づいて評価が「A」「B」「C」「D」のいずれかになります。



let score = 85;

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else {
  console.log("D");
}

Switch 文の例1

以下は、曜日に基づいて異なるメッセージを表示するswitch文の例です。



let day = new Date().getDay();
let dayName;

switch (day) {
  case 0:
    dayName = "日曜日";
    break;
  case 1:
    dayName = "月曜日";
    break;
  case 2:
    dayName = "火曜日";
    break;
  case 3:
    dayName = "水曜日";
    break;
  case 4:
    dayName = "木曜日";
    break;
  case 5:
    dayName = "金曜日";
    break;
  case 6:
    dayName = "土曜日";
    break;
  default:
    dayName = "不明な曜日";
}

console.log("今日は " + dayName + " です。");

Switch 文の例2

以下は、数値の値に応じて異なるメッセージを表示する簡単なswitch文の例です。



let score = 85;
let grade;

switch (true) {
  case (score >= 90):
    grade = "A";
    break;
  case (score >= 80):
    grade = "B";
    break;
  case (score >= 70):
    grade = "C";
    break;
  case (score >= 60):
    grade = "D";
    break;
  default:
    grade = "F";
}

console.log("あなたの成績は " + grade + " です。");

三項演算子の例1

以下は、数値が偶数か奇数かを判定し、それに基づいてメッセージを設定する三項演算子の例です。



let number = 7;
let message = (number % 2 === 0) ? "偶数です。" : "奇数です。";

console.log(message);

この例では、numberが偶数の場合は「偶数です。」というメッセージが表示され、奇数の場合は「奇数です。」というメッセージが表示されます。

三項演算子の例2

以下は、数値が正の数か負の数か、またはゼロであるかを判定する三項演算子の例です。



let number = -5;
let message = (number > 0) ? "正の数です。" : (number < 0) ? "負の数です。" : "ゼロです。";

console.log(message);

この例では、numberが正の数の場合は「正の数です。」、負の数の場合は「負の数です。」、ゼロの場合は「ゼロです。」というメッセージが表示されます。

Switch文とif…else if…else文の比較

Switch文の例で、if…else if…else文の各ケースがどの条件に対応しているかを説明します。

Switch文



let score = 85;
let grade;

switch (true) {
  case (score >= 90):
    grade = "A";
    break; // if (score >= 90)
  case (score >= 80):
    grade = "B";
    break; // else if (score >= 80)
  case (score >= 70):
    grade = "C";
    break; // else if (score >= 70)
  case (score >= 60):
    grade = "D";
    break; // else if (score >= 60)
  default:
    grade = "F"; // else
}

console.log("あなたの成績は " + grade + " です。");

if…else if…else文



let score = 85;
let grade;

if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else if (score >= 60) {
  grade = "D";
} else {
  grade = "F";
}

console.log("あなたの成績は " + grade + " です。");

三項演算子とif…else if…else文の比較

三項演算子の例で、if、else if、elseがどの部分に対応しているかを説明します。

三項演算子



let number = -5;
let message = (number > 0) ? "正の数です。" : (number < 0) ? "負の数です。" : "ゼロです。";

console.log(message);

if…else if…else文



let number = -5;
let message;

if (number > 0) {
  message = "正の数です。";
} else if (number < 0) {
  message = "負の数です。";
} else {
  message = "ゼロです。";
}

console.log(message);

if (number > 0) は (number > 0) ? “正の数です。” : … に対応しています。
else if (number < 0) は :(number < 0) ? “負の数です。” : … に対応しています。
else は : “ゼロです。” に対応しています。

if…else if…else文の実用例

以下のコードは、スコアを入力するフォームを追加して、入力されたスコアに応じてメッセージを表示する例です。



<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>スコア判定フォーム</title>
</head>
<body>
    <!-- スコアを入力するフォーム -->
    <label for="scoreInput">スコアを入力してください:</label>
    <input type="number" id="scoreInput" placeholder="例: 85">
    <button onclick="evaluateScore()">判定</button>

    <!-- 結果を表示する要素 -->
    <div id="result"></div>

    <script>
        function evaluateScore() {
            // 入力されたスコアを取得
            let score = document.getElementById('scoreInput').value;
            let resultMessage;

            // スコアに基づいてメッセージを決定
            if (score >= 90) {
                resultMessage = "素晴らしい！";
            } else if (score >= 70) {
                resultMessage = "良い感じです！";
            } else {
                resultMessage = "もっと頑張りましょう！";
            }

            // 結果を表示
            document.getElementById('result').innerText = resultMessage;
        }
    </script>
</body>
</html>

コードの解説

入力フォームの作成

inputタグを使用してスコアを入力するためのフォームを作成します。type=”number”により、数値のみを入力できるようにしています。
buttonタグのonclick属性にJavaScript関数evaluateScore()を指定して、ボタンがクリックされたときにスコアの判定を行います。

JavaScriptのロジック

evaluateScore()関数が実行されると、document.getElementById(‘scoreInput’).valueで入力されたスコアの値を取得します。
そのスコアに基づいて条件分岐を行い、メッセージを決定します。
最後に、決定したメッセージをresultというIDを持つdivタグ内に表示します。

実行結果

ブラウザ上でフォームにスコアを入力し、「判定」ボタンをクリックすると、入力されたスコアに基づいて対応するメッセージが下のdivタグ内に表示されます。

前ページに戻る