Day11.5 後半のゴール
後半では、三項演算子と switch を
「ただ書ける」から「状況に応じて選べる」レベルに引き上げます。
特に意識してほしいのは、次の2つです。
Day11.5 後半で深掘りするポイント
三項演算子は“値を返す式”としてどう活かすか
switch は「状態・コード値のハブ」としてどう設計するか
三項演算子を「式」として使いこなす
if では書けない場所に書ける、という強み
三項演算子は「値を返す式」なので、
if では書けない場所にも書けます。
例えば、関数の戻り値としてそのまま使うパターン。
function getLabel(score) {
return score >= 70 ? "合格" : "不合格";
}
console.log(getLabel(80)); // "合格"
console.log(getLabel(60)); // "不合格"
if で書くと、どうしても少し長くなります。
function getLabel(score) {
if (score >= 70) {
return "合格";
} else {
return "不合格";
}
}
どちらも正しいですが、
「単純な2択で、すぐに値を返したい」場面では
三項演算子のほうが意図がはっきりします。
テンプレートリテラルとの組み合わせ
三項演算子は template literal と組み合わせると、
「メッセージの一部だけ条件で変える」ことがきれいに書けます。
const isAdmin = true;
const message = `あなたは${isAdmin ? "管理者" : "一般ユーザー"}です`;
console.log(message);
if で書くと、メッセージ全体を2パターン書くことになりがちですが、
三項演算子なら「変わる部分だけ」を切り出せます。
深掘り：ネストし始めたら危険信号
三項演算子は便利ですが、
入れ子にし始めると一気に読みにくくなります。
// 読みにくい例
const label =
score >= 80 ? "A" :
score >= 70 ? "B" :
score >= 60 ? "C" : "D";
こういう場合は、素直に if や switch に戻したほうが
未来の自分も他人も助かります。
「1回の条件分岐で完結するか？」
これが三項演算子を使うかどうかの目安です。
switch を「状態のハブ」として設計する
状態ごとに“やること”を切り替える
switch が真価を発揮するのは、
「状態やコード値によって、やることを切り替える」場面です。
例えば、アプリの画面状態。
const state = "loading";
switch (state) {
case "loading":
console.log("読み込み中です…");
break;
case "success":
console.log("データの取得に成功しました");
break;
case "error":
console.log("エラーが発生しました");
break;
default:
console.log("不明な状態です");
break;
}
if で書くよりも、
「どんな状態があり得るのか」が一覧で見えます。
同じ処理をまとめる（フォールスルーを“意図的に”使う）
前半では「基本は break を書こう」と話しましたが、
後半ではあえて break を書かないパターンも紹介します。
const role = "guest";
let permission;
switch (role) {
case "admin":
permission = "フルアクセス";
break;
case "user":
case "guest":
permission = "閲覧のみ";
break;
default:
permission = "アクセス権なし";
break;
}
console.log(permission);
user と guest は同じ扱いにしたいので、
case “user”: のあとに break を書かず、
そのまま case “guest”: にフォールスルーさせています。
「意図して」フォールスルーさせるときだけ、
この書き方を使うのがポイントです。
三項演算子と switch を実務っぽく使う例
例1：エラーレベルに応じてログの prefix を変える（三項演算子）
function formatLog(level, message) {
const prefix = level === "error" ? "[ERROR]" : "[INFO]";
return `${prefix} ${message}`;
}
console.log(formatLog("info", "起動しました"));
console.log(formatLog("error", "認証に失敗しました"));
ここでは「error かどうか」の2択だけなので、
三項演算子がちょうどいいです。
例2：HTTP ステータスコードに応じてメッセージを変える（switch）
function getStatusMessage(status) {
switch (status) {
case 200:
return "成功しました";
case 400:
return "リクエストエラーです";
case 401:
return "認証エラーです";
case 404:
return "見つかりません";
default:
return "サーバーエラーの可能性があります";
}
}
console.log(getStatusMessage(200));
console.log(getStatusMessage(404));
console.log(getStatusMessage(500));
コード値ごとにメッセージを切り替える処理は、
switch で書くと「どんなパターンがあるか」が一目でわかります。
セキュリティ・安全性の観点から見る条件分岐
default / else を「最後の砦」として必ず意識する
外部から来る値（ユーザー入力・APIレスポンス・ステータスコードなど）は、
「想定外の値が来るかもしれない」と考えるのが基本です。
switch では default を必ず書く
三項演算子では true / false どちらでも必ず値が決まる形にする
if では「本当に else は不要か？」を一度立ち止まって考える
こうすることで、
想定外の値なのに、何も処理されずにスルーされる
危険な状態なのに、チェックをすり抜けてしまう
といった事故を減らせます。
例：権限チェックの抜け漏れを防ぐ
const role = "unknown";
let canDelete;
switch (role) {
case "admin":
canDelete = true;
break;
case "user":
canDelete = false;
break;
default:
canDelete = false;
break;
}
if (canDelete) {
console.log("削除処理を実行します");
} else {
console.log("削除権限がありません");
}
default で必ず false を入れておくことで、
未知の role が来ても「削除できてしまう」ことを防いでいます。
Day11.5 後半のサンプルコード
三項演算子と switch を組み合わせた小さなデモ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day11.5 条件分岐の応用 後半</title>
</head>
<body>
<h1>Day11.5: 条件分岐の応用（後半）</h1>
<script>
function getBadge(score) {
return score >= 80 ? "Gold" : score >= 60 ? "Silver" : "Bronze";
}
function getAction(status) {
switch (status) {
case "loading":
return "スピナーを表示";
case "success":
return "結果を表示";
case "error":
return "エラーメッセージを表示";
default:
return "何もしない";
}
}
console.log(`バッジ: ${getBadge(85)}`);
console.log(`アクション: ${getAction("success")}`);
</script>
</body>
</html>
バッジのランク分けは三項演算子で、
画面の状態ごとのアクションは switch で、
それぞれ「得意な領域」を担当させています。
Day11.5 後半のまとめ
三項演算子は「シンプルな2択で値を選ぶ式」。
switch は「状態やコード値ごとの分岐を一覧で整理する文」。
どちらも、「読みやすさ」と「抜け漏れのなさ」を意識して使うことで、
条件分岐がただの if の羅列から、
意図のはっきりした“設計”に変わっていきます。