JavaScriptでswitch文を使って変数に条件に応じた値を代入する8つの方法

●switch文とは

プログラミングを学び始めたばかりのエンジニアの皆さん、こんにちは。

今回は、JavaScriptのswitch文について解説していきます。

あなたは、if文を使って条件分岐を行ったことがあるでしょう。

でも、条件が多くなってくると、if文だけでは読みにくいコードになってしまいます。

そんな時に活躍するのが、switch文です。

switch文は、ある変数の値に応じて、複数の処理を分岐させるための構文です。

if文と同じように条件分岐を行いますが、より簡潔に書くことができます。

これから、switch文の基本的な使い方から、応用的な使い方まで、一緒に学んでいきましょう。

○switch文の基本的な構文

まずは、switch文の基本的な構文から見ていきましょう。

switch (式) {
  case 値1:
    // 式が値1と等しい場合の処理
    break;
  case 値2:
    // 式が値2と等しい場合の処理
    break;
  ...
  default:
    // 式がどの値とも等しくない場合の処理
}

switch文は、switchキーワードに続けて、丸括弧()で囲まれた式を指定します。

この式の結果によって、どの処理を実行するかが決まります。

次に、caseキーワードを使って、式の結果と比較する値を指定します。

式の結果が、caseに指定した値と等しい場合、そのcaseブロック内の処理が実行されます。

各caseブロックの最後には、break文を記述します。

これは、そのcaseブロックの処理が終わったら、switch文全体を抜け出すためのものです。

break文がない場合、次のcaseブロックの処理も実行されてしまいます。

最後に、defaultキーワードを使って、式の結果がどのcaseとも一致しなかった場合の処理を記述します。defaultブロックは省略可能です。

○サンプルコード1：switch文の基本例

では、実際にswitch文を使ってみましょう。

次のコードは、曜日を表す数値によって、その日の予定を出力するプログラムです。

const day = 3;

switch (day) {
  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;
  default:
    console.log("曜日の値が正しくありません");
}

実行結果

水曜日は定例ミーティングの日です

この例では、変数dayに3が代入されているので、case 3のブロックが実行され、”水曜日は定例ミーティングの日です”と出力されます。

●switch文を使った変数への値の代入

前回は、switch文の基本的な使い方について解説してきました。

今回は、switch文を使って変数に値を代入する方法について解説していきます。

switch文は、条件に応じて処理を分岐させるだけでなく、変数に値を代入することもできます。

これを使いこなせば、コードの可読性が上がり、より効率的なプログラミングができるようになります。

○サンプルコード2：switch文で変数に値を代入する例

それでは、実際にswitch文を使って変数に値を代入してみましょう。

次のコードは、ユーザーの選択に応じて、変数messageに異なるメッセージを代入するプログラムです。

const userChoice = 1;
let message;

switch (userChoice) {
  case 1:
    message = "あなたは優秀な人材です";
    break;
  case 2:
    message = "あなたはまだ成長の余地があります";
    break;
  case 3:
    message = "あなたには向いていない仕事かもしれません";
    break;
  default:
    message = "選択肢が正しくありません";
}

console.log(message);

実行結果

あなたは優秀な人材です

この例では、userChoiceの値に応じて、message変数に異なる文字列を代入しています。

userChoiceが1の場合は”あなたは優秀な人材です”、2の場合は”あなたはまだ成長の余地があります”、3の場合は”あなたには向いていない仕事かもしれません”が代入されます。

いずれのcaseにも当てはまらない場合は、defaultブロックが実行され、”選択肢が正しくありません”が代入されます。

このように、switch文を使えば、条件に応じて変数に異なる値を代入できます。

if文を使っても同じことができますが、条件が多い場合はswitch文の方が読みやすいコードになります。

○サンプルコード3：breakを使わない場合

ところで、先ほどのコードでは各caseブロックの最後にbreak文を使っていましたが、これを省略するとどうなるでしょうか。

次のコードを見てみましょう。

const userChoice = 1;
let message;

switch (userChoice) {
  case 1:
    message = "あなたは優秀な人材です";
  case 2:
    message = "あなたはまだ成長の余地があります";
  case 3:
    message = "あなたには向いていない仕事かもしれません";
  default:
    message = "選択肢が正しくありません";
}

console.log(message);

実行結果

選択肢が正しくありません

userChoiceが1なのに、出力されるのは”選択肢が正しくありません”です。

これは、break文がないために、一致したcaseブロックの処理が終わっても、そのまま次のcaseブロックの処理が実行されてしまうためです。

このような動作を「フォールスルー」と呼びます。

フォールスルーを意図的に使うこともありますが、意図しない場合はバグの原因になります。

基本的には、各caseブロックの最後にbreak文を書くようにしましょう。

○サンプルコード4：defaultを使う場合

次は、defaultブロックについて詳しく見ていきましょう。

次のコードは、ユーザーの年齢に応じて、変数categoryに異なる文字列を代入するプログラムです。

