読み込み中...

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

JavaScriptでCaseを使いこなす方法を解説するイメージ JS
この記事は約6分で読めます。

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

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

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

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

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

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

はじめに

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

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

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

●JavaScriptでCaseを使う基本

○Switch文の構文

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

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

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

●Caseの使い方

ここからは、実際に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("演算子が無効です。");
}

●注意点と対処法

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

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

  1. 複数の値に対して同じ処理を行いたい場合は、複数の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以外です。");
}
  1. 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以外です。");
}

まとめ

この記事では、JavaScriptのswitch文による処理分岐の使い方やカスタマイズ方法を紹介しました。

switch文は、複数の条件分岐を行う際に非常に便利な構文です。

ただし、正しくcase節やbreak文を記述することが重要ですので、注意して使用してください。

この知識を活用して、効率的なコードを書いていきましょう。