プログラミング言語JavaScriptのSwitch文について、JavaScript初心者向けに解説します。
Web開発経験のある筆者がJavaScriptのSwitch文の書き方や使い方、if文との違いについて丁寧に解説していきます。
ぜひ最後まで読んで、Switch文の基本を理解してください！
公開日：2017年8月24日
＼文字より動画で学びたいあなたへ／
Udemyで講座を探す ＞INDEX
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は、必ずしも最後に来る必要はありません。)
＼文字より動画で学びたいあなたへ／
Udemyで講座を探す ＞JavaScript switch~caseの具体例（string）
次のサンプルコード１は、英単語を翻訳するプログラムです。
指定された英単語と該当するものがあれば、翻訳した結果を返します。
変数「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 |
//サンプルコード２の実行結果 残念はずれです。 |
今回指定された4の数字は、case1〜3のどれにも当てはまりませんので、
default部分が実行されています。
この様に、数字の値によって出力を変更することができました。
JavaScript switch~caseとif文の使い分けとは？
if文でも条件分岐ができますが、使い分けのポイントについて考えてみましょう。
switch~caseとif文の使い分けのポイント
- 単純な２分岐であればifを使う
- 3分岐以上であればswitchを使う
switch文を使うことで嬉しいことといえば、
分岐が多い処理になったとしてもコードが見やすくメンテンスがしやすいということです。
if〜else文が多くなってしまって管理しにくい場合は,switch文で書けるかを検討したほうが良いでしょう。
また、実行速度という点では、多分岐の場合は、switchのほうが早いとされています。
はじめてのJavaScriptプログラミング入門
JSを基礎から学習してUI/UXに優れた動的なウェブアプリケーション開発ができる初心者向けコース。jQueryを使わないJavaScriptのコーディングが学習できます。
＼無料でプレビューをチェック！／
講座を見てみる評価：★★★★★
jsの入門としては期待以上のものでした。
コードの解説もしっかりしてくれていました。
また途中に演習問題が入っているのもかなり助かりました。
評価：★★★★★
静的テキストを見て勉強してきたことも動画で見ると、脳の違う回路で再確認出来、記憶が強化される気がします。また、自分が実際に手を動かして入力するプロセスでも安心感を持って実行出来るのも良いところです。
RANKING
RECOMMENDED COURSE
最新情報・キャンペーン情報発信中