【JavaScript入門】Switch文で条件分岐する方法(default/break)

こんにちは、ライターのマサトです!

JavaScriptで複数の条件分岐を行う場合、IF文よりもswitch文の方がスッキリと効率よくプログラミングできる場合があります。また、switch文のよくあるエラーとして、条件式で使われる「==」と「===」の違いが理解できてなくて解決が困難になるケースもよくあります。

そこで、この記事ではこれらの疑問を解決しつつ、基本から応用までswitch文をマスターするためのコツを整理して解説していきますので、ぜひ参考にしてみてください!

switch文の基本について!

まずは、switch文を学習するために、基本的な内容をおさらいしておきましょう。一般的な構文としては、次のとおりです!

まず最初にをチェックし、次に値を見ていくのですが、その際に「式」と「値」が一致する「case」を発見したら、その処理を実行した後に「switch文」を抜けます。

ちなみに、breakを書き忘れると、次のcase処理を続けて実行してしまうので注意が必要です。

条件分岐を実行してみよう!

それでは、簡単なサンプルを試しながら、実際にswitch文を実行してみましょう!例えば、天気予報で「晴れ・雨・曇り」のいずれかで処理を分岐させるプログラムは次のようになります。

出力結果は…

今日は晴れです!

となります。このサンプルでは、変数weatherに「晴れ」を代入しているため、caseが「晴れ」と書かれた箇所の処理を実行することになります。

つまり、weatherの値が変わることで、実行する処理を変えられるプログラムをシンプルに実装できるわけです。

「if 〜 else if文」との使い分け

ここまで、基本的な「switch文」の使い方を学習してきましたが、勘の良い人であればIF文でも同じ処理ができることに気づいたかもしれません。それでもswitch文を使う理由として、最も重要なポイントはソースコードの可読性になります!

そこで、IF文(特にelse ifを伴う構文)の基本構文とswitch文との比較について確認していきましょう。

if 〜 else if文の基本構文

switch文で実現される処理のように、複数の条件分岐をIF文で実現するためにはif 〜 else if 構文を活用します。

以下のサンプルコードにてその書き方を確認してみてください。

実行結果

このように「else if」を追加すればするほど、新しい条件を増やしていけるのがif 〜 else if構文の特徴です。IF文について基本をしっかり身につけておきたい方は以下の記事が参考になりますので、ぜひ確認してみてください。

JavaScriptでIF文の使い方からif…else ifの活用術までを徹底解説
更新日 : 2019年5月5日

switchとif 〜 else if文の使い分け

では具体的にswitch文とif 〜 else if文の使い分けについて解説します。例えば、社員の名前で処理を変えるようなプログラムを作ろうとした場合、IF文だと次のようになります。

上の例は、変数nameに格納された「社員の名前」に応じて違った処理を行っていますが、さらに人数が増えていくとソースコードは確実に見づらくなってしまいます。

次に、まったく同じ処理をswitch文で書いてみましょう!

これだと、人数が増えてもコードが見やすいですね。このように、1つの変数や値などを使って複数の条件に分岐させる場合は、switch文を使った方がプログラムがスッキリして読みやすくなります。

「default」の使い方

これまでswitch文にcaseを使って条件分岐を行ってきました。

しかし、いずれのcaseにも一致しなかった場合に何か処理をさせたい時はどうすれば良いでしょうか?このような時に使えるのがdefaultです!冒頭でご紹介した天気予報のサンプルに、defaultを追記すると次のようになります。

出力結果は…

今日は天候に注意してください!

となります。このサンプルは、weatherに「台風」が代入されているので、いずれのcaseにも一致しません。なので、最終的にはdefaultの記述がある処理が実行されるようになるわけです。

また、それぞれのcaseの処理は、最後に必ず「break」を記述しています。これがあることで、caseの処理を実行した後に「switch文」を抜けられるようになっているのですが、もしbreakの記載がなければ次のcaseに飛んでしまいます。

複数のcaseで同じ処理をする方法

ここでは、複数のcaseで同じ処理をする方法を解説します。「break」の記載がなければ次の「case」に飛ぶため、次のようなswitch文を書くこともできます。

出力結果は…

0〜3が入力されました!

となります。このように書くと、「case 0」〜「case 3」までは同じ処理を実行することになります。つまり、各caseによって違った処理を実行することもできるし、特定のcaseだけ同じ処理にすることも出来るわけです。

厳密等価演算子について

JavaScriptでは、比較演算子として「==(等価演算子)」や「===(厳密等価演算子)」がよく使われますが、この違いをご存知でしょうか?例えば、次のサンプルコードを見てみましょう!

「==」を使って比較すると、どちらの値も同じ「5」なので出力結果はtrueになります。それでは、こちらのコードはどうなるでしょう?

「===」を使うと、出力結果はfalseになります。どちらの値も同じ「5」ですが、型が数値と文字なので同じではないと判断されたわけです。

このように、「===」を使うと値も型も完全に一致しないとtrueにはなりません。そして、switch文も式と値が一致するかどうかの判定に「===」が使われているのです!

例えば、ユーザーの入力を受けてswitch文で処理を分岐する例を見てみましょう!HTMLに数値入力用のinputタグとボタンを配置します。

そして、JavaScriptから入力された「数値」を取得し、「switch文」で処理を分岐させます。

ここまでは、なんの問題もないコードに見えます。ところが、例えばユーザーが「1」を入力して実行すると「case 1」が処理されるのではなく、defaultの処理が実行されます。

つまり、「switch文」はいずれのcaseにも一致しなかったと判断したわけです。この理由がまさに「==」と「===」の違いによるところでして、実はinputタグから取得した数値は文字列になるのです!

そして、先ほども解説しましたがswitch文の判定は「===」なので、caseに設定されている数値「1」と取得した文字の「’1’」だと一致しないというわけです。

そこで、このサンプルコードを正しく動作させるには、取得した「’1’」を数値に変換しなければいけません。一般的にはparseInt()を使って変換するのが良いでしょう。

このように書くと、文字が数値に変換されるので、期待通りの動作が実現できるようになります。ちなみに、parseIntの第2引数に記述している「10」は10進数を表しており、日常的に利用する数値の意味なので覚えておきましょう。

まとめ

今回は、「switch文」についての基本から応用までを学習しました。もう一度、ポイントだけを簡単にまとめると次のようになります!

  • switch文は式と値が一致した処理を実行する!
  • 同じ変数や値を使って複数条件分岐する場合はswitch文を使おう!
  • 「case」「break」「default」の使い分けを覚えておこう!
  • 「==」と「===」の違いを理解しておこう!

これらの内容を復習しつつ、今後も積極的に「switch文」を有効に活用していきましょう!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説