JavaScriptのswitch文（switch case）徹底解説：基本構文から複数caseの使い方まで

はじめに

JavaScriptの「switch case」は、複数のif...else文をひとつにまとめて書ける条件分岐の仕組みです。if文と同じように条件式を受け取り、その評価結果に一致する複数のケース（case）の中から該当するコードブロックを実行します。

条件分岐はプログラミングに欠かせない要素であり、プログラムの処理の流れを制御するために使われます。JavaScriptで最も一般的な条件分岐は「if」および「if...else」ブロックで、特定の条件が満たされた場合にのみコードを実行できます。

また、JavaScriptには、ひとつの式を複数の条件と照らし合わせて評価できる、もうひとつの条件分岐であるswitch case文が組み込まれています。switch case文を使えば、複数のケースの中から条件に合致するものを探し、合致した箇所のコードブロックを実行できます。

このチュートリアルでは、JavaScriptのswitch文を使った条件分岐の作り方を解説します。さらに、複数のcaseを組み合わせて、より高度な条件分岐を作る方法も紹介します。

おさらい：JavaScriptの条件分岐の基礎

条件分岐を使うと、ある条件が満たされた場合にだけコードを実行し、満たされない場合は実行しないようにできます。条件分岐は、trueまたはfalseに評価される結果をもとに、条件が満たされているかどうかを判断します。

たとえば、注文ページのフォームがすべて入力済みかどうかを確認したり、ログイン中のユーザーにだけ商品のお知らせを表示したりする場面で、条件分岐が役立ちます。

JavaScriptで最も一般的な条件分岐は「if」文です。if文は式がtrueかfalseかを評価し、trueの場合にのみ処理を実行します。以下はJavaScriptのif文の例です。

var age = 17;

if (age >= 16) {
	console.log("あなたは16歳以上です！");
}

このコードを実行すると、次の出力が得られます。「あなたは16歳以上です！」

if文には「else if」文もあり、これを使うと複数の条件を順番にチェックできます。if...else文について詳しく学びたい方は、専用のチュートリアルもあわせてご覧ください。

条件分岐の基本をおさえたところで、次は本題となる「switch case」文を見ていきましょう。

JavaScriptのswitch文（switch case）の基本

JavaScriptの「switch」文は、式を評価し、その結果に応じて対応するコードブロックを実行します。switch文はif文と似た働きをしますが、ひとつの式に対して複数の候補（case）を用意できる点が大きな特徴です。

switch文は、次のような構文で記述します。

switch (式) {
	case 値a:
		// 実行するコード
		break;
	case 値b:
		// 実行するコード
		break;
	default:
		// 実行するコード
		break;
}

登場する要素が多いので、ひとつずつ分解してみましょう。プログラムがswitch文を読み込むときの流れは、以下のとおりです。

• switch文が実行されると、まず式が評価されます。
• 式の値が、各caseの値と順番に比較されます。
• 一致するcaseが見つかると、そのcaseに対応するコードブロックが実行されます。
• どのcaseとも一致しなかった場合は、「default」ブロック内のコードが実行されます。

具体例で動きを確認しましょう。ここでは、カフェのオーナーが、人気ドリンクの価格をユーザーが簡単に調べられるプログラムを作りたいと考えています。ユーザーが選んだドリンク名をメニューと照らし合わせ、選択されたドリンクの価格を出力します。

以下は、ドリンクの価格をチェックできるようにするコードです。

const drink_name = "Americano";

switch (drink_name) {
	case "Americano":
		console.log("アメリカーノの価格は$2.60です");
		break;
	case "Cappuccino":
		console.log("カプチーノの価格は$2.75です");
		break;
	case "Macchiato":
		console.log("マキアートの価格は$3.00です");
		break;
	case "Espresso":
		console.log("エスプレッソの価格は$2.40です");
		break;
	default:
		console.log("このドリンクは取り扱っていません");
}

変数「drink_name」が「Americano」の状態でこのプログラムを実行すると、次の出力が返されます。

アメリカーノの価格は$2.60です

「drink_name」に別のドリンク名を設定すれば、そのドリンクに対応した価格が表示されます。また、存在しないドリンク名を指定した場合は、「default」文の内容、つまり「このドリンクは取り扱っていません」というメッセージが返されます。

各case文の末尾に「break」キーワードが付いている点にも注目してください。break文を書かないと、プログラムは条件が一致した後も残りのcaseを評価し続けてしまいます。これは非効率なので、「break」を使って、式が一致した時点でcaseの探索を終了させるようにしています。

JavaScriptのswitch文で複数のcaseを扱う方法

先ほどの例では、それぞれのcaseに個別のコードブロックを割り当て、異なる出力を得ていました。しかし、複数のcaseで同じ出力を返したい場合はどうすればよいのでしょうか。

たとえば、バリスタが新しいドリンクを2種類メニューに追加し、それらがマキアートと同じ価格だったとします。このようなとき、同じ内容のコードブロックを持つcaseを何度も書く代わりに、ひとつのコードブロックに対して複数の「case」をまとめて指定できます。

先ほどの例を使って、複数caseの使い方を説明します。ただし今回は、console.log()文を再利用できるよう、出力メッセージを「[ドリンク名]の価格は[価格]です」から「このドリンクの価格は[価格]です」に変更します。

さらに、マキアートと同じく$3.00の新しいドリンク「ラテ」と「モカ」を追加します。

以下が、新しいドリンクを含む修正版のコードです。

const drink_name = "Mocha";

switch (drink_name) {
	case "Americano":
		console.log("このドリンクの価格は$2.60です");
		break;
	case "Cappuccino":
		console.log("このドリンクの価格は$2.75です");
		break;
	case "Latte":
	case "Mocha":
	case "Macchiato":
		console.log("このドリンクの価格は$3.00です");
		break;
	case "Espresso":
		console.log("このドリンクの価格は$2.40です");
		break;
	default:
		console.log("このドリンクは取り扱っていません");
}

変数「drink_name」が「Mocha」の状態で上記のコードを実行すると、次の出力が返されます。

このドリンクの価格は$3.00です

ご覧のとおり、プログラムは「Mocha」がcaseとして登録されていることを検出し、対応するコードブロックを実行しました。このようにcaseを縦に並べてグループ化すると、複数の値に共通する処理をひとつにまとめられます。

まとめ

「switch」文による条件分岐を使うと、式を評価し、その結果に応じた値や処理を返すことができます。switch文は、ひとつの式を複数の候補と比較したい場合に特に便利です。

このチュートリアルでは、まずJavaScriptにおける条件分岐の基本を確認しました。そのうえで、「switch」文と「case」文の使い方を解説し、switchブロック内で複数の「case」を組み合わせる具体例も紹介しました。

これで、JavaScriptのswitch case文をプロのように使いこなすための知識が身につきました！