JavaScript - Switch Case: A Beginner's Guide

こんにちは、将来のcodingスーパースター！JavaScriptの素晴らしい決定-makingツールの1つについて学ぶ準備はできていますか？シートベルトを締めて、Switch Caseステートメントの素晴らしい世界に飛び込みましょう！

Switch Caseとは？

本題に入る前に、シンプルな類似の話から始めましょう。アイスクリーム屋にいると imagine して、フレーバーを選ばなければなりません。多くの「if-else」ステートメントを使って決定することもできますが、それはお店の店員に「バニラですか？違いますか？チョコレートですか？違いますか？」などと尋ねるようなものです。もっと簡単に「どんなフレーバーですか？」と尋ねて、その答えに基づいて選ぶ方が簡単でしょう。それがまさにSwitch Caseがやることです！

フローチャート

Switch Caseがどのように動作するかを視覚的に理解するために、フローチャートを見てみましょう：

[開始]
|
v
[式をチェック]
|
______|_______
|      |       |
v      v       v
[ケース1][ケース2][ケース3]...
|      |       |
v      v       v
[アクション1][アクション2][アクション3]...
|      |       |
|______|_______|
|
v
[デフォルト]
|
v
[終了]

このフローチャートは、Switch Caseが式を評価し、対応するケースブロックを実行する方法を示しています。一致するケースが見つからない場合、デフォルトブロック（提供されている場合）を実行します。

文法

では、Switch Caseステートメントの文法を分解してみましょう：

switch(expression) {
case value1:
// 実行されるコード
break;
case value2:
// 実行されるコード
break;
case value3:
// 実行されるコード
break;
...
default:
// どのケースも一致しない場合に実行されるコード
}

各部分の意味は以下の通りです：

• switch(expression): チェックしたい値をここに入れます。
• case value: 式に一致する可能性のある値。
• // 実行されるコード: ケースが一致した場合に実行されるコード。
• break: 一致したケースを実行した後、switchブロックから退出するためのキーワード。
• default: if-elseステートメントの「else」と同じで、どのケースも一致しない場合に実行されます。

例

いくつかの例を見て、Switch Caseを実動作させましょう！

例1: 曜日

let day = 3;
let dayName;

switch (day) {
case 1:
dayName = "Monday";
break;
case 2:
dayName = "Tuesday";
break;
case 3:
dayName = "Wednesday";
break;
case 4:
dayName = "Thursday";
break;
case 5:
dayName = "Friday";
break;
case 6:
dayName = "Saturday";
break;
case 7:
dayName = "Sunday";
break;
default:
dayName = "Invalid day";
}

console.log(dayName); // 出力: Wednesday

この例では、曜日番号を対応する名前に変換しています。以下がそのプロセスです：

1. dayを3に設定します。
2. switchステートメントはdayの値をチェックします。
3. case 3で一致を見つけます。
4. dayNameを"Wednesday"に設定します。
5. breakステートメントでswitchブロックを退出します。
6. 最後に、dayNameをコンソールにログします。

例2: 成绩システム

簡単な成绩システムを作成してみましょう：

let grade = 'B';
let message;

switch(grade) {
case 'A':
message = "Excellent job!";
break;
case 'B':
message = "Great work!";
break;
case 'C':
message = "Good effort!";
break;
case 'D':
message = "You need to study more.";
break;
case 'F':
message = "Please see me after class.";
break;
default:
message = "Invalid grade";
}

console.log(message); // 出力: Great work!

この例では：

1. gradeを'B'に設定します。
2. switchステートメントはgradeの値をチェックします。
3. case 'B'で一致を見つけます。
4. messageを"Great work!"に設定します。
5. breakステートメントでswitchブロックを退出します。
6. messageをコンソールにログします。

例3: 複数のケース

時々、異なるケースが同じ結果を持つ場合があります。以下にその方法を示します：

let fruit = "apple";
let category;

switch(fruit) {
case "apple":
case "pear":
case "banana":
category = "common fruit";
break;
case "mango":
case "papaya":
category = "tropical fruit";
break;
default:
category = "unknown fruit";
}

console.log(category); // 出力: common fruit

この例では：

1. fruitを"apple"に設定します。
2. switchステートメントはfruitの値をチェックします。
3. 最初のcase "apple"で一致を見つけます。
4. breakステートメントがないため、次の行に進みます。
5. categoryを"common fruit"に設定します。
6. breakステートメントでswitchブロックを退出します。

Switch Caseメソッド

以下に、Switch Case関連メソッドとその説明を示します：

メソッド	説明
switch	switchステートメントを開始します
case	switchステートメント内でケースを定義します
break	switchブロックを退出します
default	他のケースが一致しない場合に定義されるデフォルトケース

Switch Caseは、複数の条件をチェックする際にコードをより読みやすく効率的にするためのものです。交通コントローラーのように、特定の値に基づいてコードを適切な場所に導きます。

それでは、Switch Caseの力を手に入れました！練習することが完璧に近づく鍵ですので、自分でSwitch Caseステートメントを作成してみてください。もしかしたら、異なる選択肢が異なる結果に導く面白いゲームを作るかもしれません。可能性は無限です！

ハッピーコーディング、そしてSwitchがあなたと共にあります！??

Credits: Image by storyset