条件分岐｜1から始めるJavaScript#6

どうもRyokutyaです。
今回はif文について説明していきたいと思います。
if文が使えるようになるといろいろな条件をつけたcodeが書けるようになり一気にたくさんのことができるようになります。

if文

if（もし~なら）とelse（そうしないと）で構成される構文です。

if(条件式){

 条件式がtrueの場合に実行する処理

}else{

 条件がfalseの場合に実行する処理

}

ifの後の()の中に条件式を記述すると条件式が真か偽かを判断し答えによって実行する処理を分けてくれます。
書き方は違いますが前回出てきた三項演算子と同じですね！

let a=1;

if( a > 0 ){

  console.log('aは0より大きいです');

}else{
 
  console.log('aは0より小さいです。');

}

//aは0よりも大きいです。



let b=-1;

if( b > 0 ){

  console.log('bは0より大きいです');

}else{
 
  console.log('bは0より小さいです。');

}

//bは0より小さいです。

複数の条件設定

先ほどは最もシンプルなif文を書きましたが、if文は複数の条件を設定することができます。
複数の条件を設定することでより複雑な条件にも対応できます。

let a=10;

if( a > 100 ){

  console.log('aは100より大きいです。');

}else if( a > 50 ){

  console.log('aは100より小さく50より大きいです。');

}else if( a > 10 ){

  console.log('aは50より小さく10より大きいです。');

}else{
  console.log('aは10より小さいです。');
}

このようにelseの後ろにif（条件式）を記述することでいくつでも条件をついかすることができます。

if文は条件式がtrueになった時点で以降の処理を実行しないので注意してください。

上記のようなcodeの場合、変数aに格納された値は10なので0よりも大きいため1つ目の処理が行われます。
2つ目の条件式も10は5より大きいため真なのですが、1つ目の処理が行われた時点でif文を抜けるため評価すらされません。
そのため2つ目の式が実行されることはないので注意しましょう。

switch文

三項演算子とif文のほかにもう1つ条件分岐の構文を紹介していきましょう。

switch(式){
case 値1:
  式と値1が一緒だった場合の処理;
  break;
case 値2:
  式と値が一緒だった場合の処理;
  break;
case 値3:
  式と値3が一緒だった場合の処理;
  break;
     .
     .
     .
default:
  全てのcaseに該当しなかった場合の処理;
}

switch文は式と値が同じだった場合、対応する処理を実行します。

let classRoom='B';
       switch(classRoom){
           case 'A':
             console.log('あなたはAクラスです。');
           break;

           case 'B':
             console.log('あなたはBクラスです。');
           break;

           case 'C':
             console.log('あなたはCクラスです。');
           break;

           default:
               console.log('留年です。');
       }
//あなたはBクラスです。

defaultは設定しなくても問題ないです。
設定しなくてもエラーになるわけではないですが、どのcaseにも該当しなかった場合の挙動を明確にするために省略せずに記述するようにしましょう。
switch文で書ける処理は絶対にif文でも書くことができるため、最悪switch文は覚えなくてもいいですが、基本的にswitch文の方が直感的でわかりやすく、可読性が高いです。
試しに上記のcodeをif文で書くと・・・

let classRoom='B';

      if( 'A' === classRoom ){

          console.log('あなたはAクラスです。');

      }else if( 'B' === classRoom ){

        console.log('あなたはBクラスです。');

      }else if( 'C' === classRoom ){

        console.log('あなたはCクラスです。');

      }else{

        console.log('留年です。');

      }
//あなたはBクラスです。

となります。
何度もelse　ifを書いて似たような条件式を記述しないといけませんし、パッと見た時わかりにくいですね。
switch文はif文に比べて直感的でわかりやすい反面、複雑な条件分岐を記述することができません。
「＜」、「＞」などの論理演算子を使った文が書けませんそのため「一定値以上なら~」のような条件分岐ができないのです。
複雑分岐が必要な場合はif文、単純な条件分岐ならswitch文というように使い分けるていきましょう！

breakについて

各caseの処理の後に必ずbreak;を入れるようにしてください。
このbreakはよく忘れるので注意しましょう。
忘れると大変なことになります！

let classRoom='B';
       switch(classRoom){
           case 'A':
           console.log('あなたはAクラスです。');

           case 'B':
           console.log('あなたはBクラスです。');

           case 'C':
           console.log('あなたはCクラスです。');

           default:
               console.log('留年です。');
       }
//あなたはBクラスです。
//あなたはCクラスです。
//留年です。

switch文は「条件に一致するcaseまで処理をジャンプさせる文」とも言えます。
なのでbreakを記述し明示的に「処理を中断してswitch文を抜ける」と記述しないとJavaScriptのルールに従って上から順に処理を実行してしまいます。
結果として合致するcaseの処理からその後の処理を全て実行してしまいます。

おわりに

今回は条件分岐について説明してきました。
少しずつ難しくなってきましたね。
今回説明した条件分岐の文と次回説明する繰り返しの文を使えばいろいろなことができるようになるので頑張って使いこなせるようになりましょう！
では今回はこのあたりで(^^)/