初心者向け！javascriptのswitch文の使い方【現役SEが紹介】

javascriptのswitchについて知りたい。

未経験者にも分かりやすく教えてほしい。

上記のお悩みを解決します。

■本記事の内容

本記事で以下の内容をお伝えします。

・javascriptのswitchの使用方法
・switchを使用するパターン例
・switch文とif文の使い分け

■本記事の信頼性

ささそらと

この記事を書いている私は、プログラミングを仕事として始めて10年以上ほど経ちます。今も現役のシステムエンジニアです。

javascriptのswitch文について初心者向けに分かりやすく説明していきます。

switchは条件分岐を行うときに使用する文法になります。
if文と似たようなものです。

ただ、switch文を使用することで条件分岐を分かりやすく簡潔に書くことができます。
プログラミングをする上でswitch文はよく出てきますので、早めに理解しておくといいでしょう。

javascriptのswitchの使用方法
1. そもそもswitchとは？
2. switchの書き方
switch文とif文の使い分け
最後に

javascriptのswitchの使用方法

javascriptのswitchの使用方法について説明していきます。
ただ、その前に条件分岐処理の基本であるif文が今一つ理解できていない場合は先にif文を理解してから学んだほうがいいかと思います。

以下にまとめてますので良ければ先に見て頂くと良いかと思います。

初心者向け！javascriptのif文でよく見かけるor、and演算子の使い方【現役SEが紹介】

そもそもswitchとは？

はじめにswitch文とはそもそもどういったものかを説明していきます。

冒頭でも書きましたが、switch文は条件分岐の処理になります。

条件分岐処理を行う際、ある変数がAの場合はAの処理、Bの場合はBの処理みたいな分岐をしたい場合によく使用します。

具体的にどのように書くかは後ほど書きますが、以下のイメージです。

天気が雨なら傘を持つ。
天気が雪ならコートを着る。
天気が雷なら外に出ない。
天気が上記以外なら、普通に出かける。

上記、天気が変数になり、雨や雪が条件になります。
上記のような条件分岐でswitch文をよく使用します。

switchの書き方

では、実際にjavascriptで書いてみましょう。

const weather = '雨';
switch (weather) {
  case '雨':
    console.log('傘を持つ');
    break;
  case '雪':
    console.log('コートを着る');
    break; 
  case '雷':
    console.log('外に出ない');
    break;
  default:
    console.log('普通に出かける');
}

先ほどの例を実際にコードにすると上記のような感じです。

1行目の変数は雨を設定していますが、これが雪だったり晴れだったりすると後の処理が変わっていいきます。

書き方としてまずswitchの（）内に変数を指定します。
この指定した変数の条件をcaseで各々書いていく感じです。

caseの中には実際にその条件になった場合に処理したいことを書いていきます。
処理の終わりにbreakを記載することでそのcase内にある処理の終わりを指します。
breakを書き忘れると後のcaseの中の処理も実行されてしまうので注意しましょう。

defautは上記以外を指します。それまでに記載したcaseの条件に一致しない場合は、最後このdefautの中身が処理されるようになります。

複数条件が同じ処理をしたい場合は以下のように記載することができます。

const weather = '雪';
switch (weather) {
  case '雨':
  case '雪':
    console.log('傘を持つ');
    break;
  case '雷':
    console.log('外に出ない');
    break;
  default:
    console.log('普通に出かける');
}

同じ処理を行いたいcase文を並べるだけで実装できます。
上記により、雨の場合でも雪の場合でも傘を持つという処理が実行されるといった形です。

switch文とif文の使い分け

上記switch文の処理はif文でも実現することができます。

if (weather === '雨') {
  console.log('傘を持つ');
} else if (weather === '雪') {
  console.log('コートを着る');
} else if (weather === '雷') {
  console.log('外に出ない');
} else {
  console.log('普通に出かける');
}

いかがでしょうか？こちらでも問題なさそうですが、毎度weatherの変数と===という比較処理を書いていかなければなりません。

もし、天気以外にも何か条件を足したい場合はif文の方が良いですが、特にそういうのがなければswitch文を使用するほうが見やすくて分かりやすいです。

※例えば、雨が降っていて傘がない場合は外に出ないみたいな感じです。
条件に天気が雨の場合、傘があるかどうかの複数条件必要になる場合ですね。
上記はif文を使用する形になります。