すべてのプログラムには、反応する必要があります。ユーザーがボタンをクリックする、APIがデータを返す、フォームのフィールドが空になる、といった具合です。分岐する方法がなければ、コードは実際に何が起きているかに関わらず、一行ずつ実行されるだけになってしまいます。条件分岐(Conditionals)は、JavaScriptに「選択する」能力を与えます。それらは関数内の意思決定者であり、何を実行し、何をスキップするかを決める門番です。条件分岐をうまく書けるようになれば、硬直したスクリプトを書くのをやめ、実際に反応するソフトウェアを構築できるようになります。

なぜ条件分岐が重要なのか

制御フローはロジックの根幹です。パスワードをサーバーに送信する前に検証したり、税金を計算する前にショッピングカートが空かどうかを確認したり、ネットワークリクエストが失敗したかどうかを検知して空白の画面の代わりにエラーを表示したりする際に、条件分岐を使用します。これらのシナリオはすべて、同じシンプルな考え方に基づいています。つまり、「何かを評価し、それに応じて行動する」ということです。

条件分岐がなければ、アプリケーションは対話ではなく独白になってしまいます。異なるデータシナリオを処理したり、エラーを適切に管理したり、ユーザーのアクションに意味のある形で反応したりすることができなくなります。条件分岐によって、現実世界の不確実性の中でプログラムがどのように動作するかを制御できるようになります。

基本的な if 文

最も簡単な始め方は、単独の if 文です。「もしこれが真(true)なら、この処理を行う」というだけのものです。それだけです。フォールバックも、代替のパスもありません。

if (x % 2 === 0) {
    console.log("Even");
}

このスニペットでは、剰余演算子が x が 2 で割り切れるかどうかをチェックしています。余りが 0 のとき、コンソールに文字列がログ出力されます。x が奇数の場合は、何も起こりません。ブロックは無視され、実行は下の行へと続きます。

この「静かな無視」は重要です。時には、単一のアクションだけを保護したい場合もあります。例えば、ボタンがアクティブなときだけ CSS クラスを追加したい場合や、入力が空でないときだけ配列にアイテムを追加したい場合などです。単独の if 文は、不要なロジックを書くことを強いることなく、そうした瞬間を処理してくれます。

if-else による代替手段の追加

現実の意思決定には、通常2つの側面があります。ユーザーが規定の年齢に達しているか、いないか。支払いが成功したか、失敗したか。if-else 構造はその両方をカバーします。

if (age >= 18) {
    console.log("Adult");
} else {
    console.log("Not an Adult");
}

else ブロックは、最初の条件が拒否したすべてのケースをキャッチします。これにより、クリーンな二者択一の分岐が作成されます。このパターンは、トグル、権限、フィーチャーフラグに効果的です。各ブロック内のロジックは、焦点を絞った状態に保ってください。もし一つの分岐の中にあまりにも多くのタスクを詰め込みすぎていると感じたら、それは通常、作業をより小さな関数に分割すべきという合図です。

else if による複数のパスのチェック

人生において選択肢が2つしかないことは稀です。数値を正、負、またはゼロとして分類する必要があるかもしれません。重量区分に基づいて配送料を割り当てる必要があるかもしれません。順序立てた複数の比較には、else if を使用します。

if (x > 0) {
    console.log("Positive");
} else if (x < 0) {
    console.log("Negative");
} else {
    console.log("Zero");
}

JavaScript はこれらを上から下へと評価します。一つの条件が一致した瞬間にそのブロックを実行し、残りの条件は無視します。順序が重要です。もし x > 100 をチェックした後に x > 0 をチェックした場合、より緩い条件が先にキャッチしてしまうため、より厳格なチェックは決して実行されません。else if は優先順位リストだと考えてください。

switch 文

一つの値を多くの個別のオプションと比較する場合、長い else if の連鎖は繰り返しの多い退屈なものに感じられることがあります。switch 文はそれを整理してくれます。式を case 句と照合し、一致するブロックを実行します。

switch (true) {
    case marks >= 90:
        Branch = "Computer science";
        break;
    case marks >= 80:
        Branch = "Mechanical";
        break;
    default:
        Branch = "Other";
}

この例では、switch(true) を使用してブール条件を直接評価しています。これは、ロジックが厳密な一致ではなく範囲に依存する場合によく使われる JavaScript のパターンです。break キーワードは不可欠です。これがないと、一致しているかどうかにかかわらず実行が次の case へとフォールスルー(突き抜け)してしまい、多くの場合、意図しない動作になります。default 句は最後の else のように機能し、それまでの case に当てはまらなかったすべてのケースをキャッチします。

switch は、明確で固定されたオプションがある場合に真価を発揮します。特に、各分岐が単に値を代入したり、単一の関数を呼び出したりするだけの場合、大量の else if ブロックが積み重なっているよりも、スキャン(読み取り)が容易であることが多いです。

三項演算子

短い二者択一の決定には、三項演算子を使うとコンパクトにまとまります。これは、条件、真の場合の値、偽の場合の値という3つのオペランド(演算対象)を取ります。

const result = (age >= 18) ? "Eligible" : "Not eligible";

素早い代入やインラインでの return に使用できます。結果が単純な式である場合に適しています。三項演算子を3段階もネスト(入れ子)させたいという衝動には抗ってください。ネストされた三項演算子は行数を節約できるかもしれませんが、可読性を犠牲にします。ロジックが複雑になってきたら、通常は if-else ブロックを使う方が、そのファイルを開く次の開発者に対して親切です。

ネストされた決定

複雑なロジックを扱う場合、追加の条件を確認する必要があることがあります。if 文の中にさらに if 文を入れ子(ネスト)にすることで、判断をより細かく制御できます。

if (weather === "sunny") {
    if (temp > 30) {
        console.log("