【JavaScript入門】switch文の使い方とswitch文とifの違い・使い分け

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptの switch-文と if-文の違いと使い分けについて解説していきます。

1 switch-文の使い方とif-文との違い
2 switch-文とbreak-文・reutrn-文
3 複数の値に対して同じ処理を実行するswitch-文
4 switch-文で値の判定関数を作成するSample-Code
5 JavaScript書籍 Ver. 中級-上級者向け
6 JavaScript書籍 Ver. 初級者向け
7 参考・引用
8 最近の投稿

switch-文の使い方とif-文との違い

条件分岐には、「if-文」と「switch-文」の2種類があります。

if文は、上から順番に条件を判定していき、条件が合致したら合致したif-文内の「指定の処理」を実行します。

if-文では、どれかの条件に合致するとそれ以降の条件判定は行いません。

また、if-文では複雑な条件パターンを記述することができるのが、if-文の特徴です。

なので、複雑な条件判定をしたい場合は、if-文が向いています！

それに対して、switch文は、Dataの値をCheckして、値のcase・patternに応じた特定の処理を実行するといった条件分岐ができます。

1つのDataに対して、多くの比較値(case・pattern)で条件分岐する場合は、if文よりもswitch文の方が適しています！

switch-文の基本的な使い方と特徴は、次のとおりです。

switch-文の基本的な使い方と特徴

[ switch-文の基本構文 ]

switch (式) {
    case 値1:
        // 式の評価結果が値1と一致する場合に実行する処理;
        console.log('この後の break-文で処理が終わる！');
        break;
    case 値2:
        // 式の評価結果が値2と一致する場合に実行する処理;
        return 'return-文で処理が終わる！';
    default:
        // 式がどのcaseにも一致しない場合に実行する処理;
        console.log('default-処理は最後の処理なので、break-文を書く必要はない！');
}

[ switch-文の使い方と特徴 ]

1. switch-文は、1つ以上の case-文と任意で default-文を記述します。

2. switch-文は、式の評価結果に基づいて、case-文で条件分岐を行います。

3. 対象の値を上から順に、case-文と比較・照合していきます。

4. break-文 か return-文 を記述しないと、処理がそれ以降も実行されてしまうので注意する必要があります。

5. default-文は、どの case-文にも一致しない最後の処理なので、break-文を書く必要はありません。

それでは実際にSample-Codeを見ていきましょう。

< switch-文の基本的な使い方 >

let city = 'Maebasi';

// 1. switch() の()内に、評価-targetとなる「値(value)」を渡す！
switch(city) {
    case 'Takasaki':
        console.log('グンマー帝国の実質的な首都(裏ボス)です！');
        break;
    case 'Maebasi':  // 2. 「case: 'Maebase'」が今回渡した値と一致する！
        console.log('グンマー帝国の首都です！');
        break;  // 3. break-文があるので、ここで処理が終わる！
    case 'Kiryu': 
        console.log('グンマー帝国とトチギー公国の最前線です！');
        break;
    case 'Oota': 
        console.log('グンマー帝国とサイタマー共和国の最前線です！');
        break;
    default:
        console.log('その他の都市です');
}

// < 実行結果 >
// グンマー帝国の首都です！

上記のようにシンプルな「値」(value)が複数ある時に、その「値」(value)に応じて実行処理を変化させたい時に、switch-文は、向いています。

switch-文とbreak-文・reutrn-文

switch-文の基本的な使い方と特徴として、 break-文か return-文を記述しないと、処理がそれ以降も実行されてしまうので注意する必要があると記述しました。

この点は、switch-文を使用する際の一番、注意しなければいけない点なので、実際にCodeで確認していきましょう。

< switch-文 Ver. break-文や return-文を記述しなかった場合 >


let city2 = 'Kiryu';

switch(city2) {
    case 'Takasaki':
        console.log('グンマー帝国の実質的な首都(裏ボス)です！');
        // break文なし
    case 'Maebasi':
        console.log('グンマー帝国の首都です！');
        // break文なし
    case 'Kiryu': 
        console.log('グンマー帝国とトチギー公国の最前線です！');
        // break文なし
    case 'Oota': 
        console.log('グンマー帝国とサイタマー共和国の最前線です！');
        // break文なし
    default:
        console.log('その他の都市です');
}


// < 実行結果 >
// グンマー帝国とトチギー公国の最前線です！
// グンマー帝国とサイタマー共和国の最前線です！
// その他の都市です

// => break-文やreturn-文で処理のStopがされずに、switch-文の最後まで処理が進んでしまった、、、

次に、ちゃんと break-文か return-文を使用しているパターンを見てみましょう。

// < switch-文 Ver. ちゃんと break-文 か return-文 を使用する >

// 0. 判定したいcity-Array
const cityArray = ['Takasaki', 'Oota', 'Sinjyku', 'Kiryu', 'Maebasi'];

