JavaScript switchを徹底解説!使い方と応用例10選

JavaScript switch文を徹底解説する記事のサムネイル JS

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスはSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptのswitch文を使いこなすことができるようになります。

初心者の方でも分かりやすく、徹底的に解説していきます。

JavaScriptのswitch文の基本的な使い方から応用例まで、10個のサンプルコードを通して学びましょう。

●JavaScript switch文とは

JavaScriptのswitch文は、条件分岐を行うための構文の一つです。

if文と同様に、条件に応じて異なる処理を実行することができますが、switch文は特定の値に対して複数の条件を設定する場合に適しています。

●switch文の基本構造

switch文の基本構造は次のようになります。

switch (式) {
  case 値1:
    // 値1に一致する場合の処理
    break;
  case 値2:
    // 値2に一致する場合の処理
    break;
  default:
    // どの値にも一致しない場合の処理
}

●switch文の使い方

ここでは、基本的なswitch文の使い方をサンプルコードと共に解説します。

○サンプルコード1:基本的なswitch文

このコードでは、変数fruitの値に応じて、異なるメッセージをコンソールに表示しています。

const fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("りんごです");
    break;
  case "orange":
    console.log("オレンジです");
    break;
  case "banana":
    console.log("バナナです");
    break;
}

○サンプルコード2:breakの使用

break文を用いることで、switch文の処理を終了させることができます。

このコードでは、fruitが”orange”の場合に、”オレンジです”と表示された後、break文によって処理が終了しています。

const fruit = "orange";

switch (fruit) {
  case "apple":
    console.log("りんごです");
    break;
  case "orange":
    console.log("オレンジです");
    break;
  case "banana":
    console.log("バナナです");
    break;
}

○サンプルコード3:default節の使用

このコードでは、default節を使用して、どのcase節にも該当しない場合の処理を記述しています。

具体的には、変数fruitがどの値にも一致しない場合、”不明なフルーツです”と表示されます。

const fruit = "grape";

switch (fruit) {
  case "apple":
    console.log("りんごです");
    break;
  case "orange":
    console.log("オレンジです");
    break;
  case "banana":
    console.log("バナナです");
    break;
  default:
    console.log("不明なフルーツです");
}

●JavaScript switch文の応用例

switch文を使った実用的なコード例を紹介します。

○サンプルコード4:計算機アプリ

このコードでは、四則演算を行う計算機アプリをswitch文で実装しています。

演算子を判定し、対応する計算を実行して結果を表示しています。

const num1 = 10;
const num2 = 5;
const operator = "+";

switch (operator) {
  case "+":
    console.log(num1 + num2);
    break;
  case "-":
    console.log(num1 - num2);
    break;
  case "*":
    console.log(num1 * num2);
    break;
  case "/":
    console.log(num1 / num2);
    break;
  default:
    console.log("不明な演算子です");
}

○サンプルコード5:曜日の表示

このコードでは、日付オブジェクトから曜日を取得し、日本語で表示する例を紹介しています。

switch文を用いて、曜日の数値に対応する日本語の曜日名を表示しています。

const today = new Date();
const dayOfWeek = today.getDay();

switch (dayOfWeek) {
  case 0:
    console.log("日曜日");
    break;
  case 1:
    console.log("月曜日");
    break;
  case 2:
    console.log("火曜日");
    break;
  case 3:
    console.log("水曜日");
    break;
  case 4:
    console.log("木曜日");
    break;
  case 5:
    console.log("金曜日");
    break;
  case 6:
    console.log("土曜日");
    break;
}

○サンプルコード6:条件付きスタイル適用

このコードでは、条件に応じてHTML要素にスタイルを適用する例を紹介しています。

switch文で条件に合ったスタイルクラス名を選択し、要素に適用しています。

const status = "warning";
const element = document.querySelector(".message");

switch (status) {
  case "success":
    element.classList.add("message--success");
    break;
  case "warning":
    element.classList.add("message--warning");
    break;
  case "error":
    element.classList.add("message--error");
    break;
}

○サンプルコード7:イベントハンドラの利用

このコードでは、イベントハンドラ内でswitch文を使って、クリックされたボタンに応じた処理を実行する例を示しています。

const button1 = document.querySelector("#button1");
const button2 = document.querySelector("#button2");
const button3 = document.querySelector("#button3");

function handleClick(event) {
  const buttonId = event.target.id;

  switch (buttonId) {
    case "button1":
      console.log("ボタン1がクリックされました");
      break;
    case "button2":
      console.log("ボタン2がクリックされました");
      break;
    case "button3":
      console.log("ボタン3がクリックされました");
      break;
  }
}

button1.addEventListener("click", handleClick);
button2.addEventListener("click", handleClick);
button3.addEventListener("click", handleClick);

○サンプルコード8:ユーザー入力の処理

このコードでは、ユーザーが入力したテキストに応じて、異なるメッセージを表示する例を紹介しています。

switch文を使って、入力されたテキストに応じた処理を実行しています。

const input = prompt("あなたの好きな果物は何ですか?");

switch (input) {
  case "りんご":
    console.log("りんごは美味しいですね!");
    break;
  case "オレンジ":
    console.log("オレンジはビタミンCが豊富です!");
    break;
  case "バナナ":
    console.log("バナナは栄養価が高いですね!");
    break;
  default:
    console.log("それもいい選択ですね!");
}

○サンプルコード9:APIレスポンスの処理

このコードでは、APIから取得したデータに基づいて、異なる処理を行う例を紹介しています。

switch文でレスポンスのステータスコードに応じた処理を実行しています。

fetch("https://api.example.com/data")
  .then((response) => {
    switch (response.status) {
      case 200:
        return response.json();
      case 404:
        throw new Error("データが見つかりませんでした");
      default:
        throw new Error("予期しないエラーが発生しました");
    }
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error.message);
  });

○サンプルコード10:状態管理

このコードでは、アプリケーションの状態に応じて異なる処理を実行する例を示しています。

switch文で状態に応じた処理を実行し、アプリケーションの状態を更新しています。

let appState = "loading";

function updateAppState(newState) {
  appState = newState;
}

function render() {
  switch (appState) {
    case "loading":
      console.log("データを読み込んでいます...");
      break;
    case "ready":
      console.log("データが準備完了しました");
      break;
    case "error":
      console.log("エラーが発生しました");
      break;
  }
}

render();
updateAppState("ready");
render();

●注意点と対処法

switch文を使用する際の注意点とその対処法を説明します。

  1. case節の最後にbreakを忘れないようにしましょう。
    breakがない場合、次のcase節が実行されてしまいます。
  2. default節を使用して、どのcase節にも該当しない場合の処理を記述しましょう。
    これにより、予期しない値に対しても適切な処理が行われます。

●switch文をカスタマイズする方法

switch文は、if文や三項演算子と組み合わせることで、より複雑な条件分岐を実現できます。

また、関数を使用して処理を分割し、コードの可読性を向上させることができます。

まとめ

この記事では、JavaScriptのswitch文の基本構造や使い方、さまざまな応用例を紹介しました。

また、注意点や対処法、カスタマイズ方法についても説明しました。

switch文は、多岐にわたる条件分岐をシンプルに記述するために役立ちます。

適切に使いこなすことで、コードの可読性やメンテナンス性を向上させることができます。

switch文の使用方法や応用例を理解し、自分のプロジェクトに活用してください。