JavaScript　９日目

第９章：switch文

switch文の使い方

switch文は式と値に応じて複数の選択肢から一致する箇所の処理を実行するもの。
「式の値」と「caseの値」は厳密等価演算子「===」で確認する。

if文は条件式の結果に応じて「true」ブロックと「false」ブロックの２つから選択した（二分岐）。switch文は選択する処理が２つ以上ある場合（多分岐）に適している。

switch(式の値){
  case 値1:
    値1と合致した時の処理
    break;
  case 値2:
    値2と合致した時の処理
    break;
            :
  default:
    どのcaseにも該当しなかった時の処理
    break;
}

case節：式の値と一致するか調べる

switch文は「true」「false」の判定ではなく、「式の値」とそれに対応した「case節の値」が合致するかで処理を選択する。case節は「case (半角スペース)値:」と記述する。

default節：該当するcase節がなかった時の処理（省略可能）

default節は該当するcase節がなかった場合に選択される。必要ない場合は省略してもOK。JavaScriptの場合default節はどこに記述してもOK（最初でもOK）ですが
最後に記述することが多い。

break文：switch文を終了させる（省略可能）

各case節の最後にbreak文を記述すると、該当するcase節の処理終了時点でswitch文を抜け次の処理に移行する。case節のbreak文を省略すると該当するcase節以降の処理を最後まで実行し続ける。もし別のcase節にbreak文があった場合はそこでswitch文を終了させる。

switch文の「()丸カッコ」内に式の値を記述する。今回は変数numの値に応じてcase節を選択する。

var num = 3;

console.log('１回目の出力');
// 「()内の評価する値」と「caseの値」を厳密等価演算子で確認
// 一致する値のcase以降を実行
// 「break;」が出てきたらswitch文を抜ける

switch (num) {
  case 1:
    console.log('1の処理');
    break;
  case 2:
    console.log('2の処理');
    break;
  case 3:
    console.log('3の処理');
    break;
  default:
    console.log('該当なしの処理');
    break;
// どのcaseにも合致しない時に
// default以降の処理を実行する
// (不要なら省略可)
}

一番上のcase節から順番に厳密等価演算子で照合していく。変数numには数値型の「3」が入っているので「case3:」と合致する。

合致したcase節以降の処理を実行しコンソールに「3の処理」を出力する。

コンソール出力後「break;」があるのでswitch文を終了させる。

　↓「２回目の出力」のswitch文を確認する。

console.log('２回目の出力');
switch (num) {
  case '1':
    console.log('1の処理');
    break;
  case '2':
    console.log('2の処理');
    break;
  case '3':
    console.log('3の処理');
    break;
  default:
    console.log('該当なしの処理');
    break;
}

「式の値」と「case節の値」を厳密等価演算子「===」で照合していく。

変数numには数値型の「3」が入っているため、case節の文字列の「’3’」とは合致せず、該当がない場合に選択されるdefault節を実行している。

　↓「３回目の出力」のswitch文を確認する。「式の値」は文字列でもOK。

console.log('３回目の出力');
var text = '赤';
switch (text) {
  case '黒':
    console.log('規律');
    break;
  case '赤':
    console.log('活発');
    break;
  case '緑':
    console.log('信頼');
    break;
}

変数textには文字列型の「’赤’」が入っているため、case節の文字列型の「’赤’」と合致する。

またdefault節を省略している。このように不要な場合はdefault節を記述しなくてもOK。

参考：switch文（トランプ）

if文との組み合わせ、if文の入れ子

※整数判定：<Number.isInteger(変数名)>

console.log('問題２：トランプ');
var card = 13.2;
if (Number.isInteger(card)) {
  if (card >= 1 && card <= 13) {
    switch (card) {
      case 1:
        console.log('A');
        break;
      case 11:
        console.log('J');
        break;
      case 12:
        console.log('Q');
        break;
      case 13:
        console.log('K');
        break;
      default:
        console.log(card);
        break;
    }
  } else {
    console.log('1～13を入れてね');
  }
} else {
  console.log('整数で入れてね');
}

補足：break文省略時の動き

case節のbreak文を省略すると該当するcase節以降の処理を最後まで実行し続ける。
もし別のcase節にbreak文があった場合はそこでswitch文を終了させる。

console.log('１回目の出力');
var rank = 'B';
switch(rank){
  case 'A' :
  case 'B' :
  case 'C' :
    console.log('合格');
    break;
  case 'D' :
    console.log('不合格');
    break;
}

変数rankに文字列「’B’」を代入してswitch文を実行する。

