JavaScriptのswitch文の使い方

    • このページをはてなブックマークに追加

    公開日:2018年07月11日 最終更新日:2019年09月26日

    JavaScriptの「switch文」を使って条件分岐する方法について解説します。「switch文」は、ある式(変数)を評価した結果と複数の値と一致するかどうかを調べ、それぞれ異なる処理を実行します。

    目次

    1. 「switch文」の基本構文

    switch文」は、ある式(や変数)の結果とcaseの値が一致した場合に特定の処理を実行します。

    switch文の基本構文です。

    switch ( 式 ){
     case 値1:
      式の評価結果と値1が同じ場合に実行する処理;
      break;
     case 値2:
      式の評価結果と値2が同じ場合に実行する処理;
      break;
     case 値3:
      式の評価結果と値3が同じ場合に実行する処理;
      break;
    ・・・
    }

    「switch文」における式の評価は一度のみです。switch文の式が評価され、その結果が例えば「値2」のcaseと一致した場合は、そのあとに続くコードを実行します。実行後に「break」がある場合は、それ以降の処理は行いません。「break」キーワードについては、次の章で詳しく解説します。

    JavaScriptのサンプルコード「JS_Sample0.html」を保存して「switch文」の動きを確認してみましょう。

    ●JS_Sample0.html

    <!DOCTYPE html>
    <html>
    <head> <title>Introduction to JavaScript</title> </head>
    <body>
    <h2>JavaScript Switch Statement</h2>
    <script>
    var num = 3;
    var day;
    switch ( num ){
    case 0:
    day = "日";
    break;
    case 1:
    day = "月";
    break;
    case 2:
    day = "火";
    break;
    case 3:
    day = "水";
    break;
    case 4:
    day = "木";
    break;
    case 5:
    day = "金";
    break;
    case 6:
    day = "土";
    }
    alert(day + "曜日です。");
    </script>
    </body>
    </html>

    変数「num」の値とcaseの値を比較して、一致したcaseの処理を実行します。「num」の数値(0~6)に応じて変数「day」に「日~土」のテキストを代入する処理を実行します。switch文が終了した時点で、numの数値に応じて、day変数にテキストが入っています。一番最後の「alertメソッド」でブラウザーに表示する文字列を作成しています。

    ▲ページトップへ戻る

    2. 「break」キーワード

    break」キーワードをcase内で使うと、それ以降のコードの実行を飛ばして、Switch文をcaseの評価を終了します。必ず処理内にbreakをつけないといけないというわけではありません。用途に応じた使い方ができます。

    試しに、サンプルコードのbreakを外すとどのような結果が表示されるか見てみましょう。

    ●JS_Sample1.html

    <script>
    var num = 3;
    var day;
    switch ( num ){
    case 0:
    day = "日";
    case 1:
    day = "月";
    case 2:
    day = "火";
    case 3:
    day = "水";
    case 4:
    day = "木";
    case 5:
    day = "金";
    case 6:
    day = "土";
    }
    alert(day + "曜日です。");
    </script>

    「JS_Sample1.html」では、numの評価結果は「3」になり、最初は「case 3:」のブロック内の処理が実行され、「day」には「水」が代入されます。その後には「break」キーワードがない為、「case 4:」、「case 5:」、「case 6:」と実行されます。そのたびに変数「day」には「"木"」、 「"金"」、「"土"」と代入されていきますので、一番最後に代入された「"土"」がalertメソッドで表示される値になります。

    ▲ページトップへ戻る

    3. 「default」キーワード

    default」キーワードに続く処理は、どのcaseの値とも一致しない場合に実行されます。

    ●JS_Sample2.html

    <!DOCTYPE html>
    <html>
    <head>
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h2>JavaScript Switch Statement</h2>
    <script>
    var num = 8;
    var txt1 = "曜日です。";
    var msg1;
    switch ( num ){
    case 0:
    msg1 = "日" + txt1;
    break;
    case 1:
    msg1 = "月" + txt1;
    break;
    case 2:
    msg1 = "火" + txt1;
    break;
    case 3:
    msg1 = "水" + txt1;
    break;
    case 4:
    msg1 = "木" + txt1;
    break;
    case 5:
    msg1 = "金" + txt1;
    break;
    case 6:
    msg1 = "土" + txt1;
    break;
    default:
    msg1 = "0~6の数字を入力して下さい。";
    }
    alert(msg1);
    </script>
    </body>
    </html>

    サンプルコードでは、「num」に代入された値が「8」なので、caseの「0~6」にマッチしません。その場合に実行されるのが「default」キーワードです。「msg1」変数に代入された「0~6の数字を入力して下さい。」がalertメッセージとして表示されます。

    ▲ページトップへ戻る

    4. 練習問題 -Exercise!-

    4.1. 練習問題1

    numが「2」の場合に、「夜中です。」を表示するcaseを追加してswitch文を完成させて下さい。

    ヒント!:case 2」のブロックを追加します。

    <p id="aaa"></p>
    <script>
    var text;
    var num = 1;
    switch ( num ) {
    case 0:
    text = "午前中です。";
    break;
    case 1:
    text = "午後です。";
    break;
    }
    document.getElementById("aaa").innerHTML = text;
    </script>

    ▲ページトップへ戻る

    4.2. 練習問題2

    以下のサンプルコードには間違いがあります。コードを修正して「JavaScript」を適切に実行できるようにして下さい。

    ヒント!:プログラム初心者にありがちな構文ミスです。

    <p id="bbb"></p>
    <script>
    var product_id;
    var fruits = "バナナ";
    switch ( fruits ) {
    case "リンゴ"
    product_id = "0001";
    break;
    case "オレンジ"
    product_id = "0002";
    break;
    case "バナナ"
    product_id = "0003";
    }
    document.getElementById("bbb").innerHTML =
    fruits + "の商品番号は" + product_id + "です。";
    </script>

    ▲ページトップへ戻る

    関連記事:JavaScriptの配列オブジェクトの使い方
    関連記事:JavaScriptの配列要素の値を追加/削除する方法
    関連記事:JavaScriptの連想配列を使ってみよう!

    JavaScriptのスキルが活かせる最新求人情報をチェック!

    月額単価40万円〜
    勤務地 東京都 港区
    月額単価50万円〜90万円
    勤務地 東京都 渋谷区
    月額単価80万円〜100万円
    勤務地 東京都 千代田区
    月額単価100万円〜
    勤務地 東京都 港区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    フリーランス

    【JavaScript】フロントエンドエンジニア★大手テレビ局の動画配信サイトの開発

    月額単価 :40万円〜

    【業務内容】 大手テレビ局の動画配信サイトのフロントエンドの改修、新規開発を担当していただきます...

    フリーランス

    【JavaScript/GO】アプリ開発エンジニア ★eスポーツアプリの開発

    月額単価 :50万円〜90万円

    【業務内容】 自社サービスとして展開しているeスポーツアプリの開発に携わっていただきます。 【環...

    フリーランス

    【JavaScript】フロントエンドエンジニア ★エネルギー会社比較サービスの開発

    月額単価 :80万円〜100万円

    【業務内容】 Javascript(Electron)を用いたクロスプラットフォーム対応のデスクトップアプリを作成し...

    フリーランス

    【JavaScript】 フロントエンドエンジニア ★自社サービスの開発

    月額単価 :100万円〜

    【業務内容】 自社サービスとして展開している飲食産業をベースにした地域プロデュース、中心市街地を...