const cityChecker = (val)=> {

    console.log({val});
    switch(val) {

        // 1. case 'Takasaki' と case 'Maebasi'は、return-文
        case 'Takasaki':
            return 'グンマー帝国の実質的な首都(裏ボス)です！';
        case 'Maebasi':
            return 'グンマー帝国の首都です！';

        // 2. case 'Kiryu' と case 'Oota'は、break-文
        case 'Kiryu': 
            console.log('グンマー帝国とトチギー公国の最前線です！');
            break;
        case 'Oota': 
            console.log('グンマー帝国とサイタマー共和国の最前線です！');
            break;
        
        // 3. default-文は、return-文
        default:
            return 'その他の都市です！';
    }
};

cityArray.forEach((city, index) => {
    console.log(`City判定${index+1}回目`);
    const checkResult = cityChecker(city);
    checkResult ? console.log(checkResult): false;
    console.log('');
});

// < 実行結果 >
// City判定1回目
// {val: 'Takasaki'}
// グンマー帝国の実質的な首都(裏ボス)です！

// City判定2回目
// {val: 'Oota'}
// グンマー帝国とサイタマー共和国の最前線です！

// City判定3回目
// {val: 'Sinjyku'}
// その他の都市です！

// City判定4回目
// {val: 'Kiryu'}
// グンマー帝国とトチギー公国の最前線です！

// City判定5回目
// {val: 'Maebasi'}
// グンマー帝国の首都です！

複数の値に対して同じ処理を実行するswitch-文

switch-文で、複数の値(case)に対して同じ処理を実行する場合は、次のように case-文を重ねて記述することができます。

// < switch-文 Ver.複数の値に対して同じ処理を実行する >

const selectValueList = ['ロボ玉', 'ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機', 'グンマー帝国', '埼玉'];

const selectCheck = (selectVal) => {

    switch (selectVal) {

        // 1. 複数の値に対して同じ処理を実行したい場合、case-文を重ねて記述することができる！
        case 'ロボ玉': 
        case 'ロボ玉試作1号機': 
        case 'ロボ玉試作2号機': 
        case 'ロボ玉試作3号機': 
            console.log(`あなたが選んだのは、${selectVal}!`);
            break;
        case 'グンマー帝国': 
            console.log('グンマー帝国、万歳！！！');
            break;
        default:
            console.log('翔んで埼玉！！！');
    }
}

selectValueList.forEach(val => selectCheck(val));

// < 実行結果 >
// あなたが選んだのは、ロボ玉!
// あなたが選んだのは、ロボ玉試作1号機!
// あなたが選んだのは、ロボ玉試作2号機!
// あなたが選んだのは、ロボ玉試作3号機!
// グンマー帝国、万歳！！！
// 翔んで埼玉！！！

switch-文で値の判定関数を作成するSample-Code

より実践的な形だと、switch-文を関数化して、特定の値(value)に対して特定の値を返したり、特定の値(value)に対して特定の処理を実行したり・関数を呼び出したりと言う形式が多いです。

次に掲載するSampleは、特定の値(value)に対して特定の値を返却するSwitch-FunctionのSample-Codeです。

// < switch-文で判定関数を作る >

const projectList = [
    { value: 'ロボ玉', from: 'グンマー帝国', like: 'ひまたね' },
    { value: 'ロボ玉試作1号機', from: 'グンマー帝国', like: 'ひまたね' },
    { value: '白桃', from: 'Tokyo', like: 'マグロ' },
    { value: 'ロボ玉試作2号機',  from: 'グンマー帝国', like: 'ひまたね' },
    { value: 'ぽむ',  from: '埼玉ー共和国', like: 'ビーフジャーキー' },
    { value: 'ももちゃん', from: 'Tokyo', like: 'マグロ' },
    { value: 'ロボ玉試作3号機', from: 'グンマー帝国', like: 'ひまたね' },
];

// 1. ProjctのGroupを判定する Switch-Function
const projectGroupJudge = (project) => {
    const v = project.value;
    switch (v){
        case 'ロボ玉':
        case 'ロボ玉試作1号機':
        case 'ロボ玉試作2号機':
        case 'ロボ玉試作3号機':
            return 'ロボ玉開発計画';
        case '白桃':
        case 'ももちゃん':
            return 'ねこねこプロジェクト';
        default:
            return 'その他のプロジェクト';
      }
}

// 2. project_groupを掲載した新しいListを作成
const projectGroupList = projectList.map(project => {
    const project_group = projectJudge(project);
    return {value: project.value, project_group };
});

console.log({projectGroupList});
// < 出力結果 >
// projectGroupList: Array(7)
    // 0: {value: 'ロボ玉', project_group: 'ロボ玉開発計画'}
    // 1: {value: 'ロボ玉試作1号機', project_group: 'ロボ玉開発計画'}
    // 2: {value: '白桃', project_group: 'ねこねこプロジェクト'}
    // 3: {value: 'ロボ玉試作2号機', project_group: 'ロボ玉開発計画'}
    // 4: {value: 'ぽむ', project_group: 'その他のプロジェクト'}
    // 5: {value: 'ももちゃん', project_group: 'ねこねこプロジェクト'}
    // 6: {value: 'ロボ玉試作3号機', project_group: 'ロボ玉開発計画'}
    // length: 7