deve.K

エンジニアが未来を切り開く。

JavaScript Switch…case文 条件式と複数 【return】

javascriptのSwitch…case文

このチュートリアルでは、switch...case文を使用して、JavaScriptで一致する結果に基づいてさまざまな値を持つ式を評価する方法を学習します。

Switch…case文とは

switch文は基本的なコーディングパターンであり、ほぼすべての言語でサポートされています。

switch…case文は、if...else文の代替であり、似たようなことを行います。

switch文では、一致するものが見つかるまで一連の値に対して変数または式をテストし、次にその一致に対応するコードのブロックを実行します。

そして、式の値を大文字と小文字を区別して照合します。

一致するケースのコードを実行するか、一致するものが見つからない場合はオプションであるdefaultコードを実行します。

switch (expression) {
    case value1:
// expression === value1の式の値が一致する場合ここで実行
        break;

   case value2:
// expression === value2の式の値が一致する場合ここで実行

        break;

    default:
   //一致されない場合は下記で実行される
}

switch文は、厳密な等式演算子( === )を使用してcase値と比較されます、比較された各条件を順番に評価します。

ではそれぞれを分解して、それぞれが何をするのかを理解していきましょう。

switch文は『switch』キーワードで始まります。

その後に括弧( )となります。

この括弧内に、swith構造によって評価される式または変数を指定していきます。

switch (expression) {
    case value:
}

次に2つの波括弧{ }を使用し、コードブロックを開始し、これらの波括弧内には、それぞれ各caseを指定する場所がある事になります。

条件はcaseキーワードを使用して定義されます。

値が一致した場合、JavaScriptは指定されたcaseに移行されます。

等価性チェックは常に厳密であることを強調するようにしましょう。

厳密に一致させるには、値が同じタイプである必要があります。

同じ値のcaseが2つある場合に関しては、JavaScript最初のcaseを選択します。

そしてcaseの下に、任意でコードを記述していきます。

switch (expression) {
    case value1:

        break;

    case value2:

        break;

}

JavaScriptが次のcaseに移行されるのを防ぐには、『break』キーワードを使用してコードブロックを終了する必要があります。

breakを使用しない場合は、プログラムがbreakまたは構造体の末尾の波括弧}に到達するまで、後続のすべてのcaseが実行されます。

JavaScriptのSwitch文では『case』の代わりとしてdefaultのキーワードをサポートしています。

switch (expression) {
  case value:
   break;

  default:
    console.log("比較がfalseで実行");
   break;

}

defaultキーワードは、他のすべての比較で『 false 』が返された場合に実行されます。

通常、switch文の下部にありますが、必須ではございません。

注意点は、defaultキーワードがswitch文の下部でない場合は、最後に必ずbreakを追加してください。

Switch文の実行フロー

下記では、『Apple』と『case "Apple":』を一致させるSwitch文を実行し出力します。

const fruits = "Apple";

switch (fruits) {
    case "Banana":
console.log("This is a banana.");
    break;

    case "Apple":
console.log("We got apples."); 
//りんごを手に入れた。
    break;

    case "strawberry":
console.log("This is a strawberry.");

    break;
    default:
console.log("This is a fruit that is not on the list!");
//これはリストにない果物です。
    break;
}

See the Pen JavaScript Switch by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.


fruits変数の値を、他の値に変更してみると、下記のように出力されます。

const fruits = "Grape";

// output: This is a fruit that is not on the list!

これは、JavaScriptがSwitchの構造内で見つからなかったため、『default:』の場合にフォールバックしたためとなります。

別の例でも見てみましょう。

下記では、現在の曜日を表示する例となります。

today変数に new Date()を割り当ててから、最初のcaseが入力式の結果と同じ値に評価されるかどうかを厳密な等式( === )でチェックします。

let today = new Date();
    
switch(today.getDay()) {
    case 0:
        alert("今日は日曜日(Sunday)");
        break;
    case 1:
        alert("今日は月曜日(Monday)");
        break;
    case 2:
        alert("今日は火曜日(Tuesday)");
        break;
    case 3:
        alert("今日は水曜日(Wednesday)");
        break;
    case 4:
        alert("今日は木曜日(Thursday)");
        break;
    case 5:
        alert("今日は金曜日(Friday)");
        break;
    case 6:
        alert("今日は土曜日(Saturday)");
        break;   
    default:
        alert("当日の予定はございません");
        break;
}

