- システム開発
- 2017/08/24
JavaScriptのswitch〜caseの基礎が例で誰でも即わかる!
プログラミング言語JavaScriptのSwitch文について、JavaScript初心者向けに解説します。
Web開発経験のある筆者がJavaScriptのSwitch文の書き方や使い方、if文との違いについて丁寧に解説していきます。
ぜひ最後まで読んで、Switch文の基本を理解してください!
JavaScript switch~caseの書き方
条件分岐「もし~だったら~してほしい」といった処理では、if文、switch文が使えます。
今回はswitch文の書き方を見ていきましょう。
switch文の構文は以下の通りです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
switch(変数){ case 値A: //変数の値が値Aの時実行される。 処理A break; //処理Aが終わったらSwitch文から抜ける。 case 値B: //変数の値が値Bの時、実行される。 処理B break; //処理Bが終わったらSwitch文から抜ける。 case 値C: //変数の値が値Cの時、実行される。 処理C break; //処理Cが終わったらSwitch文から抜ける。 ・・・・ default : //変数の値が上記の条件に当てはまらない時、実行される。 デフォルト処理 break; //デフォルト処理が終わったらSwitch文から抜ける。 } |
この構文により、「もし、値Aだったとき、処理Aを実行しなさい。」
B,Cも同様、「もし、A〜Cに該当しない場合、デフォルトの処理を実行しなさい」が実現できます。
break・・・処理のループから抜けます。switch文,for文,while文などのループから強制的に抜けたい時に使用します。
意図的にbreak文を書かないフェイルスルーという処理もあります。
ただし、意図的にbreak文を書いていないのかわかりにくく、
エラーの温床となりやすいため、基本的にはbreak文を書くようにこころがけましょう。
default・・・どれにも該当しない場合に、実行します(defaultは、必ずしも最後に来る必要はありません。)
JavaScript switch~caseの具体例(string)
次のサンプルコード1は、英単語を翻訳するプログラムです。
指定された英単語と該当するものがあれば、翻訳した結果を返します。
変数「data」で文字列を受け取り、case句の値とマッチするものがあればその結果を返します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//サンプルコード1 var data = "banana"; switch(data){ case "banana": //「data」が「banana」の時実行する。 console.log("バナナ"); break; case "apple": //「data」が「apple」の時実行する。 console.log("リンゴ"); break; case "peach"://「data」が「peach」の時実行する。 console.log("モモ"); break; default: //上該のすべてのCASEに当てはまらないときに実行する。 console.log("該当するものがありません。"); break; } |
1 2 |
//サンプルコード1の実行結果 バナナ |
dataで「banana」が指定され、出力に「バナナ」という翻訳結果がでています。
JavaScript switch~caseの具体例(int)
先ほどの例ではString(文字列)での例でしたが、それ以外に数値(int)も利用することができます。
それでは、サンプルコード2を見てみましょう。
次のサンプルコード2では、受け取ったdataの数値によって、
何等賞の当りか、ハズレかを判定しています。
「1のとき一等賞」「2のとき二等賞」「3のとき三等賞」「それ以外のとき、ハズレ」 となります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//サンプルコード2 var data = 4; switch(data){ case 1: //dataが「1」のとき実行する console.log("一等賞"); break; case 2: //dataが「2」のとき実行する console.log("二等賞"); break; case 3: //dataが「3」のとき実行する console.log("三等賞"); break; default: //すべてのケースに当てはまらないときに実行する console.log("残念はずれです。"); break; } |
1 2 |
//サンプルコード2の実行結果 残念はずれです。 |
今回指定された4の数字は、case1〜3のどれにも当てはまりませんので、
default部分が実行されています。
この様に、数字の値によって出力を変更することができました。
JavaScript switch~caseとif文の使い分けとは?
if文でも条件分岐ができますが、使い分けのポイントについて考えてみましょう。
switch~caseとif文の使い分けのポイント
- 単純な2分岐であればifを使う
- 3分岐以上であればswitchを使う
switch文を使うことで嬉しいことといえば、
分岐が多い処理になったとしてもコードが見やすくメンテンスがしやすいということです。
if〜else文が多くなってしまって管理しにくい場合は,switch文で書けるかを検討したほうが良いでしょう。
また、実行速度という点では、多分岐の場合は、switchのほうが早いとされています。
エンジニアに役立つ目的別講座
Pythonの基本~応用をマスター
現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル
現役シリコンバレーエンジニアが教えるPython入門講座。Python3の基本を取得できます。
Webサイトのコーディングができるように
ウェブ開発入門完全攻略コース - プログラミング をはじめて学び創れる人へ!未経験から現場で使える開発スキルを習得!
HTML, CSS, Bootstrap, JavaScript, MySQL, Ruby, Ruby on Rails, AWS Cloud9, Git, GitHubを用いたWebアプリケーション開発の方法を総合的に学べます。
AWSを基礎から学ぶ
これだけでOK! AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座(SAA-C02試験対応版)
AWSの基本資格「AWS 認定ソリューションアーキテクト – アソシエイト試験」を合格を目指し、そのための知識や経験を獲得できるように!
ITプロジェクトの資料作成はお任せ!
手を動かして学ぶITプロジェクトの資料作成!システム開発のドキュメンテーション技術と成果物テンプレート
ITプロジェクトの資料作成を学べる人気講座。フェーズ毎に、どんな資料を作ればいいのか悩んでいる人におすすめ。
関連記事

PHP switch~caseが具体例で初心者でも即わかる!if文との違いも
今回はプログラミング言語PHPのswitch文(switch~case)につい…

C# switch~caseが初心者でも必ずわかる!if文との違いも紹介
プログラミング言語C#におけるswitch文について、C#初心者向け…

簡単!JavaScript for文の基礎が即わかる!breakとcontinueの違いとは?
プログラミング言語JavaScriptのfor文について、Web開発経験の…

JavaScriptのwhile文が誰でもわかる!初心者が知りたい情報満載!
プログラミング言語JavaScriptのwhile文について、JavaScript初…
最新情報・キャンペーン情報発信中