EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語
404 Not Found

404 Not Found

nginx

JavaScriptの条件分岐

条件分岐はプログラムに判断力を与えます。異なる状況に応じて異なるパスを取れるようにするのです。条件分岐がなければ、コードは上から下に分岐なしで実行されますが、あれば人間のように考えて選択できます。

if文

最も基本的な条件分岐です。条件がtrueなら、波括弧内のコードを実行します。

HTML 
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>if文</title></head>
<body>
<div id="output"></div>
<script>
let age = 20;
if (age >= 18) {
  document.getElementById('output').textContent = 'あなたは成人です';
}
</script>
</body>
</html>

中身が1文だけの場合は波括弧を省略できますが、強く非推奨です。波括弧によってコードが明確になり、後から文文を追加した際のバグを防げます。

if...else文

二者択一です。条件がtrueならifブロックを実行し、そうでなければelseブロックを実行します。

HTML 
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>if...else</title></head>
<body>
<div id="output"></div>
<script>
let score = 45;
if (score >= 60) {
  document.getElementById('output').textContent = '合格！';
} else {
  document.getElementById('output').textContent = '不合格、頑張りましょう';
}
</script>
</body>
</html>

if...else if...else

複数の条件を上から順に評価し、最初に一致したものが実行され、残りはスキップされます：

HTML 
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>if...else if</title></head>
<body>
<div id="output"></div>
<script>
let score = 85;
if (score >= 90) {
  document.getElementById('output').textContent = '優秀';
} else if (score >= 80) {
  document.getElementById('output').textContent = '良好';
} else if (score >= 60) {
  document.getElementById('output').textContent = '合格';
} else {
  document.getElementById('output').textContent = '不合格';
}
</script>
</body>
</html>

実例：成績計算機

HTML 
<!DOCTYPE html>
<html>
<body>
  <h2>成績計算機</h2>
  <input type="number" id="score" placeholder="点数を入力 (0-100)">
  <button onclick="checkGrade()">成績を確認</button>
  <p id="result"></p>
  <script>
    function checkGrade() {
      let score = Number(document.getElementById('score').value);
      let grade = '';
      let color = '';

      if (score >= 90) {
        grade = '優秀 🌟';
        color = 'green';
      } else if (score >= 80) {
        grade = '良好 👍';
        color = 'blue';
      } else if (score >= 70) {
        grade = '普通 😐';
        color = 'orange';
      } else if (score >= 60) {
        grade = '合格 😅';
        color = '#cc8800';
      } else {
        grade = '不合格 😢';
        color = 'red';
      }

      document.getElementById('result').innerHTML =
        `<span style="color:${color};font-size:24px">${score}点 - ${grade}</span>`;
    }
  </script>
</body>
</html>

三項演算子

三項演算子はif...elseの省略記法で、シンプルな二者択一に最適です：

HTML 
<script>
// 構文: 条件 ? 値1 : 値2
let age = 20;
let status = age >= 18 ? '成人' : '未成年';

// 以下と等価：
let status2;
if (age >= 18) {
  status2 = '成人';
} else {
  status2 = '未成年';
}
</script>

💪 三項演算子はシンプルな値の代入に適しています。ロジックが複雑な場合はif...elseを使いましょう。簡潔さよりも可読性が大切です。

switch文

1つの変数を複数の固定値と照合する場合、switchはif...else ifよりクリーンです：

HTML 
<script>
let day = 3;
switch (day) {
  case 1: console.log('月曜日'); break;
  case 2: console.log('火曜日'); break;
  case 3: console.log('水曜日'); break;
  // ...
  default: console.log('無効な番号');
}
</script>

2つの重要なポイント：

  1. breakを絶対に省略しない — 省略すると、次のcaseに「フォールスルー」する
  2. defaultはキャッチオール — どのcaseにも一致しなかったときに実行される

実例：switchのフォールスルー落とし穴

HTML 
<!DOCTYPE html>
<html>
<body>
  <h2>switch文デモ</h2>
  <p id="output"></p>
  <script>
    let html = '<strong>break付き:</strong><br>';
    let fruit = 'りんご';
    switch (fruit) {
      case 'りんご': html += 'りんご<br>'; break;
      case 'バナナ': html += 'バナナ<br>'; break;
      default: html += '不明な果物<br>';
    }

    html += '<br><strong>breakなし（フォールスルー）:</strong><br>';
    let num = 2;
    switch (num) {
      case 1: html += '一<br>';
      case 2: html += '二<br>';
      case 3: html += '三<br>';
      default: html += 'デフォルト<br>';
    }
    // 出力: 二、三、デフォルト — 一致した場所から最後まで実行される

    html += '<br><strong>フォールスルーを意図的に使用:</strong><br>';
    let month = 2;
    let season = '';
    switch (month) {
      case 3: case 4: case 5: season = '春'; break;
      case 6: case 7: case 8: season = '夏'; break;
      case 9: case 10: case 11: season = '秋'; break;
      case 12: case 1: case 2: season = '冬'; break;
    }
    html += `${month}月は${season}です`;

    document.getElementById('output').innerHTML = html;
  </script>
