JavaScriptで条件分岐（switch）

この記事は、以下の方を対象としています。

switch文の構文を知りたい
実際にswitch文を使用しているコードを見たい

switch文とは？
switch文の構文
実用例の紹介
まとめ

switch文とは？

switch文とは、条件分岐をするためのものです。

条件分岐を実現するにはif文でも良いですが、分岐数が多い場合は、可読性が失われます。

そんなときに使うのがswitch文です。

switch文の構文

構文は以下の通りです。

switch(変数) {
    case 値A:
        // 変数 === 値A が成立した場合に実行
        break
    case 値B:
        // 変数 === 値B が成立した場合に実行
        break
    default:
        // 変数 === 値A でも 変数 === 値B でもない場合に実行
}

ポイントは3つあります。1つずつ解説します。

変数の型を意識する
値の比較は厳密に行われる（===）
breakを忘れない

変数の型を意識する

switchの後に続く括弧の中の変数はなんでもいいです。

ただ、データ型は意識してください。

JavaScriptは動的型付けの言語のため、データ型は記載されません。

そのため、思わぬバグにつながる可能性があるので、注意してください。

値の比較は厳密

JavaScriptは比較をする際に「==」もしくは「===」が使用できます。

イコールが2つのものはデータ型を見ていませんので、値(実体)のみ一致していればtrueになります。

イコールが3つのものはデータ型と値が一致しているかを見ます。

switch文ではイコールが3つのものが採用されています。

breakを忘れない

「break」がない場合、対象のcase以下がすべて実行されます。

例えば次のコードを見て挙動を確認してください。

let test = "aaa"

switch(test) {
    case 'aaa':
        console.log(test)
        // break
    case '値B':
        console.log(test)
        // break
    default:
        console.log(test)
}

// aaa
// aaa
// aaa

上記の例では、1つ目のcaseがtrueになります。

そのあと、breakがないため次のcase、次のcase、次の…となります。

この挙動から、switch文を敢えて使用しない方がいたりもします。。。

実用例の紹介

年代を選択するとメッセージが表示される仕組みをswitch文を使って書きましたので、

ご参考までに。。。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample</title>
</head>

<body>
  <form name="form1">
    <input type="radio" name="age" id="check01" value="10代" />
    <label for="check01">10代</label>
    </div>
    <div>
      <input type="radio" name="age" id="check02" value="20代" />
      <label for="check02">20代</label>
    </div>
    <div>
      <input type="radio" name="age" id="check03" value="30代" />
      <label for="check03">30代</label>
    </div>
    <div>
      <input type="radio" name="age" id="check04" value="40代" />
      <label for="check04">40代</label>
  </form>
  <div>
    <input type="submit" value="CHECK!" onclick=ageChecker()>
  </div>
</body>

<script>
  function ageChecker() {
    const check1 = document.getElementById('check01')
    const check2 = document.getElementById('check02')
    const check3 = document.getElementById('check03')
    const check4 = document.getElementById('check04')

    const array = [];
    array.push(check1)
    array.push(check2)
    array.push(check3)
    array.push(check4)

    const result = array.find(f => f.checked === true).value

    switch (result) {
      case '10代':
        alert('若いですね')
        break
      case '20代':
        alert('まだ若いですね')
        break
      case '30代':
        alert('まだまだ若いです')
        break
      case '40代':
        alert('まだまだ若いです')
        break
      default:
    }
  }
</script>

</html>

まとめ

switch文の使い方について紹介しました。

重要なのは以下3つでした。

変数の型を意識する
値の比較は厳密に行われる（===）
breakを忘れない

switch文は他のプログラミング言語でも出てきます。

構文もほぼ変わらないので、覚えておくと今後役に立つ時が来ると思います。