Day11.5 前半のゴール
Day11.5 は「条件分岐をもっとコンパクトに・読みやすく」書くための日です。
テーマは三項演算子と switch。
前半ではまず、それぞれをこういうイメージでつかむことを目標にします。
Day11.5 前半でつかみたい感覚
三項演算子＝「短い if-else」で“値”を選ぶ道具
switch＝「分岐がたくさんあるときの、見通しの良い if の仲間」
三項演算子とは何か
「if で値を分ける」だけの場面を短く書く
まずは普通の if から見てみます。
const score = 80;
let result;
if (score >= 70) {
result = "合格";
} else {
result = "不合格";
}
console.log(result);
やりたいことは「条件によって result に入れる“値”を変える」だけです。
このパターンを、もっと短く書けるのが三項演算子です。
const score = 80;
const result = score >= 70 ? "合格" : "不合格";
console.log(result);
条件 ? 真のときの値 : 偽のときの値
という形になっています。
三項演算子の基本形を分解して見る
const result = 条件 ? A : B;
この1行は、次の if と同じ意味です。
let result;
if (条件) {
result = A;
} else {
result = B;
}
大事なのは、三項演算子は「値を返す」ということです。
if 文は「文（ステートメント）」ですが、
三項演算子は「式（値を持つ）」として扱えます。
深掘り：どんなときに三項演算子を使うべきか
三項演算子が向いているのは、こんな場面です。
「条件によって代入する値を変えたいだけ」
「処理はシンプルで、1行で読み切れる」
逆に、処理が複雑になりそうなときは、
無理に三項演算子にせず、素直に if を使った方が読みやすいです。
三項演算子の具体例
例1：ログイン状態によってメッセージを変える
const isLoggedIn = true;
const message = isLoggedIn ? "ようこそ" : "ログインしてください";
console.log(message);
if で書くとこうなります。
let message;
if (isLoggedIn) {
message = "ようこそ";
} else {
message = "ログインしてください";
}
「どちらか一方の文字列を選ぶだけ」なので、
三項演算子のほうがスッキリします。
例2：数値が偶数か奇数かを判定する
const n = 5;
const label = n % 2 === 0 ? "偶数" : "奇数";
console.log(label);
ここでも「ラベルとしてどちらの文字列を使うか」を
1行で表現できています。
switch 文とは何か
「同じ変数を何度も if で比べる」地獄からの脱出
次のようなコードを見てください。
const color = "red";
let message;
if (color === "red") {
message = "止まれ";
} else if (color === "yellow") {
message = "注意";
} else if (color === "green") {
message = "進め";
} else {
message = "不明な信号";
}
console.log(message);
同じ変数 color を何度も比較していて、
条件が増えるほど縦に長くなっていきます。
こういう「同じ値をいろいろなパターンで分けたい」場面で使えるのが switch です。
switch の基本形
上の if を switch で書き直すとこうなります。
const color = "red";
let message;
switch (color) {
case "red":
message = "止まれ";
break;
case "yellow":
message = "注意";
break;
case "green":
message = "進め";
break;
default:
message = "不明な信号";
break;
}
console.log(message);
switch (調べたい値) のあとに、
case で「この値のとき」というパターンを並べていきます。
break の役割
各 case の最後に書いている break は、
「ここで switch 文を抜ける」という意味です。
もし break を書かないと、
マッチした case 以降の処理がそのまま続けて実行されてしまいます（フォールスルー）。
const color = "red";
switch (color) {
case "red":
console.log("赤");
case "yellow":
console.log("黄");
case "green":
console.log("緑");
}
この場合、出力は
赤
黄
緑
となってしまいます。
意図しない動作になりやすいので、
基本的には「各 case の最後に break を書く」と覚えておいてOKです。
switch の具体例
例1：曜日によってメッセージを変える
const day = "Mon";
let message;
switch (day) {
case "Mon":
message = "月曜日です";
break;
case "Tue":
message = "火曜日です";
break;
case "Wed":
message = "水曜日です";
break;
default:
message = "その他の曜日です";
break;
}
console.log(message);
if で書くとかなり長くなりますが、
switch だと「パターンの一覧」として見やすくなります。
例2：HTTP ステータスコードでメッセージを変える
const status = 404;
let message;
switch (status) {
case 200:
message = "成功しました";
break;
case 400:
message = "リクエストエラーです";
break;
case 401:
message = "認証エラーです";
break;
case 404:
message = "見つかりません";
break;
default:
message = "サーバーエラーの可能性があります";
break;
}
console.log(message);
こういった「コード値に応じてメッセージを変える」処理は、
実務でも頻出です。
三項演算子と switch の使い分け
ざっくりした目安
三項演算子は「2パターンの分岐で、値を選ぶだけ」のとき。
switch は「3パターン以上の分岐があり、同じ値を基準に分けたい」とき。
例えば、
ログインしているかどうかでメッセージを変える → 三項演算子
色やステータスコードなど、パターンが多い → switch
というイメージです。
深掘り：読みやすさを最優先にする
三項演算子は短く書ける反面、
ネスト（入れ子）にし始めると一気に読みにくくなります。
// こういうのはやめたほうがいい
const label = score >= 80 ? "A" : score >= 70 ? "B" : "C";
こういう場合は、素直に if や switch を使ったほうが
未来の自分も他人も幸せです。
セキュリティ・安全性の視点から見る条件分岐
「抜け漏れがないか」を意識する
条件分岐を書くときに大事なのは、
「どのパターンも必ずどこかに引っかかるか？」という視点です。
switch では default を必ず書く
三項演算子では「true / false どちらでも必ず値が決まる」形にする
if では else を意識する（必要なら必ず書く）
こうして「どの入力でも必ずどこかに行き着く」ようにしておくと、
想定外の状態で処理が進むリスクを減らせます。
これは、認証・権限チェック・入力検証など、
セキュリティに関わる部分で特に重要です。
Day11.5 前半のサンプルコード
三項演算子と switch を一度に触る小さな例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day11.5 条件分岐の応用 前半</title>
</head>
<body>
<h1>Day11.5: 条件分岐の応用（前半）</h1>
<script>
const score = 75;
const result = score >= 70 ? "合格" : "不合格";
console.log(`判定: ${result}`);
const role = "admin";
let permission;
switch (role) {
case "admin":
permission = "フルアクセス";
break;
case "user":
permission = "通常アクセス";
break;
default:
permission = "アクセス権なし";
break;
}
console.log(`権限: ${permission}`);
</script>
</body>
</html>
三項演算子で「合否のラベル」を決め、
switch で「権限レベル」を決めています。
Day11.5 前半のまとめ
三項演算子は「短い if-else で値を選ぶ」ための道具。
switch は「パターンが多いときに、見通しよく分岐を書く」ための道具。
どちらも「読みやすさ」と「抜け漏れのなさ」を意識して使うと、
条件分岐の質が一気に上がります。
後半では、
三項演算子と switch を実務寄りの例（エラーハンドリングや状態管理）に絡めて、
もう一段深く使いこなしていきます。