switch文の「式の値」に変数rankを指定しているためcase節「’B’」と合致する。

case節「’B’」には処理もbreak文もないためcase節「’C’」に処理が移動しコンソールに「合格」を出力する。

このようにあえbreak文を記述しないことで複数ケースに同一処理を施すことも可能。

「合格」出力後、break文があるのでswitch文を終了させる。

第１０章：while文（do while文は後回し）

while文の使い方

while文は繰り返し処理のひとつで条件が満たされている間、特定の処理を実行し続ける。

while(条件式){
  条件式true時の繰返し対象処理
}

while文の後の「()丸カッコ」内に条件を記述。条件が満たされている間（true時）に「{}中カッコ」内の処理を実行し続ける。

条件が満たされなくなった（false）時に繰り返し処理を抜けwhile文を終了する。

var num;
var star;

console.log('１回目の出力');
num = 0;  // A　カウント変数
while (num < 3) {  // B　カウント変数で条件
  console.log(num);  // C
  num++;  // D　カウントアップさせる（※重要：忘れると無限ループする）
}

A.変数numに「0」を代入してwhile文に処理が移る。

B.while文の条件を確認する。
変数numには「0」が入っているため、「変数numは3より小さい」の条件が満たされる（true）。

C.while文の条件が満たされた（true）時は直後の「{}中カッコ」ブロック内の処理を実行する。

コンソールに変数numの値「0」が出力される。

D.その後「num++」によって変数numの値が1加算されて「0」から「1」に変わる。

繰返し処理：２回目

while文の「{}中カッコ」ブロック内にある繰返し対象処理がすべて実行されると、再び条件を確認する。

B.変数numには「１」が入っているため、「変数numは3より小さい」の条件が満たされる（true）。

C.while文の条件が満たされた（true）ので、直後の「{}中カッコ」ブロック内の処理を実行する。

コンソールに変数numの値「1」が出力される。

D.その後「num++」によって変数numの値が1加算されて「1」から「2」に変わる。

繰返し処理：３回目

while文の「{}中カッコ」ブロック内にある繰返し対象処理がすべて実行されたので、再び条件を確認する。

B.変数numには「2」が入っているため、「変数numは3より小さい」の条件が満たされる（true）。

C.while文の条件が満たされた（true）ので、直後の「{}中カッコ」ブロック内の処理を実行する。

コンソールに変数numの値「2」が出力される。

D.その後「num++」によって変数numの値が1加算されて「2」から「3」に変わる。

繰返し処理：４回目

while文の「{}中カッコ」ブロック内にある繰返し対象処理がすべて実行されたので、再び条件を確認する。

B.変数numには「3」が入っているため、「変数numは3より小さい」の条件が満たされない（false）。

while文の条件が満たされない（false）時、繰り返し処理は実行されず、while文は終了して次の処理に進む。

console.log('２回目の出力');
num = 0;
while (num < 3) {
  console.log('★');
  num++;
}

【問題】いろいろなパターンで「★☆★☆★」出力

// 問題
// ★
// ☆
// ★
// ☆
// ★
console.log('問題：☆キラキラ');

console.log('if文');
num = 0;
while (num < 5) {
  if (num % 2) {  // 1=true
    console.log('☆');
  } else {  // 0=false
    console.log('★');
  }
  num++;
}

// ifを使わない
// 三項演算子
console.log('三項演算子');
console.log('パターン１');
num = 0;
while (num < 5) {
  num % 2 ? console.log('☆') : console.log('★');
  num++;
}
console.log('パターン２');
num = 0;
while (num < 5) {
  console.log(num % 2 ? '☆' : '★');
  num++;
}

console.log('switch文');
num = 0;
while (num < 5) {
  switch (num % 2) {
    case 1:
      console.log('☆');
      break;
    case 0:
      console.log('★');
      break;
  }
  num++;
}

繰返し処理を使って文字列連結

変数starに「”(空文字)」、変数numに「0」が代入された後、while文を実行する。

繰返し処理の度に文字列連結代入演算子によって変数starに文字列が連結される。

var num;
var star;

console.log('３回目の出力');
star = '';  // ★を貯めて画面に出力する変数
num = 0;    // カウント変数
while (num < 3) {  //カウント変数で条件：3回
  star += '★';　// 文字列連結代入で★を貯める
  num++; //カウント変数をカウントアップ（インクリメント）
}

// （確認用）貯めた★をコンソールに出力
console.log(star);

// 貯めた★をブラウザに出力
document.getElementById('display1').innerHTML = star;

