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

JavaScriptのswitch...caseステートメントとは？基本構文と使い方を解説

switchステートメントとは

switchステートメントは、1つの式を評価し、その値に応じて複数の処理の中から実行するものを選ぶための構文です。実行エンジンは式の値と各caseを上から順に照合し、一致するものが見つかればそのcaseの処理を実行します。どこにも一致しなかった場合は、defaultに記述した処理が実行されます。

同じ変数の値を複数の候補と比較して分岐したい場合、if...else ifを何度も繰り返し書くよりも、switchステートメントを使った方がコードが簡潔になり、可読性と効率の両面で優れています。

基本構文

switch (expression) {
    case 値1:
        処理;
        break;

    case 値2:
        処理;
        break;
    ...

    case 値n:
        処理;
        break;

    default:
        処理;
}

breakの役割に注意

breakステートメントは、そのcaseの処理の終わりを示し、switchブロックから抜け出す役割を持ちます。breakを書き忘れると、一致したcase以降のすべてのcaseの処理が順番に実行されてしまいます。この動作は「フォールスルー」と呼ばれます。意図的にフォールスルーを活用する場合を除き、各caseの最後には必ずbreakを記述するようにしましょう。

サンプルコード

次の例では、成績（grade）の値に応じて異なるメッセージを表示します。コードを実行して、switch...caseステートメントの動作を確認してみましょう。

<html>
<body>
<script>
    var grade = 'A';
    document.write("switchブロックに入りました<br />");
    switch (grade) {
        case 'A':
            document.write("よくできました<br />");
            break;

        case 'B':
            document.write("なかなか良い成績です<br />");
            break;

        case 'C':
            document.write("合格です<br />");
            break;

        case 'D':
            document.write("もう少し頑張りましょう<br />");
            break;

        case 'F':
            document.write("不合格です<br />");
            break;

        default:
            document.write("不明な成績です<br />");
    }
    document.write("switchブロックを抜けました");
</script>
</body>
</html>

実行結果

switchブロックに入りました
よくできました
switchブロックを抜けました

この例では変数gradeに「A」が代入されているため、case 'A'に一致し、対応する処理だけが実行された後、breakによってswitchブロックを抜けます。gradeの値を「B」や「C」などに変更して実行すると、表示されるメッセージが切り替わることを確認できます。どのcaseにも一致しない値（例：「X」）を代入すれば、defaultの処理が実行されることも試してみてください。

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

    JavaScriptのswitch文は常に厳密比較（===）で判定される JavaScriptのswitch文では、switch式の値と各caseラベルの比較に厳密等価演算子（===）だけが使用されます。つまり、==のような暗黙的な型変換（型強制）は一切行われません。そのため、見た目が同じ値でもデータ型が異なる限り一致とはみなされず、該当するcaseがひとつも見つからなければ、直ちにdefault節が実行されます。 この挙動は、フォーム入力など「必ず文字列として取得される値」を扱う場面で特に重要です。input要素のvalueプロパティは常に文字列を返すため、数値リテラルのcase（case

  2. JavaScriptのswitchステートメント内でreturnを使う方法｜サンプルコード付きで解説

    switchステートメント内でreturnステートメントは使えるのか？結論から言うと、switchステートメントが関数の中にある場合は、returnステートメントを含めることができます。returnが実行されると、その時点で関数の処理が終了し、switchステートメントで指定された値が呼び出し元へ返されます。そのため、switchステートメントより後ろに記述したコードは実行されません。さらに、returnは関数自体を抜ける働きを持つため、各caseの末尾にbreakステートメントを記述する必要がない点も見逃せません。breakの書き忘れによる意図しないフォールスルー（次のcaseへの処理の漏れ