JavaScriptのSwitch文チュートリアル：条件に基づく値の評価と結果の取り扱い方

このチュートリアルでは、JavaScriptでSwitch...case文を使用して、式を評価する際に一致する結果に基づいて、異なる値を取り扱う方法を学ぶことができます。

この記事を読むことで、条件分岐とSwitch文の理解が深まり、プログラミングスキルが向上することでしょう。

Switch…case文とは

Switch文は、多くのプログラミング言語でサポートされている基本的な制御構造の1つです。

Switch文は、if...else文と同様の機能を提供し、指定された式または変数を一連の値と比較し、一致する値に対応するブロックを実行します。

JavaScriptでは、大文字と小文字を区別して比較されます。

以下は、Switch文の基本的な構造です

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

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

        break;

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

Switch文は、次のように動作します。

・ Switch文が開始されると、指定された式または変数を評価します。

・ 次に、最初のcaseラベルが評価されます。

・ caseラベルの値が指定された式または変数の値と厳密に等しい場合、そのcaseブロック内のコードが実行されます。

・ 実行が完了したら、Switch文のブロックを終了します。

Switch文では、条件を定義するためにcaseキーワードを使用し、等価性チェックは常に厳密であることに注意してください。

breakがない場合、条件に一致するすべてのcaseブロックが実行されます。

これをフォールスルーと呼びます。

同じ値のcaseが複数ある場合は、最初のものが選択されます。

Switch文のcaseブロックは、必ず「break」キーワードで終了する必要があります。

これは、Switch文でフォールスルーが発生しないようにするためであり、フォールスルーが発生すると、複数のcaseブロックが実行される可能性があります。

defaultキーワードを使用して、他のすべての条件に一致しなかい場合に、Switch文にdefaultブロックを追加することができます。

このdefaultブロックは、どのcaseブロックにも一致しなかった場合に実行されます。

これらのポイントは、Switch文を理解する上で非常に役立ちます。

プログラムのロジックをスッキリと表現するためにSwitch文をうまく活用できるようになると良いでしょう。

次のステップからコード例を元に解説していきます。

Switch文の実行フロー

以下の例では、fruits変数が"Apple"に設定されているため、Switch文は"Apple"のcaseを実行します。

そのため、"We got apples."というメッセージが表示されます。

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変数の値が"Apple"以外の値に変更された場合、Switch文は条件式に一致するcaseを探します。

条件式に一致するcaseが見つからない場合、defaultが実行されます。

例えば、fruits変数を"Grape"に変更すると、defaultが実行されて、"This is a fruit that is not on the list!"というメッセージが表示されます。

const fruits = "Grape";

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

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

以上のように、Switch文は、多数の条件分岐を処理するために使用される柔軟な制御構造です。

Switch文を使うことで、複雑な条件分岐のロジックをシンプルに記述できます。

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

以下は、現在の曜日を表示するためのJavaScriptコードの説明です。

まず、今日の日付を表す「Date」オブジェクトを生成します。

これは、次のようになります。

let today = new Date();

次に、Switch文を使用して、getDay()メソッドを呼び出して曜日を取得し、それに対応する曜日名を表示します。

   
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.

JavaScriptを使用すると、現在の日付の曜日を表示することができます。

日付オブジェクトを作成し、その日の曜日を取得するために、getDay()メソッドを使用します。

getDay()メソッドは、現在のローカル時刻に基づいて、指定された日付の曜日を0から6の数値で返します。

これにより、Switch文が正しい曜日名を表示するための正しいcase文を選択します。

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

これにより、現在の曜日が表示されます。

以下は、JavaScriptのSwitch文を使用した、数値スコアを評価し文字列に変換するアプリです。

このアプリはブール値を使用して評価され、スコアに対して該当する条件に基づいて、適切な文字列が表示されます。

// スコアを定義する
const score = 81;

// Switch文を使用して、スコアを評価し、対応する文字列を表示する
switch (true) {

// スコアが90以上の場合、"amazing!!"と表示する
    case score >= 90:
        console.log("amazing!!");
        break;

// スコアが80以上の場合、"great A"と表示する
    case score >= 80:
        console.log("great A");
        break;

// スコアが70以上の場合、"great B"と表示する
    case score >= 70:
        console.log("great B");
        break;

// スコアが50以上の場合、"great C"と表示する
    case score >= 50:
        console.log("great C");
        break;

// スコアが50未満の場合、"Wow"と表示する
    default:
        console.log("Wow");
}

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

この、Switch文では、最初に評価された条件が真である場合、その条件に対応するブロックが実行されます。

スコアが81である場合、最初に評価される条件は"score >= 90"であり、この条件は偽となるため、次の条件である"score >= 80"が評価されます。

この"score >= 80"条件は真であり、従って"great A"が表示されます。

複数の値を1つのcaseでまとめる方法

