2022/09/04 (更新日:2024/07/11)

【JavaScript】switch文の使い方【分かりやすい】

Categories > JavaScriptの基本編

JavaScriptにおけるswitch文の書き方が知りたい。

この記事では、JavaScriptにおけるswitch文の使い方について解説します。

switch文を使うことで、条件分岐の処理を書くことが可能です。

switch文を上手く使うことで、よりきれいなプログラムが書けるようになるので、どんどん使って下さい！

では、内容へ入ります！

switch文とは？

JavaScriptにはswitch文というものがあり、それを使うことで、条件分岐処理を書くことが可能です！

switch文を使うと、与えた式を評価した値が「どのcaseに当てはまるか？」によって、条件分岐した処理が書けます。

なぜswitch文は便利か

まず、具体的な書き方の前に、「なぜswitch文は便利なのか？」について解説します。

コードが読みやすくなるから

JavaScriptのif文を使っても、同じような条件分岐の処理が書けます。

ですが、switch文を使うことで、「可読性が上がる」というメリットがあります。

if文よりも一瞬で何をしてるか把握しやすいですね。

switch文があったら、「何かをcaseに当てはめて一致した処理が実行される」ので、それがすぐに分かります。

メンテナンス性が上がるから

switch文で書かれたプログラムは「そこで何をしているか」分かりやすいので、「リファクタリング」も当然しやすくなります。

そして、綺麗で見やすいコードを書くことで、「ミスを減らすことに繋がる」と思います。

具体的なswitch文の書き方。

switch ( 評価される式 ) {
    case 値1:
        // 評価される式と値1が等しい時に実行される部分
        break; //switch文を止める
    case 値2:
        // 評価される式と値2が等しい時に実行される部分
        break; //switch文を止める
    case 値3:
        // 評価される式と値3が等しい時に実行される部分
        break; //switch文を止める
}

まず、「 () の中に任意の式」を与えます。これは、単純な文字列でも数値でもOKです。計算式の場合はそれが計算されます。

それが、「 case の右側に書かれた値と比較」されます。

そして、「 caseと初めて一致した個所」から「break」までのコードが実行されます。

これによって、与えた式と一致する箇所に書かれたコード「だけ」を実行させることが可能なので、「条件分岐処理ができる！」という訳ですね。とても便利です。

switch文は、様々な場面で使えそうで、とても面白いですよね。

では、もう少し詳しく解説しますね。

caseは何個でも置くことができる

let num = 4
switch ( num ) {
    case 1:
        console.log( "1です。" );
        break;
    case 2:
        console.log( "2です。" );
        break;
    case 3:
        console.log( "3です。" );
        break;
    case 4:
        console.log( "4です。" );
        break;
    case 5:
        console.log( "5です。" );
        break;
}

この様に、caseは何個でも追加してもOKです。

厳密等価演算子で比較される

switch ( 評価される式 ) {
    case 値1:
        // 評価される式と値1が等しい時に実行される部分
        break; //switch文を止める
    case 値2:
        // 評価される式と値2が等しい時に実行される部分
        break; //switch文を止める
    case 値3:
        // 評価される式と値3が等しい時に実行される部分
        break; //switch文を止める
}

「与えられた式」と「それぞれの値」が比較される時には、「=== 厳密等価演算子」が使われます。

なので、「string型の 1 」と「number型の 1 」は区別されるので注意しましょう。

このことをしっかり理解するには、JavaScriptの「データ型に関する知識」が必要なので、下記の記事をお読み下さい。

【JavaScript】データ型について解説。【分かりやすい】

breakを置く

switch文では、「与えられた式」と「caseの値」が「一致した個所から全て」が実行されます。

なので「break;」を置いてswitch文を止めてあげないと、意図した挙動が得られなくなることもあります。

これに関しては具体例を提示しますね。

let num = 3;
switch ( num ) {
    case 1:
        console.log( "1です。" );
    case 2:
        console.log( "2です。" );
    case 3:
        console.log( "3です。" );
    case 4:
        console.log( "4です。" );
    case 5:
        console.log( "5です。" );
}

// 3です。
// 4です。
// 5です。

この様に、switch文を書くと、「与えられた式 num」は「3」なので、3番目のcaseと一致します。

そのcaseからswitch文のコードは「break;」で止めてあげない限りすべて実行されるので、「3です。」と「4です。」と「5です。」が実行されています。

なので、「一致したcaseの箇所だけのコード」を実行させたい場合は、しっかり「break;」で区切ることで、switch文を止めてあげる必要があります。

ですが意図的に「break;」を置かないことで、この挙動を利用するのはOKです！

