English 中文 العربية 日本語 Português

JavaScript: JavaScriptの条件分岐

最終更新：2026-10-13

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

関連する文：if...else switch

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

二者択一です。条件が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>

2. 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>

▶ サンプル：成績計算機

▶ 試してみよう

3. 三項演算子

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

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

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

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

4. 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のフォールスルー落とし穴

▶ 試してみよう
⚠️ 注意： breakのし忘れはswitchで最もよくあるバグです。ただし「フォールスルー」が便利なこともあります。複数の値が同じロジックを実行すべき場合、breakを意図的に省略してまとめることができます。

5. falsy値

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

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

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

▶ サンプル：falsy値チェック

▶ 試してみよう
⚠️ 注意： ||でデフォルト値を使う場合、0や""が有効な値でもfalsyとして扱われることに注意してください。代わりに??（Null合体演算子）を使いましょう。nullとundefinedにのみデフォルト値を適用します。

関連する文：if...else switch

❓ よくある質問

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を計算し、カテゴリ（低体重/標準/過体重/肥満）を表示してください。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%