JavaScriptの条件分岐:switch文

JavaScriptの条件を判定する文にはifやelseを使った書き方がありますが、判定する条件が多い場合にはswitch文を使うこともできます。

switch文の書き方

switch(変数){
    case 条件1:
        // 条件1に一致する場合の処理;
        break;
    case 条件2:
        // 条件2に一致する場合の処理;
        break;
    case 条件3:
        // 条件3に一致する場合の処理;
        break;
         .
         .
         .
    default:
        // それ以外の場合の処理
        break;
}

switch文の書き方は、switchの横にある()の中に判定したい式や変数を記入、{} の中にはcase条件で判定したい条件と、条件に一致した場合に行われる処理を記入、case〜breakまでが1つの処理です。 ()に入力した式や変数がどの条件にも当てはまらない場合はdefault式で書きます。

ifやelse,else ifを使った場合

まずはswitch文で書く書き方ではなく、if文の書き方を見てみましょう。

var animal = "dog";
if (animal == "cat"){
    console.log("猫です。");
}else if (animal == "dog"){
    console.log("犬です。");
}else if(animal == "rabbit"){
    console.log("うさぎです。");
}else if(animal == "mouse"){
    console.log("ネズミです。");
}else if(animal == "lion"){
    console.log("ライオンです。");
}else{
    console.log("動物ではありません。");
}

// 実行結果:犬です。

ifやelse ifを使った書き方でも書くことができますが、判定したい条件が多いので、switch文のほうがコードを書く量を少なくすることができます。

switch文の場合

では先ほどのコードをswitch文で書き直してみます。

var animal = "dog";
switch(animal){
    case "cat":
        console.log("猫です。");
        break;
    case "dog":
        console.log("犬です。");
        break;
    case "rabbit":
        console.log("うさぎです。");
        break;
    case "mouse":
         console.log("ネズミです。");
        break;
    case "lion":
        console.log("ライオンです。");
        break;
    default:
        console.log("動物ではありません。");
        break;
}

 // 実行結果:犬です。

switch文にするとコードの行数自体は増えてしまいましたが、いちいちanimal == といった式を書かずに、case で書くことができるので見た目をスッキリさせることができます。
見た目をスッキリさせるとエラーを発見しやすいので、switch文も活用してみてください。


イベント

2017/12/05(火)
Design Thinking Square