JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのswitch文は厳密比較（===）のみ！型変換されない理由と対処法を実例で解説

JavaScriptのswitch文は常に厳密比較（===）で判定される

JavaScriptのswitch文では、switch式の値と各caseラベルの比較に厳密等価演算子（===）だけが使用されます。つまり、==のような暗黙的な型変換（型強制）は一切行われません。そのため、見た目が同じ値でもデータ型が異なる限り一致とはみなされず、該当するcaseがひとつも見つからなければ、直ちにdefault節が実行されます。

この挙動は、フォーム入力など「必ず文字列として取得される値」を扱う場面で特に重要です。input要素のvalueプロパティは常に文字列を返すため、数値リテラルのcase（case 1: など）と比較しても絶対にマッチしないのです。

サンプルコード：曜日判定アプリで挙動を確認する

次のコードは、1〜7の数字を入力してボタンを押すと曜日を表示する簡単なデモです。入力値が文字列型であるため、数値のcaseと一致しない点に注目してください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>switch文の厳密比較デモ</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScript switch文の厳密比較</h1>
1〜7の曜日番号を入力：<input type="text" class="day" />
<button class="Btn">チェック</button>
<div class="result" style="color: green;"></div>
<script>
    // 注意：dayVal.value は必ず「文字列」。caseの数値と===で比較されるため一致しない
    let dayVal = document.querySelector(".day");
    let resEle = document.querySelector(".result");
    document.querySelector(".Btn").addEventListener("click", () => {
        switch (dayVal.value) {
            case 1:
                resEle.innerHTML = "月曜日です";
                break;
            case 2:
                resEle.innerHTML = "火曜日です";
                break;
            case 3:
                resEle.innerHTML = "水曜日です";
                break;
            case 4:
                resEle.innerHTML = "木曜日です";
                break;
            case 5:
                resEle.innerHTML = "金曜日です";
                break;
            case 6:
                resEle.innerHTML = "土曜日です";
                break;
            case 7:
                resEle.innerHTML = "日曜日です";
                break;
            default:
                resEle.innerHTML = "1〜7の値を入力してください";
                break;
        }
    });
</script>
</body>
</html>

実行結果

上記コードを実行すると、次のような画面が表示されます。

JavaScriptのswitch文は厳密比較（===）のみ！型変換されない理由と対処法を実例で解説

ここで数字を入力して「チェック」ボタンをクリックしても、入力値は文字列型であるため、どの数値caseとも一致せず、毎回default節が呼び出されます。

JavaScriptのswitch文は厳密比較（===）のみ！型変換されない理由と対処法を実例で解説

意図どおりにマッチさせるための対処法

switch文の比較仕様は変更できませんが、比較前に型を揃えれば問題なく動作します。最も一般的なのは、Number()を使って入力値を数値へ変換する方法です。

<script>
// 比較前にNumber()で数値化すれば、case 1〜7 と正しくマッチする
switch (Number(dayVal.value)) {
  case 1:
    resEle.innerHTML = "月曜日です";
    break;
  // ...以降のcaseも同様
}
</script>

逆に、case側を文字列リテラル（case '1': など）に揃える方法もあります。ただしいずれの場合も、switch文が===で比較するという基本仕様自体は変わらない点に注意してください。

まとめ

  • switch文の比較は常に厳密等価（===）であり、型変換は一切行われない。
  • 文字列の「1」と数値の1は別の値として扱われ、不一致の場合は即座にdefaultが実行される。
  • ユーザー入力をswitchで判定する場合は、Number()などで事前に型を揃えるのが安全。
  1. JavaScriptの「for...in」ステートメントとは？オブジェクトのプロパティをループ処理する方法を解説

    JavaScriptのfor...in文は、オブジェクトが持つすべてのプロパティ（列挙可能なプロパティ）を順番に取り出して処理するためのループ構文です。オブジェクト内の各キー（プロパティ名）にアクセスしながら、対応する値を取得したい場合に非常に便利です。for...inの基本的な構文for (let 変数名 in オブジェクト) { // 各プロパティに対して実行したい処理 }ループ変数には、各反復ごとにオブジェクトのプロパティ名（キー）が文字列として代入されます。値そのものを取得するには、「オブジェクト[変数名]」のようにブラケット記法を使ってアクセスします。サンプルコード以下は、for

  2. C言語のswitch文とは？基本構文・アルゴリズム・サンプルコードでわかりやすく解説

    switch文は、複数の選択肢の中から1つだけを実行したい場合に使われる条件分岐の制御構造です。switch文は、指定した式の値を整数定数や文字定数のリストと順番に照合していき、一致するcaseが見つかった時点で、そのcaseに紐づくステートメント（文）が実行されます。 switch文の基本構文 switch文の基本的な書き方は以下の通りです。 switch (式){    case 値1 : 文1;       break;    case 値2 : 文2;       break; &nbs