Tips

JavaScriptでSwitchが動かないときに備えて仕組みを理解しよう

  • このエントリーをはてなブックマークに追加

「JavaScriptでSwitch文が思ったように動かない」
「Switchって習うけどイマイチ使い方が分かっていない」
「Reduxになって初めてSwitch文を知る事になって焦った」

なんてことは多くあると思います。

僕もReduxを触るまでSwitchについて理解していませんでしたし、正直いってコーディングくらいの作業では使うシーンすらありませんでした。

とはいえ使うとなったときには結構ややこしいものなので、今のうちに理解しておこうと思い復習してみましたので共有です。

すでに使用していてエラーに困っている方にもヒントがあるかもしれません。

また動画の方が見やすいという方はYoutubeからどうぞ

JavaScriptにおけるSwitch文の書き方

書き方は以下の通りです。

const myFruit = "りんご";

switch (myFruit){
  case "りんご":
    console.log("りんご");
    break;
  case "みかん":
    console.log("みかん");
    break;
  default:
    console.log("その他");
    break;
}; // 「りんご」と出力される

簡単にいうと条件分岐のようなことを実行してくれるのがSwitch文です。

上記では「myFruit」に入る文字によって出力内容が変わるようになっています。

最終的に「りんご」とコンソールで出力されます。

書き方の注意としてはcaseの場所は「:」で終わる事です。

JavaScriptは「;」で終わるのがお作法になっていますが、caseの末尾は「:」になります。

こちら間違えると正しく動作しませんので注意してください。

breakは何をしているのか

Switchには「breake」という役割が存在します。

こちらは対象のcaseでコードを終了させるか、を見ています。

const myFruit = "りんご";

switch (myFruit){
  case "りんご":
    console.log("りんご");
  case "みかん":
    console.log("みかん");
    break;
  default:
    console.log("その他");
    break;
}; //「りんご」「みかん」と出力される

上記では「りんご」の部分にあった「break」を削除してみました。

そうすると「りんご」は変わらず出力されるのですが、「みかん」まで続けて出力されます。

このようにコードをどこで止めるかを握っているのが「break」です。

条件に該当していなくても「break」が無かった場合には、後に書かれたものも実行されます。

「breakをすべてに書くか」というのは状況によります。

純粋な条件分岐のような扱いにしたいときには全てのcaseに「break」を付けることが多いです。

一方であえて「break」を外した方が良いケースもあるので、お手元のコードで実行しながら適した書き方をしてみてください。

defaultの役割

「default」は例外処理とも呼ばれ、「どのcaseにも当てはまらなかったとき」に実行されるための部分です。

「default」は必須ではないのですが、プログラムは基本的に例外処理を想定することが多いので結果的に書くことになるでしょう。

const myFruit = "ぶどう";

switch (myFruit){
  case "りんご":
    console.log("りんご");
    break;
  case "みかん":
    console.log("みかん");
    break;
  default:
    console.log("その他");
    break;
}; // 「その他」と出力される

上記では「ぶどう」という存在しないcaseになってしまうので、「その他」が出力されることになっています。

Switch文に限らず例外処理は常に意識しておくと良いでしょう。

JavaScriptのSwitchにおける不等号は注意

とても大事なお話を最後にします。

Switch文では不等号が厳密に判定されます。

まずは例を書きます。

const myValue = "100";

switch (myValue){
  case 100:
    console.log("true");
    break;
  default:
    console.log("false");
    break;
};

上記の場合、「default」の部分が実行されます。

「case 100」については「数字の100」となっており、1行目は「文字の100」なので該当しないためです。

上記のコードは一般的なif文を使って以下のように書くこともできます。

const myValue = "100";

if(myValue == 100){
  console.log("true");
}else{
  console.log("false");
};

よく見慣れた書き方ですね。

ただ上記だと条件に該当することになります。

この違いはJavaScriptにおける不等号の性質を理解する必要があります。

JavaScriptの不等号には「==」「===」の2種類があります。

学習教材やYoutubeでも見かけるはずです。

僕も最初は同じものだと思っていましたが、ぜんぜん違うものであることはエラーにハマるまで気づきませんでした。

2つの不等号の違いは以下の通りです。

// == の場合
let val = "100";
console.log(val == 100); // trueとなる

// === の場合
let val = "100";
console.log(val === 100); // falseとなる

いかがでしょうか。

文字列と数字を見分けられるか、が違いになっています。

「==」は文字列で書かれた数字を「自動的に数字に変換」することを行っています。

「===」は文字列で書かれた数字はそのまま文字列として見ます。

そのため似たようなコードでも結果が変わってくるのです。

少し脱線しましたがJavaScriptにおけるSwitchでは裏側で「===」を取り入れた動作になっています。

そのため文字列と数字はキッチリ分けて考える必要があります。

普通のif文だと「==」で書いておけば文字列も数字に変換してくれるので、今の話を知っておかないと後でハマることになります。

ちなみに「==と===のどちらが良いのか?」については、僕は「===」の方が良いと考えています。

予期せぬエラーを1個防げるからです。

「==」はたしかに便利かもしれませんが、例外処理とは別にユーザーの挙動を2パターン想定する必要があるので例外処理にも該当しないエラーになる可能性があります。

「===」にしておいて、該当しないものは全て例外処理で事前に組んでおけばエラーの発生は少しばかり減らせることになります。

Switch文の使いどころ

「ちなみにSwitchって使うの?」となった方がいるかもしれません。

Switchを使うことでメリットが出るのは条件が増えたケースです。

2つのパターンを比較してみましょう。

const myFruit = "ぶどう";

switch (myFruit){
  case "りんご":
    console.log("りんご");
    break;
  case "みかん":
    console.log("みかん");
    break;
 case "ぶどう":
    console.log("ぶどう");
    break;
 case "いちご":
    console.log("いちご");
    break;
 case "びわ":
    console.log("びわ");
    break;
  default:
    console.log("その他");
    break;
};
const myFruit = "ぶどう";

if(myFruit === "りんご"){
  console.log("りんご");
}else if(myFruit === "みかん"){
  console.log("みかん");
}else if(myFruit === "ぶどう"){
  console.log("ぶどう");
}else if(myFruit === "いちご"){
  console.log("いちご");
}else if(myFruit === "びわ"){
  console.log("びわ");
}else{
  console.log("その他");
}

コードの量はそこまで変わりませんが、見やすさはSwitchの方ですね。

条件が増える場合にはSwitchを積極的に使っていきましょう。

  • このエントリーをはてなブックマークに追加

コメントを残す

*