JavaScriptでswitch文を使う方法【初心者向け】
JavaScriptで【switch文】を使う方法をプログラミング初心者向けに解説した記事です。条件分岐の1つで、if文よりも記述が少なく、見た目にがすっきりしたプログラムにすることが可能です。サンプルコードあり。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,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文を書いてみましょう。
実際に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」と表示されました。
同じように、変数memberにJiroを代入すると……
var member = “Jiro”;
case “Jiro”: が実行され、ブラウザには「Jiro is my family」と表示されました。
さらに変数memberにJiroを代入すると……
var member = “Saburo”;
case “Saburo”: が実行され、ブラウザには「Saburo is my family」と表示されました。
では最後に、変数memberにHarukaを代入してみます。
var member = “Haruka”;
Tarod・Jiro・Saburoの誰にも当てはまらないので、 default: が実行され、ブラウザには「Haruka is not my family」と表示されました。
以上です。
もちろん、上記の処理はif文でも書くことは可能です。しかし、複雑な処理であればswitch文を使ったほうが のちのち見返すことを考えても適しているでしょう。
プログラムを書く時はできるだけシンプルに記述できるようにしたいですね。ぜひswitch文を覚えて使ってみてください。
基本的にはif文と同じですねー。
そうなんだ。でも、工夫すると色々使えるんだよね。
そうなんですか？
switch(true)にするとif-else if文の代替えとして使えるし、breakを書かなければ、複数の条件を適用させることも出来るんだ。今の段階では、if文よりスマートに書けるぐらいに考えておいても全然大丈夫だよ。
[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。プログラミングの初心者でも受講可能です。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