const age = 25;
let category;

switch (true) {
  case age >= 60:
    category = "高齢者";
    break;
  case age >= 20:
    category = "大人";
    break;
  case age >= 0:
    category = "子供";
    break;
  default:
    category = "不正な値";
}

console.log(category);

実行結果

大人

この例では、switch文の引数にtrueを指定しています。

これにより、各caseブロックの条件式が評価され、最初にtrueになったcaseブロックが実行されます。

ageが25なので、case age >= 20のブロックが実行され、category変数に”大人”が代入されます。

ここで注目したいのは、defaultブロックの位置です。

defaultブロックは、どのcaseブロックにも当てはまらない場合に実行されます。

この例では、ageが負の値の場合に”不正な値”が代入されます。

defaultブロックは省略可能ですが、予期しない値が渡された場合のエラー処理として書いておくと安全です。

○サンプルコード5：式による条件分岐

最後に、switch文の条件に式を使う方法を見ていきましょう。

次のコードは、ユーザーの入力に応じて、変数resultに異なる計算結果を代入するプログラムです。

const operator = "+";
const num1 = 5;
const num2 = 3;
let result;

switch (operator) {
  case "+":
    result = num1 + num2;
    break;
  case "-":
    result = num1 - num2;
    break;
  case "*":
    result = num1 * num2;
    break;
  case "/":
    result = num1 / num2;
    break;
  default:
    result = "不正な演算子です";
}

console.log(result);

実行結果

8

この例では、operator変数に格納された演算子に応じて、result変数に計算結果を代入しています。

operatorが”+”なので、case "+":のブロックが実行され、num1とnum2の和がresultに代入されます。

このように、switch文の条件には式を使うこともできます。

式の結果が、caseブロックの値と一致すれば、そのブロックが実行されるという仕組みです。

●switch文のネスト

ここまでは、単一のswitch文を使った条件分岐について見てきました。

ただ、実際の開発現場では、もっと複雑な条件分岐を行う必要がある場面があります。

そんな時に役立つのが、switch文のネストです。ネストとは、switch文の中にさらにswitch文を入れ子にすることを指します。

これで、より細かい条件分岐を行うことができるようになります。

○サンプルコード6：switch文のネスト例

それでは、実際にswitch文のネストを使ったコードを見ていきましょう。

次のコードは、ユーザーの年齢と性別に応じて、変数messageに異なるメッセージを代入するプログラムです。

const age = 25;
const gender = "男性";
let message;

switch (true) {
  case age >= 20:
    switch (gender) {
      case "男性":
        message = "あなたは成人男性です";
        break;
      case "女性":
        message = "あなたは成人女性です";
        break;
      default:
        message = "あなたは成人ですが、性別が不明です";
    }
    break;
  case age >= 0:
    switch (gender) {
      case "男性":
        message = "あなたは未成年男性です";
        break;
      case "女性":
        message = "あなたは未成年女性です";
        break;
      default:
        message = "あなたは未成年ですが、性別が不明です";
    }
    break;
  default:
    message = "不正な年齢です";
}

console.log(message);

実行結果

あなたは成人男性です

まず、外側のswitch文でageの値に応じて大まかな年齢区分（成人or未成年）を判定しています。

そして、内側のswitch文でgenderの値に応じて、性別を判定しています。

ageが25、genderが”男性”なので、最初にcase age >= 20:のブロックが実行され、続いて内側のcase "男性":のブロックが実行されます。

その結果、message変数に”あなたは成人男性です”が代入され、出力されます。

●switch文とif文の使い分け

ここまでswitch文について詳しく学んできたみなさんも、こんな疑問を持ったのではないでしょうか。

「そもそもswitch文とif文って、どう使い分ければいいの？」と。

実は、switch文とif文は、どちらも条件分岐を行うための構文なんです。

つまり、ある条件に応じて処理を切り替えるという点では、同じ役割を持っています。

でも、それぞれの特徴を理解して、状況に応じて適切に使い分けることが大切なんですよ。

まず、if文は条件式の真偽（true/false）によって処理を分岐させます。

条件式は自由に設定できるので、柔軟性が高いのが特徴です。一方、switch文は式の値に応じて処理を分岐させます。

式の結果と一致するcaseブロックの処理が実行されるので、多岐にわたる条件分岐を簡潔に書くことができます。

では、具体的なコード例を見ながら、switch文とif文の使い分け方を考えていきましょう。

○サンプルコード7：if文で書いた例

まずは、if文を使って曜日に応じて処理を分岐させる例を見てみましょう。

const day = "月曜日";
let message;

if (day === "月曜日" || day === "火曜日" || day === "水曜日" || day === "木曜日" || day === "金曜日") {
  message = "平日です。仕事頑張りましょう！";
} else if (day === "土曜日" || day === "日曜日") {
  message = "休日です。ゆっくり休みましょう！";
} else {
  message = "曜日の値が正しくありません。";
}