See the Pen JavaScript Switch 2 by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.


caseが一致した場合、caseに関連付けられたコードは、breakキーワードまたはreturn関数内のキーワードが見つかるまで実行されます。

let today = new Date();

new Date()は指定した日時を表す日付オブジェクトを生成しますが、日時の指定を省略し引数を空にした場合は、現在の日時となります。

switch(today.getDay()) {}

getDay()メソッドは、 現地に基づき指定された日付けの曜日を0〜6の数値を返しますが、日曜日は0となります。

データや日付けメソッドの詳しい詳細はJavaScript MDN(JP)のデータリファレンスを参照してください。

For more information on JavaScript date and time methods, see the Date reference on the Mozilla Developer Network (US).

ブール値を使用して、数値スコアを取得し文字に変換する評価アプリで見てみましょう。

スコアの点数が90以上で『amazing』それ以下の点数はA〜Cの『great』になります。

50より下の点数、つまりどの式(変数)にも一致しない場合はdefaultで『Wow』となります。

const score = 81;

switch (true) {

    case score >= 90:
        console.log("amazing!!");
        break;

    case score >= 80:
        console.log("great A");
        break;

    case score >= 70:
        console.log("great B");
        break;

    case score >= 50:
        console.log("great C");
        break;

    default:
        console.log("Wow");
}

上記はcaseと評価されたものがすべてtrueで一致することを意味しています。

switchは上から下に評価されていき、最初の真の一致が受け入れられます。

最初に真で一致されるのは、『great A』となります。

See the Pen JavaScript Switch return and break by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

JavaScript Switchの複数でのcase

先述の例では、式ごとに1つのcaseを使用し、式ごとに出力が異なります。

ですが、複数のcaseで同じ出力が得られるようにするにはどうすればよいでしょうか?。

それを見ていきましょう。

const fruits_name = "Melon";

switch (fruits_name) {
    case "Apple":
console.log("The price of this apple is $◯◯");
//このリンゴの値段は◯◯円です
        break;
    case "Banana":
console.log("The price of this banana is $◯◯");
//このバナナの値段は◯◯円です
        break;
    case "Lemon":
    case "Grape":
    case "Melon":
console.log("The price of this fruits is $◯◯");
//この果物の値段は◯◯円です
        break;
    case "Strawberry":
console.log("The price of this strawberry is $◯◯");
//このイチゴの値段は◯◯円
        break;
    default:
console.log("This fruit is not on the list.");
//この果物はリストにありません。
}

See the Pen JavaScript Switch 複数 case by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.


fruits_nameに等しい変数で実行すると下記のように出力します。

The price of this fruits is $◯◯
//この果物の値段は◯◯円です

プログラムは『Melon』がcaseとしてリストされていることを検出し、関連するブロックでコードを実行しています。

    case "Lemon":
    case "Grape":
    case "Melon":
console.log("The price of this fruits is $◯◯");
//この果物の値段は◯◯円です
        break;

価格はそれぞれ、あなたの設定に変更しログに出力してみて下さい。

fruits_nameに等しくない場合は、Switch式の最後に到達し、defaultが実行されます。

default:
console.log("This fruit is not on the list.");
//この果物はリストにありません。

returnを使用する

まず、下記は単純なreturnとなります。

function myFunc(option) 
{
    switch (option) 
    {
        case 1: return "One";
        case 2: return "Two";
        case 3: return "Three";

        default: return "default";
    }    
}

console.log(myFunc(1)) //One

console.log(myFunc(2)) //Two

console.log(myFunc(3)) //Three

console.log(myFunc()) //default

See the Pen JavaScript Switch return by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.


returnで返すと、実行中の関数は呼び出し関数によって制御されます。

呼び出し後、実行中の関数に表示されるとすぐに実行が行われ、関数が呼び出されると、returnは値を返します。

下記では、それぞれの国の都市を文字列で返します。

const getCountryCity = () => {

const city = "Tokyo";
switch (city) {
   case "New York":
   return "New York City is one of the three largest cities in the U.S.";
//ニューヨークはアメリカの三大都市の一つです。

   case "Tokyo":
   return "Tokyo is the capital city of Japan";
//東京は日本の首都です。

   case "London":
   return "London is the capital city of England";
//ロンドンはイングランドの首都です。

   default:
    return "Cannot find which country this city is the capital of.";
//この都市がどの国の首都なのかがわからない。
    }
};

