zukucode
主にWEB関連の情報を技術メモとして発信しています。

JavaScript switch文の基本的な使い方と注意点

JavaScriptswitch文の基本的な使い方を紹介します。

JavaScript If,else,else if文の基本的な使い方if文の基本的な使い方について説明しましたが、else ifの数が増えてくると、可読性や保守性が悪くなってしまいます。

例えば以下のような分岐処理で、比較対象をaではなくa + 1bなどに条件を変更したい場合、else ifの箇所をすべて修正する必要があります。

var a = 2;
if (a == 1) {
  console.log('aは1です');
} else if (a == 2) {
  console.log('aは2です');
} else if (a == 3) {
  console.log('aは3です');
} else if (a == 4) {
  console.log('aは4です');
}

else ifの数が多いときはswitch文を使用することが多いです。

上記の処理をswitchに置き換えると以下のようになります。

aを基準に各caseの値と比較を行っていきます。

どのcaseにも当てはまらなかった場合はdefaultの処理が実行されます。

var a = 2;
switch (a) {
  case 1:
    console.log('aは1です');
    break;
  case 2:
    console.log('aは2です');
    break;
  case 3:
    console.log('aは3です');
    break;
  case 4:
    console.log('aは4です');
    break;
  default:
    console.log('aは1,2,3,4以外です');
    break;
}

// 実行結果
// aは2です

switch 値Acase 値Bの値がイコールの場合に以降の処理が実行されます。

ここでいうイコールとは、型も含めて完全に一致する場合を指します。

例えば以下のようにaが文字列の場合、caseの値も文字列にする必要があります。

var a = '2'; // 文字列
switch (a) {
  case 1:
    console.log('aは1です');
    break;
  case 2: // 数値のため不一致
    console.log('aは2です');
    break;
  case '2':
    console.log('aは文字列の2です');
    break;
  case 3:
    console.log('aは3です');
    break;
  case 4:
    console.log('aは4です');
    break;
  default:
    console.log('aは1,2,3,4以外です');
    break;
}

// 実行結果
// aは文字列の2です

if文の比較でもswitch文と同じように型まで含めて比較したい場合は以下のようイコールを3つ使用します。

if (a === 2) {
    console.log('aは数字の2です。');
}
if (a !== 2) {
    console.log('aは数字の2ではありません。');
}

JavaScriptではcase処理の最後にbreakコマンドを追加しなければ次のcase処理も実行されてしまいます。

以下の例では、case 2の処理の最後にbreakがないため、以降のcase 3,case 4,defaultの処理も実行されてしまいます。

breakがない場合
var a = 2;
switch (a) {
  case 1:
    console.log('aは1です');
  case 2:
    console.log('aは2です');
  case 3:
    console.log('aは3です');
  case 4:
    console.log('aは4です');
  default:
    console.log('aは1,2,3,4以外です');
}

// 実行結果
// aは2です
// aは3です
// aは4です
// aは1,2,3,4以外です

関連記事

  • webpack-dev-serverでhttpsでのアクセスを可能にする方法

    webpack-dev-serverでhttpsでのアクセスを可能にする方法を紹介します。外部APIのテストや、メディアデバイスのテストなどで、開発中のlocalhostをhttpsにする必要があると...


  • stylelintで例外(無視)するタグを指定する

    cssで構文チェックを行うstylelintで任意のタグを無視してエラーとしない方法を紹介します。以下のようにruleのignoreTypesで無視するタグを指定します。以下の例ではamp htmlの...


  • JavaScript localStorageの基本的な使い方まとめ

    JavaScriptでデータをブラウザに簡単に保存する仕組みのlocalStorageの基本的な使い方を紹介します。keyは保存するときにキーとなる値です。取り出すときにこのキーを指定して取得します。...


  • JavaScript 文字列を連結する

    JavaScriptで文字列を連結します。JavaScriptでは文字列の連結は文字列同士を+で結合できます。例えば以下のように、数値同士を+演算子で計算すると足し算が行われてしまうので注意します。上...


  • JavaScript 0埋めをするテキストボックスを作成する

    テキストボックスで値を入力後、指定した文字数に0埋めする処理を実装します。以下のURLで紹介した処理を組み合わせれば簡単に実装できます。JavaScriptで指定した文字数に0埋めをするとJavaSc...


  • JavaScript ¥(円マーク)を文字列で扱う

    JavaScriptの¥(円マーク)は、正しく設定していないと利用者のPCのOSなどの環境によっては\(バックスラッシュ)で表示されてしまう可能性があるので、扱いには注意が必要です。JavaS...


  • JavaScript trimで前後の空白(スペース)を削除する

    JavaScriptで文字列の前後の空白(スペース)を削除します。trim関数を使えば先頭と末尾の半角スペース、全角スペースの両方が削除されます。IE8以下の場合はtrim関数が使えないので自作する必...


  • JavaScript 時刻の妥当性チェックをする

    時刻の妥当性チェックを行います。HH:mm書式で00:00〜23:59までの範囲が有効になるように正規表現でチェックをしています。


  • JavaScript システム日付を取得する

    JavaScriptでシステム日付を取得するには以下のように、Dateオブジェクトを宣言します。取得したDateオブジェクトから年〜ミリ秒までをそれぞれ取得できます。月だけは0から始まるので+1をする...


  • JavaScript 文字列を指定した長さに切り取る

    JavaScriptで文字列を指定した長さに切り取ります。よくある方法としてsubstrとsubstringの2つの方法があります。substr(開始位置, 切り取る文字数)で文字列を切り取ります。開...