以下は、JavaScriptのSwitch文を使用して果物の価格を出力するコード例です。

const fruits_name = "Melon";

switch (fruits_name) {
  case "Apple":
    console.log("このリンゴの値段は$◯◯です");
    break;
  case "Banana":
    console.log("このバナナの値段は$◯◯です");
    break;
  case "Lemon":
    console.log("このレモンの値段は$◯◯です");
    break;
  case "Grape":
    console.log("このぶどうの値段は$◯◯です");
    break;
  case "Melon":
    console.log("このメロンの値段は$◯◯です");
    break;
  case "Strawberry":
    console.log("このイチゴの値段は$◯◯です");
    break;
  default:
    console.log("この果物はリストにありません");
}

このコードでは、Switch文を使用して果物名によって価格を出力しています。

果物名によって、それぞれのcaseで異なる処理を実行します。

例えば"lemon", "grape", "melon"の価格が同じ場合、これらの果物を1つのcaseでまとめることができます。

つまり、上記の場合、"Lemon", "Grape", "Melon"の価格が同じである場合、コードを繰り返すことになります。

複数の値を1つのcaseでまとめるには以下のようにします。

// 変数に果物名を代入
const fruits_name = "Melon";

// Switch文で果物名によって分岐する
switch (fruits_name) {
  // "Apple"の場合の処理
  case "Apple":
    console.log("このリンゴの値段は$◯◯です");
    break;
  // "Banana"の場合の処理
  case "Banana":
    console.log("このバナナの値段は$◯◯です");
    break;
  // "Lemon", "Grape", "Melon"の場合の処理
  case "Lemon":
  case "Grape":
  case "Melon":
    console.log("これらの果物の値段は$◯◯です");
    break;
  // "Strawberry"の場合の処理
  case "Strawberry":
    console.log("このイチゴの値段は$◯◯です");
    break;
  // 上記のいずれにも当てはまらない場合の処理
  default:
    console.log("この果物はリストにありません");
}

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

これにより、"lemon", "grape", "melon"の価格が同じ場合、1つのcaseでまとめることができ、よりシンプルなコードになります。

また、defaultの処理も変わらず、指定した果物名以外の場合には、defaultの処理が実行されます。

このように、Switch文を使用することで、複数の条件に対する処理をシンプルにまとめることができます。

価格などの処理はそれぞれの果物に合わせて個別に設定することができます。

上記のコード例には果物の価格が実際に設定されていないため、実行しても出力される値がありません。

価格を設定するには、各果物の名前に対応する値段を変数に代入する必要があります。

例えば、以下のようにします。

const fruits_price = {
"Apple": 100,
"Banana": 50,
"Lemon": 80,
"Grape": 120,
"Melon": 150,
"Strawberry": 200
};

上記のコードでは、果物の名前に対応する価格をオブジェクトとして定義しています。

各果物の名前をキー、価格を値として設定しています。

このオブジェクトを利用して、各果物の価格を出力することができます。

以下に、各果物の価格を出力するコード例を示します。

const fruits_name = "melon";

switch (fruits_name) {
case "apple":
console.log(この${fruits_name}の値段は$${fruits_price["Apple"]}です);
break;
case "banana":
console.log(この${fruits_name}の値段は$${fruits_price["Banana"]}です);
break;
case "lemon":
case "grape":
case "melon":
console.log(この${fruits_name}の値段は$${fruits_price[fruits_name.charAt(0).toUpperCase() + fruits_name.slice(1)]}です);
break;
case "strawberry":
console.log(この${fruits_name}の値段は$${fruits_price["Strawberry"]}です);
break;
default:
console.log("この果物はリストにありません");
}

テンプレートリテラルを使用して、果物の名前に対応する価格をオブジェクトから取得して、それをコンソールに出力する場合は、以下のようになります。

const fruits_name = "melon";

console.log(この${fruits_name}の値段は$${fruits_price[fruits_name.charAt(0).toUpperCase() + fruits_name.slice(1)]}です);

上記のコードでは、テンプレートリテラルを使用して、${ }内に変数や式を埋め込むことができます。

また、オブジェクトから値を取得する場合は、オブジェクト名とキー名を[]で囲んで指定します。

fruits_nameをキー名とする場合、fruits_price[fruits_name]と指定することで値を取得できます。

ただし、fruits_nameが大文字で始まる場合は、キー名に合わせて大文字に変換する必要があるため、charAt(0).toUpperCase() + fruits_name.slice(1)という式でキー名を生成しています。

Switch文を使う際には、同じ処理をする複数の条件を1つのcaseでまとめることで、よりスッキリとしたコードを書くことができることを覚えておくと良いでしょう。

関数の戻り値とreturn文の重要性

Switch文内でreturn文を使用すると、Switch文を含む関数が呼び出された際に、そのSwitch文内で該当するcase文に応じて直ちに値が返されます。