breakの代わりにreturnを置く

let num = 30;
function getAge() {
    switch ( num ) {
        case 10:
            return "10歳です。";
        case 20:
            return "20歳です。";
        case 30:
            return "30歳です。";
        case 40:
            return "40歳です。";
    }
}
console.log( getAge() );

//30歳です。

この様に、「return」を使うことで、関数の実行を終了させることができるので、その場合は「break;」は置かなくてもOKです！

defaultを置くこともできる

どのcaseの値にも一致しない式がswitch文に与えられた場合、「default」の箇所が実行されます。

※「default」は省略可能なので、「どのcaseにも一致しない場合は何もしたくない」時には、書かなくてOKです。

let num = 8;
switch ( num ) {
    case 1:
        console.log( "1です。" );
        break;
    case 2:
        console.log( "2です。" );
        break;
    case 3:
        console.log( "3です。" );
        break;
    case 4:
        console.log( "4です。" );
        break;
    case 5:
        console.log( "5です。" );
        break;
    default: 
        console.log( "1～5以外です。" );
        break;
}

//1～5以外です。

defaultはどこでにでも置ける

let num = 8;
switch ( num ) {
    case 1:
        console.log( "1です。" );
        break;
    case 2:
        console.log( "2です。" );
        break;
    default: 
        console.log( "1～5以外です。" );
        break;
    case 3:
        console.log( "3です。" );
        break;
    case 4:
        console.log( "4です。" );
        break;
    case 5:
        console.log( "5です。" );
        break;
}

//1～5以外です。

「default」はどこにでも置くことが可能です。

1番上に置いても、caseとcaseの間に置いてもOKです。

先にcaseとの比較が行われて、全ての比較が終わっても、どれにも一致していない場合に「default」との比較が行われるためです。

default は一つしか置けない

「default」はswitch文で1つしか置けないので注意しましょう。

エラーがでてしまいます。

複数のcaseを同時に適用

let num = 3;
switch ( num ) {
    case 1:
        console.log( "1です。" );
        break;
    case 2:
        console.log( "2です。" );
        break;
    case 3:
    case 4:
        console.log( "3か4です。" );
        break;
    case 5:
        console.log( "5です。" );
        break;
    default: 
        console.log( "1～5以外です。" );
        break;
}

//3か4です。

switch文では、caseと一致してから「break;」までのコードが実行されるので、それを利用して、この様に、複数のcaseの値に対して同じ処理させるのを簡潔に記述することができます。

この書き方はよく使われるので、ぜひ覚えておきましょう！

if文を使って書き換えることができる。

JavaScriptのswitch文は、if文を使っても全く同じことができます。

let num = 4;
switch ( num ) {
    case 1:
        console.log( "1です。" );
        break;
    case 2:
        console.log( "2です。" );
        break;
    case 3:
        console.log( "3です。" );
        break;
    case 4:
        console.log( "4です。" );
        break;
    case 5:
        console.log( "5です。" );
        break;
    default: 
        console.log( "1～5以外です。" );
        break;
}

// "4です。"

上のコードは下のコードで書き換えることが可能です。

if文を使いました。

let num = 4;
if ( num === 1 ) {
    console.log( "1です。" );
} else if (  num === 2 ) {
    console.log( "2です。" );
} else if (  num === 3 ) {
    console.log( "3です。" );
} else if (  num === 4 ) {
    console.log( "4です。" );
} else if (  num === 5 ) {
    console.log( "5です。" );
} else {
    console.log( "1～5以外です。" );
}

// "4です。"

if文を使うか、switch文を使うか

上の２つの例をみると、switch文の方が「何をしているのか」が把握しやすいと思います。(個人的に)

与えたものに対して、一致するものがあれば、「それによって処理を分けたい」というような場面ではswitch文の方が簡潔に分かりやすくコードが書けるんじゃないかな、と思います。

後は、いろいろなコードを読んで、そこら辺のテクニックを少しづつ学んでいけばOkだと思います。

僕も日々その辺を学習しています！

まとめ

JavaScriptでは、switch文を使うことで、条件分岐の処理が記述できる。

()の中に与えた式を評価した値と、caseの値を「=== 厳密等価演算子」によって比較して、一致した箇所から「break;」まで全てが実行される。(「break;」がない場合は、switch文の最後まで全て実行される。)

caseは何個でも追加可能。

defaultは一個だけ追加できる。(省略可能)

最後まで読んでくれてありがとうございました！

僕自身これからもプログラミングの勉強を楽しんでいくので、皆さんも一緒に頑張りましょう！

よければTwitterで絡んで下さい！

ではでは！