ITコラム

JavaScript

2017.09.28

JavaScript【 switch 】～複数の選択肢を持つ条件分岐

条件式の評価が true か false で処理が分かれるのがif文ですが、switch文を使用すると、評価が A、B、C、…と多数存在する場合でも対応することが出来ます。
今回は、条件分岐の中でこのような構造を持つswitch文を紹介します。

１．switch 文とは

switch文は、if文と同様に条件分岐の１つです。

trueかfalseかに分かれるif文と違って、switch文は、１か２か３か…のように、１つの条件に対して、多数の処理内容に分けることができます。

多数の処理内容に分岐したい場合でも、そのほとんどがif文で実現可能ですが、switch文を使うと、１つの条件で対応出来るため、if文よりもスマートで分かりやすいプログラムとなります。

switch文は、次のように記述します。

switch ( 条件 ) {
　　case 値1:
　　　　条件の評価が値１の場合の処理内容
　　　　break;
　　case 値2:
　　　　条件の評価が値２の場合の処理内容
　　　　break;
　　case 値3:
　　　　条件の評価が値３の場合の処理内容
　　　　break;
　　default:
　　　　条件の評価がどれにも該当しない場合の処理内容
　　　　break;
}

「switch ( 条件 )」の条件は、条件式の他、変数を記述することもできます。
実際には、変数を記述する場合が圧倒的に多いです。

条件式又は変数の評価として、複数の値とその場合の処理内容を記述します。

そして、各処理内容の最後に、必ず「break;」を記述します。
この break は、現在実行している一連の処理から抜ける際に使われるキーワードですが、switch文は、break で処理内容を完結させる形で記述します。

「default」は、条件の評価がどれにも該当しない場合に実行する処理内容です。
必要に応じて書いても書かなくてもどちらでも構いません。

▲目次へ戻る

２．switch 文の使い方

次のサンプルは、入力されたデータに紐付いたテキストを表示するプログラムです。
実際に試してみて下さい。

　
ソースは次の通りです。

<script type="text/javascript">
<!--
function judge() {
    var blood = document.sample.dat.value.replace(/[Ａ-Ｚａ-ｚ]/g, function(s) {return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);}).toLowerCase();

    switch (blood) {
        case "a" :
            alert("徳川家康、夏目漱石、手塚治虫 と同じです！");
            break;
        case "o" :
            alert("北野武、木村拓哉、ジョン・レノン と同じです！");
            break;
        case "b" :
            alert("イチロー、ピカソ、アインシュタイン と同じです！");
            break;
        case "ab" :
            alert("キリスト、レオナルド・ダ・ビンチ、明智光秀 と同じです！");
            break;
        default :
            alert("血液型分類はナンセンスですね！");
            break;
    }
}
//-->
</script>

<div style="background-color : #CCC; width:450px; padding : 20px;">
    <form name="sample">
        血液型を入力してOKボタンをクリックして下さい！　
        <div style="display:inline-flex">
            <input type="text" name="dat" style="ime-mode:disabled;">
            <input type="button" value="OK" onClick="judge()">
        </div>
    </form>
</div>

このサンプルコードでは、switch文で条件分岐する処理を、judge()というユーザ定義関数に記述しています。

そして、ＯＫボタンをクリックすると、イベントハンドラのonClickによって、judge()が呼び出される仕組みです。

judge()の中で、画面から入力されたデータを「document.sample.dat.value」として取得して、変数bloodに代入した後、switch文で条件分岐しています。

この「document.sample.dat.value」の後に、長々と「.replace(/[Ａ-Ｚａ-ｚ]/g, function(s) {return String.fromCharCode(s.charCodeAt(0) – 0xFEE0);}).toLowerCase();」が付いていますが、この中の「.replace(/[Ａ-Ｚａ-ｚ]/g, function(s) {return String.fromCharCode(s.charCodeAt(0) – 0xFEE0);})」の部分で、全角のアルファベットを半角に変換する処理を行い、「.toLowerCase()」で、大文字を小文字に変換する処理を行っています。
switch文自体には直接関係ありませんが、想定できる入力方法に可能な限り対応するという視点はとても大切です。

そして、条件としての変数bloodの値によって、処理内容であるアラートの表示内容が決定するという流れです。
　
ちなみに、上のサンプルをif文で記述すると、次のようになります。

<script type="text/javascript">
<!--
function judge() {
    var blood = document.sample.dat.value.replace(/[Ａ-Ｚａ-ｚ]/g, function(s) {return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);}).toLowerCase();

    if (blood == "a") {
        alert("徳川家康、夏目漱石、手塚治虫 と同じです！");
    } else if (blood == "o") {
        alert("北野武、木村拓哉、ジョン・レノン と同じです！");
    } else if (blood == "b") {
        alert("イチロー、ピカソ、アインシュタイン と同じです！");
    } else if (blood == "ab") {
        alert("キリスト、レオナルド・ダ・ビンチ、明智光秀 と同じです！");
    } else {
        alert("血液型分類はナンセンスですね！");
    }
}
//-->
</script>

<div style="background-color : #CCC; width:450px; padding : 20px;">
    <form name="sample">
        血液型を入力してOKボタンをクリックして下さい！　
        <div style="display:inline-flex">
            <input type="text" name="dat" style="ime-mode:disabled;">
            <input type="button" value="OK" onClick="judge()">
        </div>
    </form>
</div>

条件式が多いと、ソースコードを読み込むのに時間がかかるため、保守の面からも、条件を１つにまとめられる場合はswitch文で記述した方が良いです。

▲目次へ戻る