【6日でできるJavaScript入門】条件分岐②

　プログラムの分岐をさらに発展させ、3つ以上のケースを扱う else if や、複数条件の組み合わせを実現する論理演算子、さらにはswitch文による分岐を学びます。多彩な条件分岐をマスターし、ユーザーの入力や状況に応じた柔軟な制御を行えるようになりましょう。

１．else ifで3つ以上に分岐

if～elseは真偽で2択の分岐ですが、else if を追加すると複数の条件を順に判定できます。

構文説明
if (条件A) {…}条件Aが真のとき実行
else if (条件B) {…}条件Aが偽 かつ 条件Bが真のとき実行
else if (条件C) {…}条件A・Bが偽 かつ 条件Cが真のとき実行
else {…}上記すべて偽のとき実行

1.1. サンプルHTML：成績評価システム

ファイル名： lesson15-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>📊 成績評価</title>
  <style>
    #grade {
      margin-top: 20px;
      font-size: 1.2em;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>📊 あなたの点数は？</h1>
  <button onclick="gradeScore(95)">95点</button>
  <button onclick="gradeScore(75)">75点</button>
  <button onclick="gradeScore(55)">55点</button>
  <button onclick="gradeScore(35)">35点</button>
  <div id="grade"></div>

  <script>
    function gradeScore(score) {
      let result;
      if (score >= 90) {
        result = '評価：優';
      } else if (score >= 70) {
        result = '評価：良';
      } else if (score >= 50) {
        result = '評価：可';
      } else {
        result = '評価：不可';
      }
      document.getElementById('grade').textContent = result;
    }
  </script>
</body>
</html>

ブラウザの出力例

コード解説

  • if (score >= 90)： 90点以上→「優」
  • else if (score >= 70)： 70〜89点→「良」
  • else if (score >= 50)： 50〜69点→「可」
  • else: それ以外→「不可」

1.2. エラーが起きる記述例

function gradeScore(score) {
  if (score >= 90) {
    let result = '優';
  } else if (score < 90 && score >= 70) {
    let result = '良';
  }
  alert(result); // Uncaught ReferenceError: result is not defined
}
  • let 宣言はブロック内のみ有効 → alert の外では result が参照できずエラー

２．変数宣言とスコープ

条件分岐で共通して使う変数は、関数の先頭で宣言するとよいでしょう。

宣言方法有効範囲
let宣言したブロック内のみ
var関数全体（関数内どこでも有効）現代のJavaScriptではlet や const を使用することが推奨されています。
constlet 同様だが再代入不可

３．論理演算子で複数条件を結合

演算子意味例
&&2つの条件式を両方とも満たす場合に真x >= 50 && x <= 80 （50以上80以下）
||2つの条件式のいずれかを満たす場合に真x <= 50 && x >= 80 （50以下または80以上）
!真偽を反転!(x > 10) （xが10以下）

3.1. サンプル：営業時間チェック

<button onclick="checkTime(14)">14時</button>
<script>
  function checkTime(hour) {
    if (hour >= 9 && hour <= 18) {
      alert('営業中です');
    } else {
      alert('営業時間外です');
    }
  }
</script>

４．switch文で分岐

switch は 等しい値 を判定する場合に便利です。

switch (variable) {
  case 値A:
    // Aの処理
    break;
  case 値B:
    // Bの処理
    break;
  default:
    // それ以外の処理
}

4.1. サンプルHTML：曜日メッセージ

<button onclick="showDay('水')">水曜日</button>
<script>
  function showDay(day) {
    switch (day) {
      case '月':
        alert('週の始まりです');
        break;
      case '金':
        alert('もうすぐ週末です');
        break;
      default:
        alert('普通の平日です');
    }
  }
</script>

4.2. switch文の弱点

  • case は 厳密な等価比較 のみ可能
  • 範囲判定（>、<）や複雑条件は### if の方が適する

4.3. caseに文字を使う

switch (color) {
  case '赤':
    // '赤'と等しい場合
    break;
}
  • 文字列はシングルまたはダブルクォートで囲む

５．switch文を使った応用サンプル

　switch文の使いどころをさらに把握するため、以下では「選択した果物に応じて価格を表示する」簡易アプリを例示します。

5.1. サンプルHTML：果物価格表示

ファイル名： lesson15-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🍎 果物価格チェッカー</title>
  <style>
    body { font-family: sans-serif; }
    select, button { margin: 5px; padding: 5px; }
    #price { margin-top: 10px; font-size: 1.2em; font-weight: bold; }
  </style>
</head>
<body>
  <h1>🍎 果物価格チェッカー</h1>
  <p>果物を選択してください：</p>
  <select id="fruit">
    <option value="apple">リンゴ</option>
    <option value="banana">バナナ</option>
    <option value="orange">オレンジ</option>
    <option value="grape">ぶどう</option>
  </select>
  <button onclick="showPrice()">価格を見る</button>
  <div id="price"></div>

  <script>
    function showPrice() {
      const sel = document.getElementById('fruit').value;
      let text;
      switch (sel) {
        case 'apple':
          text = 'リンゴの価格は 150円／個 です。';
          break;
        case 'banana':
          text = 'バナナの価格は 120円／本 です。';
          break;
        case 'orange':
          text = 'オレンジの価格は 180円／個 です。';
          break;
        case 'grape':
          text = 'ぶどうの価格は 200円／房 です。';
          break;
        default:
          text = '価格情報がありません。';
      }
      document.getElementById('price').textContent = text;
    }
  </script>
</body>
</html>

ブラウザの出力例

コード解説

  • <select> 要素の value を取得し、変数 sel に代入します。
  • switch(sel) で選択された文字列に応じた case 分岐を行います。
  • 各 case の最後には必ず break; を記述し、処理が次の case に落ちないようにします。
  • default: で予期しない値にも対応可能です。

まとめ

  • else if で複数ケースに対応
  • 変数スコープに注意し、必要に応じて let vs var を使い分け
  • &&, ||, ! で複雑な論理条件を記述
  • switch は同値判定に特化、複雑な条件には向かない

　以上で条件分岐の発展パターンを習得しました。次回は非同期処理と組み合わせた条件分岐を試してみましょう。