条件分岐 - switch文 - web-0127のブログ

switchとは

if文と同様に分岐処理を行います
if文を簡略化してよりすっきり記述するための構文です
ある変数の中身が一致するかという判断を行います

switch（変数） {
　　case 値1:
　　　変数の中身が値1に一致した場合の処理
　　case 値2:
　　　変数の中身が値2に一致した場合の処理
　　case 値3:
　　　変数の中身が値3に一致した場合の処理
　　default:
　　　どの値にも一致しなかった場合の処理
}

switch文は、いずれかの値に一致すると以降の処理がすべて実行されるという特徴があります。

《switch文の特徴》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>switch文の特徴</title>
</head>
<body>
<script>
  var a = 2;
  switch(a) {
    case 1:
      console.log('aは1です');
    case 2:
      console.log('aは2です');
    case 3:
      console.log('aは3です');
    default:
      console.log('一致なし');
  }
</script>
</body>
</html>

《実行結果》

break文

break文は、ブロックから強制的に抜けるときに使う構文です

《break文の利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>break文の利用</title>
</head>
<body>
<script>
  var a = 2;
  switch(a) {
    case 1:
      console.log('aは1です');
      break;
    case 2:
      console.log('aは2です');
      break;
    case 3:
      console.log('aは3です');
      break;
    default:
      console.log('一致なし');
  }
</script>
</body>
</html>

《実行結果》

《switch文による多方向分岐》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>switch文による多方向分岐</title>
</head>
<body>
<script>
  var color = '黒';
  switch(color) {
    case '青':
    case '緑':
      console.log('進む');
      break;
    case '黄':
      console.log('急いで進む');
      break;
    case '赤':
      console.log('止まる');
      break;
    default:
      console.log('信号機の故障');
  }
</script>
</body>
</html>

《実行結果》

分岐処理を行う文法には、if文とswitch文がある
switch文は、単純な分岐を簡潔に記述したいときに使う

default;

どのcase文の値にも一致しない場合は「default;」へジャンプ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>switch文で月を判定する</title>
</head>
<body>
<script>
var month;

function season() {
month = prompt('月を入力してください', '1から12の値を半角数字を入力');

month = Number(month);
switch(month) {
  case 12:
  case 1:
  case 2:
    document.write("<h1>冬です。</h1>");
  break;
		
  case 3:
  case 4:
  case 5:
    document.write("<h1>春です。</h1>");
  break;

  case 6:
  case 7:
  case 8:
    document.write("<h1>夏です。</h1>");
  break;
		
  case 9:
  case 10:
  case 11:
    document.write("<h1>秋です。</h1>");
  break;
		
  default:
    document.write("<h1>1から12の値を入力してください</h1>");
}

}
</script>
<h1>月別に季節を判別</h1>
<p>ボタンをクリックすると月を入力するウインドウが表示されます。</p>
<p><button onclick='season()'>月別に季節を判別する</button></p>
</body>
</html>

繰り返し処理

「i++」を記述

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>繰り返し処理</title>
<script>
var i = 1;
function ans(){
  switch (i){
    case 1:
      alert("【ヒント】北海道は県ではありません");
      break;
    case 2:
      alert("【ヒント】東北地方にある県です");
      break;
    default:
      alert("答えは岩手県です");
  }
i++;
}
</script>
</head>
<body>
<h3>（問題）</h3>
<p>日本で最も面積が大きい“県”は何県でしょう？</p>
<p><button onclick="ans()">答えを見る</button></p>
<p>
※ボタンのクリックが2回までの間はヒントが表示されます。<br>
※ボタンを3回以上クリックすると、答えが表示されます。
</p>
</body>
</html>