JavaScriptのswitch〜caseの基礎が例で誰でも即わかる!

プログラミング言語JavaScriptのSwitch文について、JavaScript初心者向けに解説します。

Web開発経験のある筆者がJavaScriptのSwitch文の書き方や使い方、if文との違いについて丁寧に解説していきます。

ぜひ最後まで読んで、Switch文の基本を理解してください!

公開日:2017年8月24日

JavaScript switch~caseの書き方

条件分岐「もし~だったら~してほしい」といった処理では、if文、switch文が使えます。

今回はswitch文の書き方を見ていきましょう。

switch文の構文は以下の通りです。

この構文により、「もし、値Aだったとき、処理Aを実行しなさい。」

B,Cも同様、「もし、A〜Cに該当しない場合、デフォルトの処理を実行しなさい」が実現できます。

break・・・処理のループから抜けます。switch文,for文,while文などのループから強制的に抜けたい時に使用します。

意図的にbreak文を書かないフェイルスルーという処理もあります。

ただし、意図的にbreak文を書いていないのかわかりにくく、

エラーの温床となりやすいため、基本的にはbreak文を書くようにこころがけましょう。

default・・・どれにも該当しない場合に、実行します(defaultは、必ずしも最後に来る必要はありません。)

\文字より動画で学びたいあなたへ/

Udemyで講座を探す >

JavaScript switch~caseの具体例(string)

次のサンプルコード1は、英単語を翻訳するプログラムです。

指定された英単語と該当するものがあれば、翻訳した結果を返します。

変数「data」で文字列を受け取り、case句の値とマッチするものがあればその結果を返します。

dataで「banana」が指定され、出力に「バナナ」という翻訳結果がでています。

JavaScript switch~caseの具体例(int)

先ほどの例ではString(文字列)での例でしたが、それ以外に数値(int)も利用することができます。

それでは、サンプルコード2を見てみましょう。

次のサンプルコード2では、受け取ったdataの数値によって、

何等賞の当りか、ハズレかを判定しています。

「1のとき一等賞」「2のとき二等賞」「3のとき三等賞」「それ以外のとき、ハズレ」 となります。

今回指定された4の数字は、case1〜3のどれにも当てはまりませんので、

default部分が実行されています。

この様に、数字の値によって出力を変更することができました。

JavaScript switch~caseとif文の使い分けとは?

if文でも条件分岐ができますが、使い分けのポイントについて考えてみましょう。

switch~caseとif文の使い分けのポイント

  • 単純な2分岐であればifを使う
  • 3分岐以上であればswitchを使う

switch文を使うことで嬉しいことといえば、

分岐が多い処理になったとしてもコードが見やすくメンテンスがしやすいということです。

if〜else文が多くなってしまって管理しにくい場合は,switch文で書けるかを検討したほうが良いでしょう。

また、実行速度という点では、多分岐の場合は、switchのほうが早いとされています。

Udemyおすすめ講座

はじめてのJavaScriptプログラミング入門

はじめてのJavaScriptプログラミング入門

4.4(2,092 件の評価)

14,766 人の受験生

作成者: 中村 祐太 Yuta Nakamura(ウェブ開発, 生成AI, ChatGPT, AWS)
Proglus (プログラス)(プログラミング入門)

JSを基礎から学習してUI/UXに優れた動的なウェブアプリケーション開発ができる初心者向けコース。jQueryを使わないJavaScriptのコーディングが学習できます。

\無料でプレビューをチェック!/

講座を見てみる

評価:★★★★★
jsの入門としては期待以上のものでした。
コードの解説もしっかりしてくれていました。
また途中に演習問題が入っているのもかなり助かりました。

評価:★★★★★
静的テキストを見て勉強してきたことも動画で見ると、脳の違う回路で再確認出来、記憶が強化される気がします。また、自分が実際に手を動かして入力するプロセスでも安心感を持って実行出来るのも良いところです。