現役プログラマーによるJavaScript奮闘記11!~switch文ってなんじゃろ編~

前回はif文について記載しました。

今回も引き続きよくつかう文の紹介をしていきます。
一度に書き方まで全部覚える必要はなく、「あぁ、こんな事できるんだ」ということを知ることが目的です。

前回のif文であれば
「条件によって処理を分けたいときはif文っていうのを使えばいいんだ」程度の認識でいいと思います。
で使うタイミングで、自分のブログを見直してくれたらうれしいですし、Googleで
[JavaScript if文]と検索すれば書き方はすぐにわかります。

というわけでその文がなんて名前でどういった風に使えるのかをざっくり知っておくと良いです。
もちろん一度読んだり書いたら覚えられてしまうという猛者は覚えてしまってください。

■switch-case文

これも前回のif文同様に条件によって処理を変えることができるものです。

書き方としては


switch (式) {
case 式:
  文;
  文;
  ・・・
case 式:
  文;
  文;
  ・・・
case 式:
  文;
  文;
  ・・・
default:
  文
  ・・・
}

のように書きます。

初めの「switch(式)」の式の部分とそれぞれの「case 式」の部分を同値比較(===)し、
該当する場合に直下の文を実行するという式です。
どれにも該当しない場合、defaultの内容が実行されます。defaultは省略可能です。

例で見たほうが早いですね。
すっごい単純な例です


var val = 2;

switch (val){
case 1:
   document.write("入力値は1です");
   break;
case 2:
   document.write("入力値は2です");
   break;
case 3:
   document.write("入力値は3です");
   break;
defaul:
   document.write("入力値は4以上です");
   break;
}

この場合、「switch(val)」のvalである2とそれぞれのcaseの後ろの数字と比較していきます。
今回はcase 2:に該当するので「入力値は2です」が出力されます。

このときの注意として、それぞれのcaseのところにあるbreakの書き忘れに注意してください。

というのもbreakを書かないと該当した箇所以下の全部の文が実行されてしまいます。

上の例で

var val = 2;

switch (val){
case 1:
   document.write("入力値は1です");
case 2:
   document.write("入力値は2です");
case 3:
   document.write("入力値は3です");
defaul:
   document.write("入力値は4以上です");
}

としてしまった場合、該当するcase 2:以降の文、つまり
入力値は2です
入力値は3です
入力値は4以上です
が出力されてしまいます。

こういった出力をしたい場合もなくはないので、必ずbreakを書かないといけないというわけではないですが、基本的に該当するcaseの内容のみを実行するということが多いと思います。
初めのうちは良くやりがちなことなので、気をつけましょう。

ここまで読んできてなんとなくif文とelseに似ているのでは?と思った人は正解です。

基本的にif文で書けることはswitch-case文でも書くことができます。
主に見た目の問題ですかね。
if(val === 1)
の「 === 1」この部分を書かなくていいので若干すっきりしますかね?好みの問題な気も。。。

2点注意があります。

1点目。
if文とswitch文は同じ一つの条件分岐の中で組み合わせないほうがいいです。
めちゃくちゃ可読性が落ちます。読みづらくなるってことですね。

余計な混乱はさせないほうがいいです。

例えばさっき書いたcase文とこれは判定する内容は同じですが、こんなの読みづらくて仕方が無いです。


var val = 2;

switch (val){
case 1:
   document.write("入力値は1です");
   break;
case 2:
   document.write("入力値は2です");
   break;
defaul:
   if(val === 3){
      document.write("入力値は3です");
   } else {
      document.write("入力値は4以上です");
   }
   break;
}

簡単に書けることは簡単に書きましょう。

2点目はswitch-case文の同値比較は===演算されます。==演算ではないです。
この演算子については文の説明が終わったタイミングでどこかで記載します。

なんのこっちゃかも知れないですが、JavaScriptの同値演算の==と===は地味だけど結構大きな違いがあるので、
知っておくとバグが少ないシステムを組むことができるようになります。

とりあえず今はswitch-case文の同値演算は===(=が3つ)で比較されるんだと知っておきましょう。

今回はswitch-case文についてでした。

次回からは繰り返し文の色々をざーっと書いていきます。

コメント

タイトルとURLをコピーしました