自主学習3-6「JavaScript実践(条件分岐-switch文)」

前回の「自主学習3-5」に引き続き、今回もJavaScript実践編をお送り致します。

switch文とは?

switch文もif文と同じく条件分岐の際に使用します。値によって処理を分岐させたい場合にswitch文を用いることができます。例えば信号を例に出すと、値が「赤」の時は「止まる」処理、値が「青」の時は「進む」処理、値が「黄」の時は「要注意」処理、といった処理ごとの分岐ができるようになります。

if文とswitch文の違いは?使い分ける基準はあるの?

if文では条件が満たされているか(true)満たされていないか(false)の真偽値によって処理が分岐します。そのためif文ではtrueかfalseかの二分岐の処理しか書けませんでしたが、switch文では値によって条件分岐するので、多分岐の記述が可能になります。

if文でswitch文と同じ処理を記述することも可能ですが、else ifを何度も記述して記述量を増やすより、多分岐であるならswitc文で記述した方が混乱も少なく、見た目もすっきりしそうです。どちらを使ってコードを書けばいいのか迷ったら、処理をフロー図にして書き出してみると良いでしょう。

switch文の書き方

switch文では条件ごとに「case」を記述して、複数の処理を分岐させますが、「case」で処理を記述し終えたら、最後に「break」を記述して処理の終了を命令します。「break」は「case」ごとに記述します。「case」で10個の処理を記述したら「break」も10個記述するという具合です。

実践-switch

const rank = 2;

switch (rank) {
  case 1:
    alert("金メダルです!");
    break;

  case 2:
    alert("銀メダルです!");
    break;
  
  case 3:
    alert("銅メダルです!");
    break;
}
//コードをコピペして下のエディタから出力結果を確認してみよう。

コード解説-switch

1、constで定数を宣言する。定数rankに「2」を代入する。

2、switchを記述し、小括弧内に条件の値となる「rank」を記述する。中括弧内には、多分岐する際の処理を「case」ごとに記述する。「case」ごとに「break」を記述することを忘れずに。

条件の値がcaseのどれにも合致しなかった際の処理について

caseのどれにも合致しなかった時のために、あらかじめswitch文の最後に「default」を用いて処理を記述しておきます。「default」はif文の「else」のような役割になります。

実践-switch-default

const rank = 5;

switch (rank) {
  case 1:
    alert("金メダルです!");
    break;
  case 2:
    alert("銀メダルです!");
    break;
  case 3:
    alert("銅メダルです!");
    break;
  
  default:
    alert("メダルはありません");
    break;
}
//コードをコピペして先ほどのエディタから出力結果を確認してみよう。

コード解説-switch-default

先ほどのコードとcase3までは同じ記述です。最後に「default」を追記して、rankが1から3のどれにも合致しなかった時の処理(「メダルはありません」とダイアログに文字列を出力する。)を記述しています。

ゴミコ
switch文は記述もスッキリしているし、if文より分かりやすかったわ。

次回の記事

にほんブログ村 IT技術ブログへ
にほんブログ村