JS 条件分岐もし～ならば if文の使い方とswitch文

今回は「条件分岐」について見ていきます。

「条件分岐」などと書くと少し難しく感じるかもしれませんが、とても簡単に言うと「もし～ならば、～する」と言う、いわゆる「if文」について見ていきます。

JavaScriptでも最もよく使われることの多い構文の一つなので、しっかりとマスターしていきましょう。

if … else
様々な使い方
1. 入れ子
2. and
3. or
4. not
switch文
あとがき

if … else

基本的な使い方

if (条件式) {
  条件式が true の場合に実行されるコード
} else {
  それ以外の場合に実行されるコード
}

let num = 3;

if (num >3){
    console.log('OK');
}else {
    console.log('BAD');
}
 BAD

if (num >= 3){
    console.log('OK')
}else {
    console.log('BAD')
}
 OK

JSの構文では最も有名な構文の一つが「if文」になります。

書籍やブログなど沢山の解説がありますので、ここでは簡単にご紹介します。

「if」の後の「()」内の条件式が「true」なら、「{}」内のコードが実行され、そうでないなら（「false」なら）、「else」の後の「{}」内のコードが実行されます。

「false」である時、何もしなくて良ければ、「else」の後の文は必要ありません。

また、複数の条件を付けるときは、「else if 」で繋いでいきます。

else if

let num = 10;

if(num > 10){
    '10より大きいです';
}else if (num <5){
    '5より小さいです';
}else if (num ===10){
    '正解です';
}
'正解です'

「elseif」ではなく「else if」と「else」と「if」の間にスペースを入れるのを忘れないでください。

内容は、10より大きいかどうか評価して、5より小さいかどうか評価して、ピッタリ10であるか評価しています。

numは10なので、「正解です」と返しています。

基本的な考え方

ここまで見てきてif文は分かりやすいと感じたでしょうか、それとも難しいと感じたでしょうか。

もし難しいと感じた方がいらっしゃったら、もう一度基本に戻って考えてみましょう。

let num = 10;

if(num > 10){　　　　　　　　// falseと評価
    '10より大きいです';
}else if (num <5){          // falseと評価
    '5より小さいです';
}else if (num ===10){       // trueと評価
    '正解です';
}
'正解です'

先程もご紹介した内容ですが、「()」の中の条件式が、それぞれ「true」であるか「false」であるかを評価しています。

if文を使うときは条件式の計算結果に注意がいってしまいますが、最初の頃は「true」である「false」であるかという概念をもってコーディングしてください。

let num = 10;

if(num){
    '10より大きいです';
}else if (num === 10){
    '正解です';
}

例えばこのような場合、どちらが出力されるでしょうか？

間違いやすいのですが、答えは「’10より大きいです’」が表示されます。

「num =10 」なので、「’10より大きいです’」が表示されることに違和感を覚えるかもしれません。

ではなぜそうなるかと言うことを考えると、先程ご説明した「true」であるか、「false」であるかという考え方が大切になってくるのです。

JSの条件文において何が「true」で何が「false」であるかということは事前に決まっています。

以下の表を見てください。

true	false
false以外	数値の「0」「-0」空文字「””」「null」「false」「undefind」「NaN」

(「NaN」はまず使うことがありませんが一応記述しておきます）

この表から分かるように、先程の問題の変数「num」は「10」であるので、「true」と判定されます。

そのため、条件に合うために「’10より大きいです’」が表示されるのです。

もしかしたら余計に分かりにくくなったかもしれませんが、大切な考え方なので覚えておいてください。

様々な使い方

入れ子

if (weather === 'rainy') {
  if (rainFall < 1) {
    ('雨は小降りです');
  } else if (rainFall >= 1) {
    ('雨が強いので傘が必要です');
  }
}

if文は入れ子としても使用することが出来ます。

and

if (weather === 'rainy' && rainFall < 1){
     ('雨は小降りです');
}else if (weather === 'rainy' && rainFall >=1){
    ('雨が強いので傘が必要です');
}

先程のコードを論理演算子「&&」と使って書くことも出来ます。

「&&」で繋いだ両方が「true」の場合は最初のテキストを、そうでなく、「else if 」以降が「true」であれば、2番目のテキストを返します。

or

if (weather === "rainy" || rainFall >= 1) {
  ("雨が降っています");
} else {
  ("雨は殆ど降っていません");
}

「or」を使う場合は、論理演算子「||」を使います。

ここでは2つの式ですが、さらに複数の式をつなげることも可能です。

どこかで「true」になれば、最初のテキストを返します。

「true」がなければ、2番目のテキストを返します。

not

if (!(weather === "rainy" || rainFall >= 1) ){
  ("雨は殆ど降っていません");
} else {
  ("雨が降っています");
}

「not」を使う場合は、論理演算子「!」を使います。

ここでは「or」と組み合わせていますが、「or」が「true」ならば、それを否定しますので、「false」になり、2番目のテキストを返します。

「or」が「false」ならそれを否定しますので、「true」となり、1番目のテキストを返します。

switch文

今まで「if…else」について見てきましたが、判定する条件が多数になるとコードの量が増えて見づらくなる場合があります。

そんなときに使えるのが「switch」文になります。

基本的な書き方は、以下になります。

switch{
case 条件 :
break;
case 条件 :
break;
default:
break;
}

以下、「if…else」文と比較してみましょう。

let fruits = 'apple';

if( fruits === 'banana'){
    'これはバナナです';
}else if( fruits === 'orange'){
    'これはオレンジです';
}else if( fruits === 'lemon'){
    'これはレモンです';
}else if( fruits === 'peach'){
    'これは桃です';
}else if( fruits === 'apple'){
    'これはりんごです';
}else if( fruits === 'banana'){
    'これはバナナです';
}else if( fruits === 'grape'){
    'これはぶどうです';
}else{
    ('これは果物ではありません');
}
'これはりんごです'

let fruits = 'apple';
switch(fruits){
    case 'banana':
        'これはバナナです';
        break;
    case 'orange':
        'これはオレンジです';
        break;
    case 'lemon':
        'これはレモンです';
        break;
    case 'peach':
        'これは桃です';
        break;
    case 'apple':
        'これはりんごです';
        break;
    case 'banana':
        'これはバナナです';
        break;
    case 'grape':
        'これはぶどうです';
        break;
    default:
        'これは果物ではありません';
        break;
}

'これはりんごです'

行は長くなりますが、書いているコードは、「case ‘banana’:」と「break;」の繰り返しになりますので、分かりやすく間違いも見つけやすいかと思います。

なお、気をつけて欲しいのが、「case」と「default」の後に続くのが「:（コロン）」で実行するコードと「break」の後には「;（セミコロン）」を書くということです。

switch文を書いていて上手く動かないときはまず最初に疑ってみてください。

なお、「default」は必要がなければ書かなくても問題ありません。