switch文JavaScript入門

更新日:2018.06.22
  1. HOME
  2. JavaScript入門
  3. switch文

今まで勉強してきた条件分岐のif文は、2通りにしか分岐できませんでした。 即ち「条件に合っている」「条件に合っていない」の2種類です。 これ以上分岐させるには、if文を何重にも重ねて書く必要があります。

ここで解説するswitch文は、一回で何通りにも分岐させることができる条件分岐命令です。

switch文の説明

switch文は以下のように記述します。

switch ( 分岐条件 ) { case,defaultによる分岐 }
switch文は、括弧内の条件により複数の処理に分岐します。
case 値 : 処理; break;
1つのswitch文の中にcaseはいくつでも記述できます。
分岐条件がcaseの後に記入された値に合致すれば、それ以降の処理をします。
caseの最後には、break;を入れてswitch文を抜け出します。
default : 処理; break;
default: は、どのcaseの値にも合致しなかった場合に処理されます。

breakを入れないと、その後に記述した処理も実行されてしまいます。忘れずに記述するようにしてください。

caseの後の処理は複数記述することも可能です。

switch (分岐条件) {
  case 分岐1:
    式;
    式;
    break;
  case 分岐2:
    式;
    式;
    break;
  case 分岐3:
    式;
    式;
    break;
  default:
    式;
    式;
    break;
} 

ではswitch文を使って、「本日の曜日」を表示させてみたいと思います。

switch文を使って本日の曜日を表示させる

HTMLのbody内に、以下のように記述してみてください。

<script>

//曜日取得
var today = new Date();
var week  = today.getDay();

//曜日を入れる変数
var str;

//条件分岐
switch (week) {
  case 0: str="日"; break;
  case 1: str="月"; break;
  case 2: str="火"; break;
  case 3: str="水"; break;
  case 4: str="木"; break;
  case 5: str="金"; break;
  default : str="土"; break;
}

document.write("今日は" + str + "曜日です。");
</script>

サンプルの実行結果→

上記スクリプトの解説

本日の曜日を取得する

var today = new Date();
var week  = today.getDay();

本日の日付データを取得しています。詳しい解説は別のページで行いますが、変数todayに日付データ一式を格納し、変数weekに、日付データの中から曜日の部分を抜き出して格納しています。

変数weekに格納されているのは、0~6までのいずれかの数値です。日曜日だと「0」、月曜日だと「1」、…、土曜日だと「6」が入ることになります。

日本語の曜日を入れる変数str

var str;

上述のように、変数weekに入っているのは数値です。それを、日,月,…,土と言った日本語の曜日に置き換えた文字列を入れるため、変数strを宣言しておきます。

switchによる条件分岐

switch (week) { … }

今度はswitchを使って条件を分岐させます。分岐条件は変数weekにしています。変数weekは0~6までの数値のいずれかが入っています。その数値によって処理を分けることにします。

case,defaultによる分岐

  case 0: str="日"; break;
  case 1: str="月"; break;
  case 2: str="火"; break;
  case 3: str="水"; break;
  case 4: str="木"; break;
  case 5: str="金"; break;
  default : str="土"; break;

caseによる条件分岐を行なっています。変数weekの値が0ならば日曜日ということなので、変数strに「日」を代入します。変数weekの値が1ならば、変数strに「月」を代入します。以下case 5: までそれぞれの曜日を入れています。

caseの最後にbreakを忘れずに記述します。これを忘れると、その後に記述している処理を全て行なってしまいます。例えば今日が火曜日だったとしても、breakを忘れていると次のcase 3: の処理が行われるので、変数strに「水」が入り、正しく表示されなくなります。

土曜日の場合、変数weekの値は6です。ですからcase 6: と記述してもいいのですが、今回はdefaultを使用しました。変数weekの値が0~5以外の場合に処理を行います。

曜日を表示する

document.write("今日は" + str + "曜日です。");

最後はdocument.write()を使って曜日を表示しています。

以上で条件分岐は終わりです。 次から繰り返し文を説明しますが、 その前に配列変数について述べます。 配列と繰り返し文は相性が良く、一緒に用いることもよくあります。

楽天booksのJavaScript解説本 JavaScriptワークブック第3版 JavaScript基礎入門 プログラミングTypeScript 作りながら学ぶWebプログラミング実践入門 新しいJavaScriptの教科書 子どもから大人までスラスラ読めるJavaScriptふりがなKidsプログラミン 30時間アカデミック JavaScript入門 確かな力が身につくJavaScript「超」入門 第2版 いちばんやさしいJavaScriptの教本第2版 HTML&CSS JavaScriptプログラミング基礎演習ワークブック

Supported by Rakuten Developers