console.log(getCountryCity())

See the Pen JavaScript Switch return 2 by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.


式(変数)がswitchの各caseとcityで照合されます。

caseが変数の結果と一致した場合、caseが実行されます。

上記で実行されるのは『 case "Tokyo": 』となっています。

即時関数で呼び出して使用する事も可能です。

const x = (() => {
  switch(1) {
    default: return console.log("OK"); 
// output: OK
  }
})();

breakを使用すると、関数の処理を続行できます。

break を使用して切り替え

function getItem(item) {
  let price;
  switch(item) {
    case 'banana':
      price = '10$';
      //約1300円
      break;
      
    case 'strawberry':
      price = '20$';
     //約2700円
      
    case 'Lemon':
      price = '30$';
     //約4000円
      break;
      
    default:
      price = "Item not in stock";
      //商品の在庫がない
  }
  return price;
}

console.log(getItem('banana')); 
// 10$

console.log(getItem("apple"));
// Item not in stock

See the Pen JavaScript Switch return and break by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.


先述でも言いましたが、必ずbreakを使用し各caseを終了するかまたは正しく機能している場合はreturnを使用して下さい。

この2つのキーワードに遭遇するまで、すべてのcaseが実行されます。

論理演算子を使用する

JavaScriptで複数の値を使用するには、switchの場合では論理演算子のOR、AND演算子を使用する必要があります。

下記は論理演算子である、OR( || )条件とAND( && )条件を使用しています。

trueの場合はcaseブロックを実行します。

let num1 = 2;
let num2 = 2;

switch(true) {
 case num1 === 1 || num2 === 1:
   console.log('First');
   break;

 case num1 === 2 && num2 === 2:
    console.log('Second');
    break;

  case num1 === 1 ||  num2 === 2:
    console.log('Third');
    break;

    default:
    console.log('None');

    }

// output: Second

出力はAND( && )の『Second』となっています。

ADN( && )条件には、両方の条件が真(true)である必要があります。

num1とnum2の両方は同じ値である数値の2で、厳密でさらに2を、式に論理積のANDによってcaseが実行されています。

2つの変数numの値を1にして出力すると、式に論理和のOR条件によって評価されたcaseとして実行されます。

let num1 = 1;
let num2 = 1;

// output: First

if…elseとの違い

JavaScriptの初心者の場合、特にif…else文とswitch…case文の間で、どの条件を使用するかについて混乱する可能性があります。

JavaScriptのswitchは、コンパイラーがコンパイル時にSwitch…caseのジャンプテーブルを生成するため、比較的高速に動作致します。

したがって、コードが実行されると、どのcaseが満たされているかをチェックする代わりに、どのcaseを実行するかを決定するだけです。

if…else文は条件の結果がブール値です。

また条件は複雑であり、複数の論理演算子を持った条件があります。

switch…case文は、式(変数)には複数の選択肢があります。

条件は、列挙型、定数、タイプなどの事前定義された値のセットに基づいています。

読みやすさ、理解しやすさ、変更可能性に基づいてif…else文を使用するのか、またはswitch文を使用するかを決定していく必要があります。

どれがどのシナリオに適しているかを理解し始めるには多くの練習が必要です。

なぜswitch文が必要なのかは、前述した通りif…else文では条件プログラムの複雑さが増す事です。

開発者はswitch文を利用して、複雑なif…else文を置き換えることができます。

if…elseの置き換えだけでなく、switch文では、大きなステートメントデバッグするのが非常に難しい場合があります。

switch文を使用する代わりに、オブジェクトリテラルとしてswitchの機能を複製、つまり置き換える事ができます。

ですが、switch文またはそれに対応するオブジェクトリテラルを作成する機会に出くわすことはあまりない気がします。

いずれチュートリアル記事を書きます。

最後に

どちらの条件を使用していくかは、混乱するかもしれません。

ですが、練習を重ねるほど良くなっていきます。

すべてのケースで特定の解決策が必要ですが、正しい答えも間違った答えもございません。

あなたの経験に基づいて適切なソリューションを選択するのはあなた次第となります。

この記事では、一致する結果に基づいてさまざまな値を評価して表現し、出力する条件付きのswitch文を学習しました。

本日は以上となります。

最後までこの記事を読んで頂きありがとうございます。

プライバシーポリシー