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

JavaScriptのswitchステートメントで共通コードブロックを実装する方法を解説

JavaScriptのswitchステートメントは、1つの式の評価結果に応じて複数の処理を振り分けるための制御構文です。各caseに対応する処理を記述し、break文でブロックを抜けるのが基本的な書き方となります。

以下は、switchステートメントを使って共通コードブロックを実装するサンプルコードです。1〜7の数値を入力すると、対応する曜日を表示するシンプルなWebページを作成します。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</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 statement</h1>
Enter day 1-7<input type="text" class="day" /><button class="Btn">
CHECK
</button>
<div style="color: green;" class="result"></div>
<h3>
Click on the above button to check which day it is
</h3>
<script>
    let dayVal = document.querySelector(".day");
    let resEle = document.querySelector(".result");
    document.querySelector(".Btn").addEventListener("click", () => {
        switch (parseInt(dayVal.value)) {
        case 1:
            resEle.innerHTML = "It's monday";
            break;
        case 2:
            resEle.innerHTML = "It's tuesday";
            break;
        case 3:
            resEle.innerHTML = "It's wednesday";
            break;
        case 4:
            resEle.innerHTML = "It's thursday";
            break;
        case 5:
            resEle.innerHTML = "It's friday";
            break;
        case 6:
            resEle.innerHTML = "It's saturday";
            break;
        case 7:
            resEle.innerHTML = "It's sunday";
            break;
        default:
            resEle.innerHTML = "Enter a value between 1 - 7";
            break;
        }
    });
</script>
</body>
</html>

実行結果

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

JavaScriptのswitchステートメントで共通コードブロックを実装する方法を解説

1〜7の数値を入力して「CHECK」ボタンをクリックすると、その値に対応する曜日が緑色のテキストで表示されます。

JavaScriptのswitchステートメントで共通コードブロックを実装する方法を解説

コードのポイント

  • parseInt()による型変換：入力欄の値は文字列として取得されるため、parseInt()で数値に変換してからswitchに渡しています。
  • break文の重要性：各caseの末尾にbreakを記述しないと、条件が一致した後も後続のcaseが連続して実行される「フォールスルー」が発生します。
  • defaultの活用：1〜7以外の値が入力された場合の処理をdefaultに記述することで、不正な入力にも適切に対応できます。

このようにswitchステートメントを使うことで、多数の条件分岐をif-else文よりも読みやすく整理できます。曜日のような限られた選択肢を扱う場面で特に有効です。

  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