JavaScriptのSwitch文を書こう｜具体例付でわかりやすい

※本サイトにはプロモーション・広告が含まれています。

（最終更新月：2023年10月）

✔以下の質問をお持ちの方に向けて書かれています

「JavaScriptのswitch文、具体的に何ができるの？」

「JavaScriptのswitch文の書き方を知りたい」

「JavaScriptのswitch文の実際の例を見てみたい」

✔当記事でご紹介する内容は

  • JavaScriptのswitch文の基礎知識
  • switch文の書き方とその活用法
  • switch文を用いた具体的な事例

当記事では、JavaScriptのswitch文の基本概念から、その多様な使用方法まで、具体的な例を交えて詳細に説明しています。

ぜひ最後まで読み進めて、switch文の全貌を把握しましょう！

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック
created by Rinker

「Switch」ステートメント入門

こちらでは、Switch文の基本についてお伝えしていきます。

Switch文を使いこなすことで、より効率的な条件分岐を実現できるでしょう。

  • Switch文とは何か
  • 一般的な使い方

Switch文とは何か

Switch文は、JavaScriptにおける条件分岐の一形式で、特定の値に応じて異なる処理をおこなえるもの。

if-else文が連続する場合や、特定の値に応じた処理を行いたい場合に特に有効です。

let fruit = "apple";
switch (fruit) {
    case "apple":
        alert("これはリンゴです");
        break;
    case "banana":
        alert("これはバナナです");
        break;
    default:
        alert("知らない果物です");
}

一般的な使い方

Switch文のルールは以下のとおりです。

  1. switchキーワードの後に評価したい式を指定
  2. 複数のcaseラベルを列挙

各caseラベルには、評価したい値とそれに対応する処理を記述。

最後のdefaultラベルで、どのcaseにも該当しない場合の処理を指定します。

let number = 5;
switch (number) {
    case 1: //numberが1のときに行う処理を以下に書く
        alert("One");
        break;
    case 5: //numberが5のときに行う処理を以下に書く
        alert("Five");
        break;
    default:
        alert("Unknown number");
}

Switch文の基本的な構成

こちらでは、Switch文の詳細な構成について深堀りしていきます。

正確な構文を理解することで、エラーを避け、期待通りの動作を得られるでしょう。

  • スイッチ文の基本書式
  • 探ってみよう：Switchステートメントの作成

スイッチ文の基本書式

Switch文の基本的な書式は、以下から構成されます。

  1. switchキーワード
  2. 評価式
  3. 評価式に基づいて実行する一連のステートメント

各ステートメントはcaseまたはdefaultキーワードで始まり、コロンで終わります。

switch (expression) {
    case value1:
        // ステートメント1
        break;
    case value2:
        // ステートメント2
        break;
    default:
        // デフォルトステートメント
}

探ってみよう：Switchステートメントの作成

実際にSwitch文を作成してみましょう。

例として、曜日の名前を数字に変換するプログラムを考えます。

let day = "Monday";
switch (day) {
    case "Sunday":
        alert(0);
        break;
    case "Monday":
        alert(1);
        break;
    // ... 他の曜日も同様に
    default:
        alert("Invalid day");
}

Switch文における特別な事項

こちらでは、Switch文を使用する際の特別な点や注意事項についてお伝えしていきます。

これらの事項を理解することで、Switch文をより効果的に活用できるでしょう。

  • Break文の役割と省略時の動作
  • Default文での値の調整

Break文の役割と省略時の動作

Switch文内の各caseの最後には通常、break文が配置されます。

これは、一致したcaseの処理が終了した後、Switch文の外に移動するためのものです。

もしbreak文を省略すると、次のcaseの処理も実行されてしまうので注意が必要です。

switch (2) {
    case 1:
        alert("One");
        break;
    case 2:
        alert("Two");
        // breakを省略
    case 3:
        alert("Three");
        break;
}

上記の例では、"Two"と"Three"の両方が表示されます。

Default文での値の調整