【勝手に応用問題】

// 三項演算子
star = '';
num = 0;
while (num < 10) {
  star += (num % 2 ? '☆' : '★');
  num++;
}
console.log(star);
document.getElementById('display1').innerHTML = star;

// switch文
star = '';
num = 0;
while (num < 10) {
  switch (num % 2) {
    case 1:
      star += '☆';
      break;
    case 0:
      star += '★';
      break;
  }
  num++;
}
console.log(star);
document.getElementById('display1').innerHTML = star;

補足：ID属性で指定した要素の内容を変更する

document.getElementById('対象要素のID名').innerHTML = 変更したい内容;

()内に文字列で変更対象要素のID名を記述する。
代入演算子を使って対象要素の内容を変更する。

<document.getElementById('display1').innerHTML = star;>

上記はID名「display1」の内容を変数「star」がもつ値に変更している。

<div id="display1">表示箇所１</div>

繰り返し対象処理ブロック内で分岐処理

繰返し対象処理ブロック内に分岐処理を入れ子にして記述することができる。

変数numに「0」が代入された後、while文を実行する。

console.log('１回目の出力');
num = 0;
while (num < 30) {
  繰返し対象処理
}
console.log('while文終了後：' + num);

while文の繰返し対象処理部分にif文を入れ子にして記述できる。

var num;
var message;
var star;

console.log('１回目の出力');
num = 0;
while (num < 30) {
  if (num%5 == 0) {
    console.log(num);
  }
  num++;
}
console.log('while文終了後：' + num);

変数numは0から始まり、繰返し処理が実行されるたびに「1」ずつカウントアップされていく。

繰返し条件が「num < 30」なので0から29まで30回繰返し処理が実行される。

変数numが「30」になった時にwhile文の繰返し条件が「false」になりwhile文を終了させ、コンソールに変数numの値「30」を出力する。

繰返し対象処理内にはif文が記述されており、変数numが0から29まで30回繰返し処理をする間、毎回if文の分岐処理が実行される。

if文の条件式が「num%5 == 0」なので変数numが5で割り切れた時のみコンソールにnumの阿智あを出力する。

画面表示時に改行させる

画面表示時に改行させるにはHTMLの改行タグ<br>を使用する。
またソースコードで改行させるにはエスケープシーケンス「\n」を使用する。

if文ブロック内が処理されるのは変数numが5で割り切れる「0」「5」「10」「15」「20」「25」の6回。

繰返し処理の度に文字列連結代入演算子によって変数messageに文字列が連結されていき「0<br>\n5<br>\n10<br>\n15<br>\n20<br>\n25<br>\n」の文字列になる。

HTML内id名「display1」の要素内が変数messageの文字列に変更される。ブラウザは文字列の改行タグ「<br>」を解釈して画面表示時に改行させる。ソースコードは「\n」箇所で改行される。

無限ループに注意

繰返し処理の条件式がfalseにならない場合、繰返しが終了せずに無限ループになってしまう。無限ループにならないよう繰返し条件式は慎重に記述する。

無限ループになってしまうとしばらくブラウザを操作することができなくなったり、強制終了することがある。

無限ループになってしまったらブラウザタブ、もしくは画面を終了させ、プログラムを修正した後に再度表示する。

　・・・（do while文は後回し）

第１１章：for文

for文の使い方

for文は指定された回数繰返し処理を実行させるときに使用する。
初期化式、繰返し条件式、増減式をまとめて記述することができる。

for(初期化式; 繰返し条件式; 増減式){
  条件式true時の繰返し対象処理
}

for文の後の「()丸カッコ」内に「初期化式」「繰返し条件式」「増減式」の３つを記述する。

初期化式は主にカウント変数の初期化に使用する。

繰返し条件式は主にカウント変数の値を使って条件を記述する。

増減式は繰返し処理が実行されるたびにカウント変数の値を増減させる式を記述する。

今までの繰返し処理と同じように条件が満たされている間（true時）「{}中カッコ」内の繰返し対象処理を実行し続ける。

条件が満たされなくなった（false）時に繰返し処理を抜けfor文が終了する。

for(var i 0; i<繰返したい回数; i++){
  条件式true時の繰返し対象処理
}

var star;

console.log('１回目の出力');
var num = 0;　// 初期化部分
while (num < 3) {  // 条件部分
  console.log(num);
  num++;  // 増減部分
}

while文で繰返し回数を数えていた「変数num」はwhile文に入る前に初期化「var num = 0」され、繰返し対象処理の中でカウントアップ（増減式）「num++」に使われていた。