JavaScriptでswitch文を使う方法【初心者向け】

JavaScriptで【switch文】を使う方法をプログラミング初心者向けに解説した記事です。条件分岐の1つで、if文よりも記述が少なく、見た目にがすっきりしたプログラムにすることが可能です。サンプルコードあり。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptの使い方を初心者向けに紹介した記事です。

今回は、JavaScriptでswitch文を使う方法について解説します。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

本記事では、テキストエディタmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

switch文とは

switch文とは条件分岐の1つです。条件分岐では、if文で事足りる場合がほとんどですが、switch文ではif文よりも記述量が少ないため、見た目にもすっきりしたプログラムになります。

次の2つを満たすようなちょっと面倒な式の場合、重宝しますので、覚えておきましょう。

 

  • 式や値が複数の値を取りうる場合
  • それぞれの値に応じて処理を変えたい場合

 

大石ゆかり

switch文もif文と同じように条件分岐で使うんですか?

田島悠介

そうなんだ。たくさんの値を取りうる場合、switch文の方がスマートに書けたりするんだよね。

大石ゆかり

if文でelse ifなどがたくさんあると見づらいなーと思ってました。

田島悠介

そうそう。さっそくswitch文の書き方を見てみよう!

 

switch文の構文

switch文の構文は、次のようになります。

switch (式or変数) {
case 値1 :
//式の結果が値1に等しい場合に実行する
break;
case 値2 :
//式の結果が値2に等しい場合に実行する
break;
default :
//式の結果がどれにも該当しない場合に実行する処理
break;
}

 

まずswitchで括ったなかに、式、もしくは変数を書きます。

そのあとに、複数の値とそれぞれの処理を書いていきます。(構文を見てもらえばわかるように、switch文では、それぞれの処理は基本的に並列の関係にあります)

注意してほしいのが、breakの記述。case〜breakまで書いて1つの処理が完成するので、忘れないようにしましょう。

最後のdefaultは、式の結果がどれにも該当しない場合に実行するための処理です。必要に応じて書いても書かなくてもどちらでも構いません。

 

以上のことを踏まえて、実際にswitch文を書いてみましょう。

 

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際にswitch文を書いてみよう

変数をmemberと定義し、memberに代入した人の名前がfamilyかどうかチェックするプログラムを書いてみたいと思います。

familyはTaro、Jiro、Saburoの3人で、それぞれの名前が代入されるとブラウザには「Taro is my family」といった具合に表示されます。そのほかの人の名前を書くと、「○○ is not my family」と表示されます。

 

<!DOCTYPE html>
<html lang = “ja”>
<head>
<meta charset = “utf-8”>
<title>JavaScriptの練習</title>
</head>
<body>
<script>
var member = “Taro”;
switch (member) {
case “Taro”:
document.write (“Taro is my family”);
break;
case “Jiro”:
document.write (“Jiro is my family”);
break;
case “Saburo”:
document.write (“Saburo is my family”);
break;
default:
document.write (member + ” is not my family”);
break;
}
</script>
</body>
</html>

 

変数memberにTaroが代入されたので、 case “Taro”: が実行され、ブラウザには「Taro is my family」と表示されました。

Taro

 

同じように、変数memberにJiroを代入すると……

var member = “Jiro”;

 

case “Jiro”: が実行され、ブラウザには「Jiro is my family」と表示されました。

Jiro

さらに変数memberにJiroを代入すると……

var member = “Saburo”;

 

case “Saburo”: が実行され、ブラウザには「Saburo is my family」と表示されました。

Saburo

 

では最後に、変数memberにHarukaを代入してみます。

var member = “Haruka”;

 

Tarod・Jiro・Saburoの誰にも当てはまらないので、 default: が実行され、ブラウザには「Haruka is not my family」と表示されました。

Haruka

 

 

以上です。

もちろん、上記の処理はif文でも書くことは可能です。しかし、複雑な処理であればswitch文を使ったほうが のちのち見返すことを考えても適しているでしょう。

プログラムを書く時はできるだけシンプルに記述できるようにしたいですね。ぜひswitch文を覚えて使ってみてください。

 

大石ゆかり

基本的にはif文と同じですねー。

田島悠介

そうなんだ。でも、工夫すると色々使えるんだよね。

大石ゆかり

そうなんですか?

田島悠介

switch(true)にするとif-else if文の代替えとして使えるし、breakを書かなければ、複数の条件を適用させることも出来るんだ。今の段階では、if文よりスマートに書けるぐらいに考えておいても全然大丈夫だよ。

 

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。