default文は、どのcaseにも該当しない場合に実行される部分です。

このdefault文は、Switch文の最後に配置するのが一般的ですが、必ずしも最後である必要はありません。

ただし、配置の位置によってはbreak文の有無が影響するため、注意が必要です。

switch ("apple") {
    default:
        alert("Unknown fruit");
        break;
    case "apple":
        alert("This is an apple");
        break;
}

この例では、"Unknown fruit"が表示されます。

Switch文の最適な使用方法

こちらでは、Switch文を最も効果的に使用するための方法やテクニックについてお伝えしていきます。

これらのテクニックを活用することで、コードの可読性や効率が向上するでしょう。

  • 実践例: コードで見るSwitch文の使用
  • 当たり外れ: ケースとデフォルトの位置
  • 一石二鳥: 同じ処理を扱う複数の値

実践例: コードで見るSwitch文の使用

Switch文の使用例として、月の名前を数字に変換するプログラムを考えます。

let month = "March";
switch (month) {
    case "January":
        alert(1);
        break;
    case "February":
        alert(2);
        break;
    case "March":
        alert(3);
        break;
    // ... 他の月も同様に
    default:
        alert("Invalid month");
}

当たり外れ: ケースとデフォルトの位置

前述の通り、default文の位置はSwitch文の最後である必要はありません。

しかし、中途に配置する場合は、その後のcase文が意図せず実行されないよう、適切にbreak文を使用することが重要です。

一石二鳥: 同じ処理を扱う複数の値

複数のcaseが同じ処理を共有する場合、それらのcaseを連続して記述することで、コードの重複を避けられます。

let day = "Sunday";
switch (day) {
    case "Saturday":
    case "Sunday":
        alert("It's a weekend!");
        break;
    default:
        alert("It's a weekday.");
}

Switch文対If文：比較と代替法

こちらでは、Switch文とIf文の違いや、それぞれの適切な使用シーンについてお伝えしていきます。

これらの違いを理解することで、より適切な条件分岐を実装できるでしょう。

  • Switch文とIf文の使い分け
  • If-Elseチェーンとの比較

Switch文とIf文の使い分け

Switch文は、特定の値に基づいて多岐にわたる処理をおこなう場合に適しています。

一方If文は、複雑な条件や複数の条件を組み合わせる場合に有効です。

// Switch文の例
let color = "red";
switch (color) {
    case "red":
        alert("Stop!");
        break;
    case "green":
        alert("Go!");
        break;
    default:
        alert("Be cautious.");
}

// If文の例
if (color === "red") {
    alert("Stop!");
} else if (color === "green") {
    alert("Go!");
} else {
    alert("Be cautious.");
}

If-Elseチェーンとの比較

If-Elseチェーンは、複数の条件を順番に評価する場合に使用されます。

Switch文と比較して、より柔軟な条件分岐が可能です。

ただし多岐にわたる単純な値の比較の場合、Switch文の方が読みやすいでしょう。

let age = 25;

// If-Elseチェーンの例
if (age < 20) {
    alert("Teenager");
} else if (age < 30) {
    alert("Young adult");
} else {
    alert("Adult");
}

Switch文を活用するためのヒント

Switch文を効果的に使用するための一つのヒントは、常にdefault文を含めることです。

これにより、想定外の値が来た場合の処理を確実におこなえます。

また、case文の順序も考慮すると良いでしょう。

とくに、頻繁に評価される値を先頭に配置することで、処理速度の向上が期待できます。

まとめ：Switch文の学んだことと次のステップ

当記事では、JavaScriptのSwitch文について学習してきました。

  • Switch文は、特定の値に基づいて多岐にわたる処理を行う際に非常に有効
  • break文の使用やdefault文の配置など、細かいポイントに注意しながら適切に使用することで、効率的なコードを書ける

JavaScriptを学ぶには、読むだけでなく実際に手を動かすことも大切。

ぜひ当記事のコードなど、実際に手で打ちながら試してみてください。

タイトルとURLをコピーしました