最新！JavaScript入門講座ー条件分岐switch文をわかりやすく解説

条件分岐をするときは、基本的にif文を使うことがまず考えられます。しかし、if文は複雑になってくるとネストが深くなったり、{}(かっこ)などを使うので多く使いすぎるとわかりにくくなってしまうという欠点もあります。

JavaScriptにif文の他もswitch文という別の条件分岐のための文があります。今回は、そのswitch文について初心者の方向けにわかりやすく解説していきます。

switch文の解説

switch文の概要

switch文はif文と同じく、条件分岐によって実行する処理を変えることができる機能です。ifと基本的には同じになりますが、文法が全く違います。

switch文の書き方は上記のようになります。
if文などとはかなり書き方が異なることがわかるかと思います。if文やネストを使ったときは{},()(カッコ)を多用していましたが、switch文はカッコの代わりに、予約語である、caseとコロンを使います。

if文との使い分けのコツ

switch文はif文と基本的に同じ機能ですが、初心者の方にとってはこう思われる方もいるのではないかと思います。
「switchなんてどの場面で使えばいいのか」
「全部if文でいいでしょ」

なので、ここではswitch文を使うためのコツを解説していきます。
if文よりもswitch文を使った方がよい場面

• PCゲームのWASD移動の処理
• 特定のキーボードを押した時の処理
• 特定の文字列を受け取った時の処理

このように、条件式で特定の値だけと合致した時にしたい、といった時にswitch文を使った方が便利です。

breakはその時点で、処理を抜ける命令をする文です。これはあってもなくても大丈夫です。ですが、基本的には記述します。

switch文を使った例

では、swtich文を使った例をいくつかみていきましょう。まずはスタンダードな例です。

let char = "S";

switch(char){
    case "W":
        console.log("前に進みます");
        break;
    case "A":
        console.log("左に動きます");
        break;
    case "S":
        console.log("後ろに後退します");
        break;
    case "D":
        console.log("右に動きます");
        break;
    default:
}

$ node switch.js

後ろに後退します

実行すると、このようになります。
これは、文字がどの値かで処理を分けています。このサンプルでは4つのみを条件分岐に指定しています。それ以外の場合では何も処理を実行しないようにしています。

このサンプルはとても簡単な構造ではありますが、よくあるゲームの十字キー操作などはこういったロジックでやっているのですね。

次のサンプルをみていきましょう。

let ticker = "GOOGL";

switch(ticker){
    case "APPL":
        console.log(`${ticker}は米国の企業、Apple inc.です`);
        break;
    case "AMZN":
        console.log(`${ticker}は米国の企業、Amazon inc.です`);
        break;
    case "FB":
        console.log(`${ticker}は米国の企業、Facebook inc.です`);
        break;
    case "GOOGL":
        console.log(`${ticker}は米国の企業、Google inc.です`);
        break;
    default:
        console.log("その他の企業です");
}

$ node switch.js

GOOGLは米国の企業、Google inc.です

実行するとこのようになります。
今回は、指定されている４つ以外の文字列を入力すると、処理をするような形です。

次は、breakを使わなかったらどのような挙動をするのか、みてみましょう。

let ticker = "AMZN";

switch(ticker){
    case "APPL":
        console.log(`${ticker}は米国の企業、Apple inc.です`);
    case "AMZN":
        console.log(`${ticker}は米国の企業、Amazon inc.です`);
    case "FB":
        console.log(`${ticker}は米国の企業、Facebook inc.です`);
    case "GOOGL":
        console.log(`${ticker}は米国の企業、Google inc.です`);
    default:
        console.log("その他の企業です");
}

$ node switch.js

AMZNは米国の企業、Amazon inc.です
AMZNは米国の企業、Facebook inc.です
AMZNは米国の企業、Google inc.です
その他の企業です

break文を記述しなかった場合、実行するとこのようになります。
このサンプルの場合、”AMZN”で一致するので、処理が実行されますが、その後breakによる処理の終了がないのでそのまま実行され続けていきます。

では、最後に意図的にberak文を使わないサンプルを見ていきましょう。

let ticker = "GOOG";

switch(ticker){
    case "APPL":
        console.log(`${ticker}は米国の企業、Apple inc.です`);
        break;
    case "AMZN":
        console.log(`${ticker}は米国の企業、Amazon inc.です`);
        break;
    case "FB":
        console.log(`${ticker}は米国の企業、Facebook inc.です`);
        break;
    case "GOOGL":
    case "GOOG":
        console.log(`${ticker}は米国の企業、Google inc.です`);
        break;
    default:
        console.log("その他の企業です");
}

$ node switch.js

GOOGは米国の企業、Google inc.です

サンプルを実行すると、このようになります。
“GOOGL”と”GOOG”の間にはbreakを使わず、どちらが来ても同じ処理が実行されるようになっています。こういった、値が異なっていても、同様の処理をさせたい時などに意図的にbreakを使わないという方法も存在します。

まとめ

では、今回のまとめに入りましょう。
今回は次のようなことを学びました。

では今回はここまでとなります。お疲れ様でした。

参考文献

ループと反復処理 - JavaScript | MDN

ループは繰り返し何かを実行するための簡便な方法を提供します。本章では JavaScript で利用可能な反復処理を行う数々の文を紹介します。

developer.mozilla.org

JavaScript Primer - 迷わないための入門書

JavaScript Primerは、JavaScriptの基礎から応用までを一貫して学べる入門書です。

jsprimer.net

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/

www.freecodecamp.org