プレゼンテーションシナリオ: スライド92、93、94

スライド92、93、94では、JavaScript Switch文について説明します。

Switchとは？

switchもif...elseと同様に条件文ですが、変数（または式）を複数の異なる値と比較する必要がある場合に使用されます。

多くのcaseがある場合、構文が簡潔で読みやすく、値が一致したときに対応するコードブロックを実行します - 多くのif...else if...elseを使用する代わりになります。

一般的な構文

switch (expression) {
    case value1:
        // expression === value1 の場合にコードを実行
        break;
    case value2:
        // expression === value2 の場合にコードを実行
        break;
    default:
        // どの case にも一致しない場合にコードを実行
}

各部分の説明とswitch文の実行フロー

switch (expression)

expressionは比較する必要がある式または値です。JavaScriptはこの値を各caseと比較します。

case value1:

これは比較するための特定の「ケース」です。

===は値とデータ型の両方を比較する演算子です。expression === value1は、expressionとvalue1が100%同じであることを意味します。

expression === value1の場合、case value1:の直下のコードが実行されます。

実行後、break;に出会うとswitchから抜け出します。

case value2:

case value1と同様です。

expression === value2の場合、この分岐のコードブロックが実行され、その後breakで抜け出します。

break;

一致するcaseでswitch文を終了するために使用し、下に続くことを防ぎます。

breakを省略すると、プログラムは次のcaseに続けて実行されます（この現象をfall-throughと呼びます）。

default:

オプション（必須ではありません）。

default内のコードは、どのcaseにも一致しない場合に実行されます。

if...elseのelseに似ています。

例

let color = "red";

switch (color) {
    case "blue":
        console.log("Blue");
        break;
    case "red":
        console.log("Red");
        break;
    case "green":
        console.log("Green");
        break;
}
// Output Result: red

実行フローの説明：

変数colorの値は"red"です。
Switchはcolorを各caseと順番に比較します：
- case "blue": color === "blue" ? → false、この部分をスキップします。
- case "red": color === "red" ? → true、console.log("Red");を実行し、その後breakに出会ってswitchから抜け出します。
- case "green": case "red"でswitchを抜け出したため、実行されません。
結果："Red"が出力されます。

以上で、JavaScriptのSwitch文についての説明を終わります。これは、同じ変数に対する複数の条件比較を簡潔に処理する方法です。