処理を分岐させるswitch文について

みなさまどうも。いかがお過ごしでしょうか。

続きまして『switch文』(すうぃっちぶん)というのを勉強していきましょう。

こちら『if文』とちょっと似ている感じで分岐処理を行うものです。『if文』では基本的に2通りずつ分岐処理をさせていくものでしたが『switch文』では同時に多数の分岐処理をさせていくことができます。

ただし、使用頻度はあまり高くありません。『if文』はめちゃめちゃ使いますが『switch文』はそれほど、といった感じです。構文が少し特殊でややこしいのですが忘れちゃったら検索する、くらいのノリで大丈夫かもしれません。

というわけで進めていきたいと思います。

基本的な構文はこのようになります。

var num = 1;

switch(num){
    case 1:
        alert("1です！");
        break;
    case 2:
        alert("2です！");
        break;
    case 3:
        alert("3です！");
        break;
    default:
        alert("defaultです！");
        break;
}

ご覧のとおり構文がややこしいです。一つ一つみていきましょう。

まず変数『num』を宣言し、そこには『1』が代入されています。

続いて『switch』と書いてありますね、これは『if文』でいうところの『if』にあたるところです。『switch文』なので『switch』になりますね。

そして次に『()』があります。ここに評価させたい変数などを入れます。今回は『num』になりますね。

そして『{}』を書き、その中に『case』と記述し、半角スペースをあけて『１』と記述し、さらに『:』を入力します。

これは『()』の中に書いてある変数『num』の中身が『1』だった場合に『:』以降の処理を実行せよ、といった命令になります。

なので今回は『alert("1です！");』と『break;』が実行されます。

続く『case 2』というのも同じような感じで、変数『num』が『2』ならば『:』以降の処理を実行せよ、といった命令になります。

最後に書いてある『default』という記述ですが、これはその前の『case』での評価がすべて成立しなかった場合に実行されます。

例えばこうしてみましょう。

var num = 4;

switch(num){
    case 1:
        alert("1です！");
        break;
    case 2:
        alert("2です！");
        break;
    case 3:
        alert("3です！");
        break;
    default:
        alert("defaultです！");
        break;
}

変数『num』の値を『4』にしてみました。『case』で指定された値に『4』がありません。なので上記の場合は『default』の処理である、『alert("defaultです！");』と『break;』が実行されるはずですね。以下にサンプルを用意したのでクリックしてみてください。

ここをクリック

いかがでしょうか。『default』の処理が実行されましたかと思います。

さて、先程からちょいちょい出てきている『break』(ぶれいく)ってやつですが、これは『break文』と呼ばれ『処理を抜けなさい』といった命令になります。

実は『swith文』において『break文』が存在しない場合は『case』で評価された記述よりその先の処理をずっと実行していってしまいます。

ちょっと実験してみましょう。

var num = 1;

switch(num){
    case 1:
        alert("1です！");

    case 2:
        alert("2です！");

    case 3:
        alert("3です！");

    default:
        alert("defaultです！");
        break;
}

先ほどの記述で『break文』をいくつか抜いてみました。今の変数『num』の値は『1』です。

これを実行してみると

ここをクリック

『case 1:』よりも先の処理がすべて実行されましたね。『break文』をいれないとこのような挙動をみせます。

ちなみに『break文』を入れない、というような『switch文』のパターンはまず構築されることはありません。なので『switch文』を使うときは『break文』もセットで記述する、と丸暗記しちゃってもOKです。

さてではちょっと応用技です。『文字列』なども比較する要素として組み込むことができます。

var num = "hoge";

switch(num){
    case "hoge":
        alert("hogeです！");
        break;
    case 2:
        alert("2です！");
        break;
    case 3:
        alert("3です！");
        break;
    default:
        alert("defaultです！");
        break;
}

変数『num』には『"hoge"』という文字列が入っていますね。『case "hoge":』と記述されていますので、これはその後に続く『alert("hogeです！");』と『break;』が実行されます。以下をクリックしてみてください。

ここをクリック

いかがでしょうか。ちゃんと『alert("hogeです！");』が実行されましたでしょうか。

さて、『switch文』はちょっと構文がややこしいので慣れないと頭がこんがらがってしまうかもしれません。なのでちょっとif文に変換して考えてみましょう。

『switch文』の『()』の中と『case』に続く値に注目します。『()』の中が変数『num』で『case』に『1』が記述されていた場合、if文に変換するとこういった記述になります。

if(num === 1){
    // この処理が実行される。
}

このように考えると多少分かりやすくなるかと思います。

そして『switch文』での比較は『厳密な比較』です。『==』ではなく『===』です。『型』もちゃんと同じであるかどうかチェックした上での比較を行っています。

なので以下で実行される処理は『default』となります。

var num = "1";

switch(num){
    case 1:
        alert("hogeです！");
        break;
    case 2:
        alert("2です！");
        break;
    case 3:
        alert("3です！");
        break;
    default:
        alert("defaultです！");
        break;
}

試してみたい方はここをクリック

変数『num』の値は文字列としての『1』が入っています。これは数値の『1』ではありません。

なので上記の文では文字列としての『1』が『case』に組み込まれていませんので『default』の処理が実行される、といった感じです。

以上となりますがいかがでしたでしょうか？ちょっと構文が特殊なのでややこしいところもありますが、基本的な考え方としてはそこまで複雑ではないのでコツを掴んでしまえばスラスラと書けるようになるかと思います。

続いての記事では『for文』というのを勉強していきましょう。『if文』に続いてかなり使用頻度の高い構文です。

引き続き頑張っていきましょうね。ではではー。