[JavaScript入門]switch文の使い方と、3パターンのコード(条件分岐)

JavaScript

今回はJavaScriptでのswitch文の使い方について、書いています。
使い方と基本的な動作検証を確認した後に、3パターンのサンプルコードを書いています。

JavaScript入門シリーズの前回は、JavaScriptの配列について書きました。

PR

switch文の使い方は?

switch文は条件を分岐させるための構文になります。
実際に使う場合は、下記のように使用します。

let value = 2;

switch(value) {
  case 1:
    alert("値は1です。");
    break;
  case 2:
    alert("値は2です。");
    break;
  case 3:
    alert("値は3です。");
    break;
  default:
    alert("デフォルトです。");
    break;
}

switchに値を渡すことで、判定させることができます。
switch(value)value変数を判定させて、条件分岐しています。

caseに同じ(=)になる条件をいくつか書いています。
switchに指定した値が、caseに書いた値に該当するときに、処理されます。

今回はvalueに「2」が入っているので、alertで「値は2です」が出力されます。

breakcaseから抜けて、処理をするために必要です。
casebreakがない場合は、下に抜けて処理が続きます。

例えば、今回の場合で下記のようにbreak文がない場合は、「値は2です」「値は3です」という形でalertが2回実行されます。

switch(value) {
  case 1:
    alert("値は1です。");
    break;
  case 2:
    alert("値は2です。");
  case 3:
    alert("値は3です。");
    break;
}

defaultcaseの条件に該当しない場合に処理されます。
今回の場合だと、value123でない場合です。

45などの場合は、defaultで処理されることになります。

PR

switch文を書いてみよう

実際にswitch文の処理を書いて実行してみましょう。
switchTest.htmlという名前で、下記のファイルを作成してください。

<html>
  <head>
    <meta charset="UTF-8" />
    <title>switch文のテスト</title>
    <script>
      function switchTest() {
        let value = 2;
        switch(value){
            case 1:
                alert("値は1です。");
                break;
            case 2:
                alert("値は2です。");
                break;
            case 3:
                alert("値は3です。");
                break;
            default:
                alert("デフォルトです。");
                break;
        }
      }
    </script>
  </head>
  <body>
    <button onclick="switchTest()">switch文のテスト</button>
  </body>
</html>

ボタンをひとつ用意して、ボタンをクリックすると自作したswitchTest関数が動くようにしました。

switchTest関数の処理ですが、value変数を作った後に2を入れています。
その後にswitch文を使用して、value変数の値を判定しています。

value変数の値は2なので、アラートで「値は2です。」が表示されて、処理が終了します。

動作確認をする

作ったHTMLファイルを開いて、動作を確認してみましょう。

ファイルを開くと、下記のようにHTMLで設置したボタンが表示されます。
JavaScriptでswitch文の動作確認画面

クリックすると、このように「値は2です。」が表示されました。
JavaScriptでswitch文の動作確認結果

switch文を使用した3パターンのコード

switch文を使用したサンプルコードをいくつか書いてみました。
先ほどのswitchTest関数の内容を書き換えると、動かすことが可能です。

breakを削除してみる

breakを書いていた箇所を下記のように削除します。

function switchTest() {
  let value = 2;

  switch(value){
    case 1:
      alert("値は1です。");
    case 2:
      alert("値は2です。");
    case 3:
      alert("値は3です。");
    default:
      alert("デフォルトです。");
  }
}

こうするとvalue2なので、まずcase 2の処理をします。
そして、break文がないため、次のcase 3のアラート表示もされます。

case 3にもbreakがないため、最後にdefaultの処理が行われて、3回アラートが出るようになります。

JavaScriptのswitchからbreak削除

caseに無い値を設定する

下記のように、caseとして用意されていない値をvalue変数に入れます。

function switchTest() {
  let value = 99;

  switch(value){
    case 1:
      alert("値は1です。");
      break;
    case 2:
      alert("値は2です。");
      break;
    case 3:
      alert("値は3です。");
      break;
    default:
      alert("デフォルトです。");
      break;
  }
}

そうするとcaseにないため、結果としてdefaultの箇所が処理されて「デフォルトです。」が表示されます。

文字列を設定する

文字列でも、もちろん判定可能です。
下記のように関数の内容を変更して、試してみます。

function switchTest() {
  let value = '夏';

  switch(value){
    case '春':
      alert("あたたかくなってきました");
      break;
    case '夏':
      alert("暑いですね");
      break;
    case '秋':
      alert("涼しくなってきました");
      break;
    case '冬':
      alert("寒いですね");
      break;
    default:
      alert("デフォルトです");
      break;
  }
}

valueが入っています。
switchを使用して、valueの値を判定しています。

case '夏'に該当するので、「暑いですね」のアラートが表示されて、処理が終了します。

JavaScriptのswitch文で文字列判定

おわりに

今回はJavaScriptでのswitch文について見ていきました。

条件が単純にイコールになる場合は、if文ではなくて、こちらのswitch文を使用していくと良いです。
理由としては簡潔でコードが見やすくなるかと思います。

breakのつけ忘れや、defaultの条件にも気をつけて使っていきたいですね。

コメント

タイトルとURLをコピーしました