console.log(message);

実行結果

平日です。仕事頑張りましょう！

この例では、day変数の値が平日（月曜日〜金曜日）か休日（土曜日〜日曜日）かによって、message変数に代入する文字列を切り替えています。

if文の条件式で、||（論理和）演算子を使って複数の条件をつなげているのがポイントです。

○サンプルコード8：switch文で書いた例

続いて、同じ処理をswitch文で書き換えてみましょう。

const day = "月曜日";
let message;

switch (day) {
  case "月曜日":
  case "火曜日":
  case "水曜日":
  case "木曜日":
  case "金曜日":
    message = "平日です。仕事頑張りましょう！";
    break;
  case "土曜日":
  case "日曜日":
    message = "休日です。ゆっくり休みましょう！";
    break;
  default:
    message = "曜日の値が正しくありません。";
}

console.log(message);

実行結果

平日です。仕事頑張りましょう！

switch文を使うと、day変数の値に応じて処理を分岐させることができます。

平日の場合は、case "月曜日":からcase "金曜日":までの連続したcaseブロックが実行され、message変数に”平日です。仕事頑張りましょう！”が代入されます。

休日の場合は、case "土曜日":とcase "日曜日":のブロックが実行され、”休日です。ゆっくり休みましょう！”が代入されます。

if文で書いた場合と比べると、switch文の方がシンプルで読みやすいコードになっているのがわかりますね。

特に、同じ処理を行う条件が連続する場合は、switch文の方が効率的に書けます。

ただし、if文のように複雑な条件式を使った分岐は、switch文では表現しづらいので注意が必要です。

条件式の自由度が高い場合は、if文を使う方が適しているでしょう。

●switch文を使う際の注意点

switch文についてかなり理解が深まってきたのではないでしょうか。

でも、知っておくべき注意点もまだまだあるんです。

最後に、switch文を使う際の注意点について詳しく見ていきましょう。

○フォールスルー

まず注意したいのが、「フォールスルー」という動作です。

これは、先ほどのサンプルコードでも少し触れましたが、ある条件に一致した後、break文がない場合に起こります。

フォールスルーが起こると、一致したcaseブロックの処理が終わった後も、次のcaseブロックの処理が続けて実行されてしまうんです。

意図しない動作につながる可能性があるので、注意が必要ですよ。

実際に、フォールスルーが起こるコードを見てみましょう。

const num = 1;
let result;

switch (num) {
  case 1:
    result = "一";
  case 2:
    result = "二";
  case 3:
    result = "三";
  default:
    result = "その他";
}

console.log(result);

実行結果

その他

numは1なので、case 1:のブロックが実行されるはずですが、break文がないため、フォールスルーが起こっています。

その結果、case 2:、case 3:、default:のブロックも順番に実行され、最終的にresultには”その他”が代入されてしまうんです。

このように、意図しないフォールスルーが起こると、プログラムの動作が予期せぬものになってしまいます。

switch文を使う際は、各caseブロックの最後にbreak文を書くことを習慣づけましょう。

○文字列と数値の比較

もう一つの注意点は、switch文の条件式で文字列と数値を比較する場合の動作です。

これは、JavaScriptの性質に由来するものなんですが、ちょっとわかりにくいかもしれません。

具体的に見ていきましょう。

次のコードは、numの値に応じてresultに文字列を代入するものです。

const num = "1";
let result;

switch (num) {
  case 1:
    result = "数値の1";
    break;
  case "1":
    result = "文字列の1";
    break;
  default:
    result = "その他";
}

console.log(result);

実行結果

文字列の1

numは文字列の”1″なので、case "1":のブロックが実行され、”文字列の1″が出力されますね。

でも、case 1:のブロックは実行されないのでしょうか？

実は、JavaScriptでは、switch文の条件式の比較に「等価演算子（==）」が使われるんです。

これは、比較する値の型が異なる場合に、暗黙的な型変換を行ってから比較します。

つまり、case 1:の比較では、文字列の”1″が数値の1に変換されてから比較されるんですね。

その結果、case 1:の条件にも一致することになります。

ただし、このような暗黙的な型変換は、コードの可読性を下げる原因になります。

switch文の条件式では、比較する値の型を揃えることをおすすめします。

数値を比較するならnumも数値に、文字列を比較するならnumも文字列にしておくのが良いでしょう。

まとめ

さて、JavaScriptのswitch文について、一通り学んできましたね。

基本的な使い方から、変数への値の代入、switch文のネスト、if文との使い分け、そして注意点まで、たくさんのことを見てきました。

switch文を使いこなせるようになれば、より効率的で可読性の高いコードが書けるようになるはずです。

それは、あなたのエンジニアとしての成長につながります。

長い記事を最後まで読んでいただき、ありがとうございました。

ここで学んだことを、ぜひ実際のコーディングで活かしてみてください。

あなたのJavaScriptプログラミングが、より充実したものになりますように。