</body>
</html>
⚠️ breakのし忘れはswitchで最もよくあるバグです。ただし「フォールスルー」が便利なこともあります。複数の値が同じロジックを実行すべき場合、breakを意図的に省略してまとめることができます。

falsy値

条件チェックでは、以下の値がfalseとして扱われます（falsy値と呼ばれます）：

falsy値 説明
false ブール値のfalse
0 ゼロ
"" または '' 空の文字列
null Null
undefined Undefined
NaN Not a Number

それ以外のすべての値はtruthyです。"0"（文字列のゼロ）、[]（空の配列）、{}（空のオブジェクト）は「空」に見えますが、条件ではtrueと評価されます。

実例：falsy値チェック

HTML 
<!DOCTYPE html>
<html>
<body>
  <h2>falsy値デモ</h2>
  <p id="output"></p>
  <script>
    let html = '<strong>falsy値（falseと評価される）:</strong><br>';
    let falsy = [false, 0, "", null, undefined, NaN];
    for (let val of falsy) {
      let display = val === "" ? '""' : (val === undefined ? 'undefined' : val);
      html += `${display} → ${val ? 'truthy' : 'falsy'}<br>`;
    }

    html += '<br><strong>注意が必要なtruthy値:</strong><br>';
    let tricky = ["0", [], {}, "false", -1];
    for (let val of tricky) {
      let display = Array.isArray(val) ? '[]' : (typeof val === 'object' ? '{}' : JSON.stringify(val));
      html += `${display} → ${val ? 'truthy' : 'falsy'}<br>`;
    }

    html += '<br><strong>実践例:</strong><br>';
    let name = '';
    html += `名前: "${name}" → ${name || '未入力'}<br>`;
    let count = 0;
    html += `カウント: ${count} → ${count || 'なし'} (0はfalsyとして扱われる！)<br>`;
    html += `正しい方法: ${count !== undefined && count !== null ? count : 'なし'}`;

    document.getElementById('output').innerHTML = html;
  </script>
</body>
</html>
⚠️ ||でデフォルト値を使う場合、0や""が有効な値でもfalsyとして扱われることに注意してください。代わりに??（Null合体演算子）を使いましょう。nullとundefinedにのみデフォルト値を適用します。

📖 まとめ

  1. if...else if...elseは上から下に評価され、最初の一致が実行され、残りはスキップされる
  2. 三項演算子はif...elseの省略記法 — シンプルな代入に適しており、複雑なロジックには不向き
  3. switchは固定値の照合にクリーンだが、breakを忘れずに
  4. 6つのfalsy値：false、0、""、null、undefined、NaN
  5. "0"、[]、{}はtruthy — 「空」の見た目に騙されない
  6. 0や""が有効な場合の||でのデフォルト値に注意 — ??や明示的な比較を使おう

❓ よくある質問

Q 条件分岐での==と===の違いは何ですか？
A ==は比較の前に型変換を行います（"1" == 1はtrue）。===は型変換を行いません（"1" === 1はfalse）。予期しない暗黙の型変換を避けるため、常に===を使いましょう。
Q switchは文字列を比較できますか？
A はい。switchは文字列、数値、ブール値で動作します。厳密等価（===）を使って比較します。
Q ??と||の違いは何ですか？
A ||はすべてのfalsy値（0、""、null、undefined、NaN、false）で反応しますが、??はnullとundefinedにのみ反応します。0や空の文字列を保持したい場合は??を使いましょう。

📝 演習

  1. 年を入力として受け取り、うるう年かどうかを判定するプログラムを書いてください（4で割り切れて100で割り切れない、または400で割り切れる）。
  2. シンプルな電卓を作成してください：2つの数値と演算子（+、-、*、/）を入力として受け取り、switchで結果を計算し、ゼロ除算を処理してください。
  3. BMI計算機を作成してください：身長（m）と体重（kg）を入力として受け取り、BMIを計算し、カテゴリ（低体重/標準/過体重/肥満）を表示してください。
100%