そして、その関数は呼び出し元の関数に制御が戻ります。

function myFunc(option) {
  switch (option) {
    case 1:
      return "One"; // optionが1の場合、"One"を返す
    case 2:
      return "Two"; // optionが2の場合、"Two"を返す
    case 3:
      return "Three"; // optionが3の場合、"Three"を返す
    default:
      return "default"; // optionが1, 2, 3以外の場合、"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.

上記のコードでは、myFunc関数が呼び出された際に、引数optionの値に応じて、Switch文内で該当するcase文に応じた文字列が即座に返されます。

引数optionが条件式と一致しない場合、Switch文内のdefault文によって定義された文字列が返されます。

return文を使用すると、Switch文内の各case文が実行される代わりに、Switch文を含む関数が呼び出された際に、該当するcase文に応じた値が直ちに返されます。

そして、その関数は呼び出し元の関数に制御が戻ります。

他の例でも、学んでみましょう。

例えば、都市名を引数として受け取り、その都市がどの国の首都であるかを文字列で返す関数を考えてみましょう。

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文で判定し、都市が日本の場合は"東京は日本の首都です。"という文字列を返します。

また、Switch文内で即時関数を使用することもできます。

以下は、Switch文内で即時関数を使用した例です。

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

このように、Switch文は制御構文の一つであり、複数のcaseで式を判定し、該当するcaseが実行されます。

Switch文内でreturn文や即時関数を使用することで、柔軟な処理が可能となります。

breakを使用して切り替え

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

たとえば、商品の名前を引数に取る関数getItem()を考えましょう。

この関数は、引数として渡された商品名に応じて価格を返します。Switch文を使用して、引数として渡された商品名に応じて適切な価格を設定し、それを返すようにします。

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.

Switch文を使用する場合、各caseの処理が完了した後、break文を使用してSwitch文を終了する必要があります。

break文を使用しない場合、Switch文は次のcaseに進み、それを実行してしまいます。

そのため、正しい価格が設定されなくなる可能性があります。

また、Switch文のdefaultキーワードは、どのcaseにも一致しない場合に実行されます。

つまり、商品名が何も一致しない場合、"Item not in stock"という文字列が返されます。

最後に、関数から戻る値を明示するために、return文を使用することを忘れないようにしましょう。

論理演算子を使用する

JavaScriptで複数の値を評価するためには、Switch文で論理演算子のORおよびANDを使用することができます。

以下の例では、num1とnum2という2つの変数に対して、異なる条件式を使ってSwitch文を評価しています。

条件が真(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');

    }

// 出力: Second

上記のコードでは、num1とnum2が両方とも値2であるため、AND演算子による条件式が「true」と評価され、Secondというcaseブロックが実行されます。

もしnum1とnum2の両方が1になっている場合、論理和のOR条件によってFirstというcaseブロックが実行されます。

let num1 = 1;
let num2 = 1;

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');
}

// 出力: "First"

このように、Switch文と論理演算子を組み合わせることで、複数の値を評価して条件分岐を行うことができます。

if...else文とSwitch...case文の基本的な違い

JavaScript初心者は、if…else文とSwitch…case文の間でどの条件を使用するか混乱する可能性があります。

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

これにより、コードが実行されると、どのcaseを実行するかを決定するだけで済みます。

一方、if…else文は条件の結果がブール値で、条件は複雑であり、複数の論理演算子を持った条件があります。

Switch…case文は、式（変数）に対して複数の選択肢があります。条件は列挙型、定数、型などの事前定義された値のセットに基づいています。

どちらを使用するかは、読みやすさ、理解しやすさ、変更可能性に基づいて決定する必要があります。

if…else文は、複雑な条件を持つ場合には長くなり、Switch…case文に比べて読みにくくなります。

Switch文を使用する代わりに、オブジェクトリテラルを使用して同じ機能を再現することができます。

しかし、通常はSwitch文を使用する場合が多く、オブジェクトリテラルを使用する機会はあまりありません。

JavaScriptの開発者は、条件分岐のためにSwitch文を使用することが多いですが、if…else文が適切な場合もあります。

どちらを使用するかを決定するには、経験が必要です。

また、Switch文を使用する場合でも、複雑な条件式を持つ大きな分岐文でデバッグするのは難しい場合がありますのでご注意下さい。

最後に

条件分岐を使う場合、どちらの条件を使用するか迷うことがありますが、練習を重ねることで上達します。

すべてのcaseにおいて、正しい答えはある一つではなく、適切な解決策を選択することが重要です。

この記事では、条件に基づいて複数の値を評価し、対応する結果を出力するSwitch文について学びました。

以上が今回の記事の内容です。

最後までお読みいただき、ありがとうございます。

もし、この記事が役に立った場合は、ブックマークして他の方と共有していただけると嬉しいです。