条件分岐

条件に基づいて異なるコードを実行するための構文です。

if 文

let age = 18;

if (age >= 18) {
  console.log("成人しています");
} else if (age >= 13) {
  console.log("10代です");
} else {
  console.log("子供です");
}

truthy と falsy

if の条件には true / false 以外の値も書けます。その場合 JavaScript は値を自動的に真偽値に変換します。false として扱われる値（falsy）は代表的な次の 6 つで、それ以外はすべて true（truthy）です。

// falsy な値 (代表的な 6 つ)
if (false) {}     // false
if (0) {}         // 数値の 0
if ("") {}        // 空文字列
if (null) {}      // null
if (undefined) {} // undefined
if (NaN) {}       // NaN

// 上記以外はすべて truthy
if ("0") {}       // 文字列の "0" は truthy (中身があるため)
if ([]) {}        // 空配列も truthy (配列は後の章で学びます)
if ({}) {}        // 空オブジェクトも truthy

初級者向け解説

if ("0") が真になるのは意外に感じるかもしれません。中身のある文字列はすべて truthy なので、"0" や "false" も true 扱いになります。数値の 0 と文字列の "0" は別物だと意識しましょう。なお厳密には -0 や BigInt の 0n も falsy ですが、日常的に意識するのは上記の 6 つで十分です。

論理演算子と Null 合体演算子

論理演算子は「短絡評価」という仕組みを持ち、デフォルト値の指定によく使われます。

// && (AND): 左が truthy なら右を返す
console.log(true && "値"); // 値

// || (OR): 左が falsy なら右を返す (デフォルト値によく使う)
const name = "" || "ゲスト";
console.log(name); // ゲスト

// ?? (Null 合体): 左が null か undefined のときだけ右を返す
const count = 0 ?? 10;
console.log(count); // 0 (0 は null/undefined ではないのでそのまま)

const value = null ?? 10;
console.log(value); // 10

|| と ?? の使い分け

|| は 0 や "" も falsy として弾いてしまうため、「0 を有効な値として扱いたい」場面では意図せぬ動作になります。??（ES2020）は null と undefined のときだけ 右側を返すので、「値が未設定のときだけデフォルトを使う」用途に適しています。

三項演算子

if-else を短く書ける条件演算子です。

// 条件 ? 真の場合の値 : 偽の場合の値
const score = 85;
const result = score >= 60 ? "合格" : "不合格";
console.log(result); // 合格

switch 文

複数の条件分岐を扱う場合に使用します。

let fruit = "りんご";

switch (fruit) {
  case "りんご":
    console.log("りんごは赤いです");
    break;
  case "バナナ":
    console.log("バナナは黄色いです");
    break;
  case "オレンジ":
    console.log("オレンジはオレンジ色です");
    break;
  default:
    console.log("その果物の色は分かりません");
}

break の付け忘れに注意

break を忘れると、その下の case も続けて実行されてしまいます（フォールスルー）。意図的に利用するパターンもありますが、通常は各 case の最後に break を書きましょう。

次に読む

ループ処理 — 同じ処理を条件に応じて繰り返す

if 文​

truthy と falsy​

論理演算子と Null 合体演算子​

三項演算子​

switch 文​

次に読む​