有益なプログラムは、最終的に必ず意思決定の局面に直面します。このボタンはフォームを送信すべきか、それともエラーを表示すべきか？このユーザーには管理者ダッシュボードを表示すべきか、それともゲストビューを表示すべきか？JavaScriptは、条件文（conditional statements）を用いてこれらの問いに答えます。それらはコードの制御弁のようなものです。式が true または false のいずれかに評価されるかに基づいて、ある経路を開き、別の経路を閉じます。これらがなければ、スクリプトは利用者の操作に反応することなく、ただ上から下へと実行されるだけになってしまいます。
最も単純な分岐: if
if 文は、最初に通るゲートです。括弧の中に条件を記述します。その条件が true と評価されれば、その下のコードブロックが実行されます。false と評価された場合は、JavaScriptはそのブロックを完全にスキップし、ファイルの続きへと進みます。
これは、単純な一度限りのチェックに最適です。サーバーにデータを送信する前に、フォームのフィールドを検証する場合を考えてみましょう。
const email = document.getElementById("email").value;
if (email === "") {
alert("Please enter your email.");
}
email がなければ、送信もされません。ロジックは極めて単純で明快です。守るべき特別なケースが一つだけで、代替のアクションが必要ない場合には if を使用します。
「どちらか一方」を扱う: if...else
現実世界の意思決定の多くは、二面性を持っています。if...else のペアは、まさにそれを実現するためのものです。条件が true のときにもう一方のブロックが実行され、false のときにもう一方のブロックが実行されます。これら二つの経路は、互いに排他的です。
ページ読み込み時にダークモードかどうかをチェックする場合を想定してみましょう。
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
if (prefersDark) {
document.body.classList.add("dark");
} else {
document.body.classList.add("light");
}
ブラウザが両方のクラスを同時に追加することはありません。どちらか一方の経路を選択して実行し、次に進みます。ロジックが二つの可能な結果にきれいに分かれる場合は、この構造を採用してください。
複数の経路: if...else if...else
すべてが二者択一（バイナリ）とは限りません。時には、可能性の梯子（はしご）が必要になることもあります。if...else if...else の連鎖を使うことで、複数の条件を順番にテストできます。JavaScript はそれらを上から下へと評価し、条件が true になる最初のブロックを実行します。一度一致すると、それ以降の条件は無視されます。
数値のスコアを成績（アルファベット）に変換する、古典的な例を挙げます。
const score = 87;
let grade;
if (score >= 90) {
grade = "A";
} else if (score >= 80) {
grade = "B";
} else if (score >= 70) {
grade = "C";
} else {
grade = "F";
}
ここでは、順序が極めて重要です。もし score >= 90 の前に score >= 70 をチェックしてしまうと、合格点のほとんどが C の判定に捕まってしまいます。なぜなら、最初に条件を満たしたものが採用されるからです。条件は「最も具体的なもの」から「最も一般的なもの」へと順に並べ、最後に else を置いて、どれにも当てはまらなかったケースを確実に拾えるようにしましょう。
固定値との照合: switch
一つの変数を既知の定数リストと比較する場合、長い if...else の連鎖はコードを煩雑にします。switch 文を使うと、これらをスッキリ整理できます。switch は式を一度だけ評価し、その結果を厳密等価演算子 (===) を用いて case ラベルと比較します。選択肢が個別の名前を持つ離散的なものである場合、これによりコードの可読性が向上します。
現在の曜日に基づいて店舗の営業時間を設定する場合を考えてみましょう。
const day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday hours: 10am - 4pm");
break;
case 6:
console.log("Saturday hours: 9am - 6pm");
break;
default:
console.log("Weekday hours: 8am - 8pm");
}
break には注意してください。これを省略すると、実行が次の case へと「フォールスルー（突き抜け）」してしまい、そのまま処理が続いてしまいます。この挙動が役に立つこともたまにありますが、多くの場合、予期せぬバグの原因となります。正しく使えば、switch は意図をひと目で明確にし、関連する分岐を整然とした列にまとめてくれます。
コンパクトな意思決定: 三項演算子
? : と記述される三項演算子は、「文（statement）」ではなく「式（expression）」です。この違いは重要です。