JavaScriptでCaseを使いこなす5つの方法

はじめに
●JavaScriptでCaseを使う基本
- ○Switch文の構文
●Caseの使い方：5つの実用的なサンプルコード
●注意点と対処法
●Caseをカスタマイズする方法
まとめ

※本記事のコンテンツは、利用目的を問わずご活用いただけます。実務経験10000時間以上のエンジニアが監修しており、基礎知識があれば初心者にも理解していただけるように、常に解説内容のわかりやすさや記事の品質に注力しております。不具合・分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。(理解できない部分などの個別相談も無償で承っております)
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptでCaseを使いこなす方法が身につきます。

初心者の方でも理解しやすいように、実用的なサンプルコードを交えて解説していきます。

Caseを使って、もっとJavaScriptの世界を楽しみましょう！

●JavaScriptでCaseを使う基本

○Switch文の構文

JavaScriptでCaseを使うには、switch文を使用します。

switch文は、条件分岐を行う際に便利な構文で、次のような形をしています。

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

●Caseの使い方：5つの実用的なサンプルコード

ここからは、実際にCaseを使った5つのサンプルコードを紹介します。

○サンプルコード1：曜日ごとの挨拶メッセージ

このコードでは、曜日に応じた挨拶メッセージを表示するコードを紹介しています。

この例では、Dateオブジェクトを使って現在の曜日を取得し、対応する挨拶メッセージを表示しています。

const day = new Date().getDay();

switch (day) {
  case 0:
    console.log("日曜日ですね、ゆっくり過ごしましょう！");
    break;
  case 1:
    console.log("月曜日、新しい一週間が始まりますね。");
    break;
  case 2:
    console.log("火曜日、一週間も順調に進んでいますか？"); 
    break;
  // 省略
  default:
    console.log("曜日の取得に失敗しました。");
}

○サンプルコード2：数値に応じた評価

このコードでは、点数に応じて評価を出力するコードを紹介しています。

この例では、点数を判定し、対応する評価を表示しています。

const score = 85;

switch (true) {
  case score >= 90:
    console.log("優秀な成績です！");
    break;
  case score >= 80:
    console.log("良い成績ですね。");
    break;
  case score >= 70:
    console.log("もう少し頑張りましょう。");
    break;
  default:
    console.log("残念ながら不合格です。");
}

○サンプルコード3：文字列の大文字・小文字変換

このコードでは、文字列を大文字に変換するか小文字に変換するかを選択するコードを紹介しています。

この例では、ユーザーが選択したオプションに応じて、対応する処理を実行しています。

const input = "Hello World!";
const option = "lowercase";

switch (option) {
  case "uppercase":
    console.log(input.toUpperCase());
    break;
  case "lowercase":
    console.log(input.toLowerCase());
    break;
  default:
    console.log("オプションが無効です。");
}

○サンプルコード4：フルーツの種類別処理

このコードでは、フルーツの種類に応じて処理を分岐するコードを紹介しています。

この例では、フルーツの名前を判定し、対応するメッセージを表示しています。

const fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("りんごは美味しいですね！");
    break;
  case "orange":
    console.log("オレンジはビタミンCが豊富です！");
    break;
  case "banana":
    console.log("バナナはエネルギーがすぐに補給できますね。");
    break;
  default:
    console.log("フルーツの名前が無効です。");
}

○サンプルコード5：計算機アプリの実装

このコードでは、簡単な計算機アプリを実装するコードを紹介しています。

この例では、入力された数値と演算子を判定し、対応する計算結果を表示しています。

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

switch (operator) {
  case "+":
    console.log(`${num1} + ${num2} = ${num1 + num2}`);
    break;
  case "-":
    console.log(`${num1} - ${num2} = ${num1 - num2}`);
    break;
  case "*":
    console.log(`${num1} * ${num2} = ${num1 * num2}`);
    break;
  case "/":
    console.log(`${num1} / ${num2} = ${num1 / num2}`);
    break;
  default:
    console.log("演算子が無効です。");
}

●注意点と対処法

switch文の条件に応じて正しいcaseを選択しているか確認しましょう。
条件が一致しない場合は、default節が実行されます。
各case節の最後には、必ずbreak文を記述してください。
break文がない場合、次のcase節も実行されてしまいます。

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

複数の値に対して同じ処理を行いたい場合は、複数のcase節を連続して記述し、最後のcase節に処理を記述します。
例えば、下記のように1, 2, 3のいずれかの値に一致した場合に同じ処理を実行することができます。

switch (value) {
  case 1:
  case 2:
  case 3:
    console.log("値は1, 2, 3のいずれかです。");
    break;
  default:
    console.log("値が1, 2, 3以外です。");
}

case節内で条件を追加することもできます。
例えば、下記のようにif文を利用して、条件を組み合わせることが可能です。

switch (value) {
  case 1:
    if (condition) {
      console.log("値は1で、条件も満たしています。");
    } else {
      console.log("値は1ですが、条件を満たしていません。");
    }
    break;
  case 2:
    console.log("値は2です。");
    break;
  default:
    console.log("値が1, 2以外です。");
}