条件分岐

条件によって処理を変えたいときには、条件分岐を使用する。

条件式の値がtrueかfalseで処理を変えることができる。

- if, else if, else
- switch, case, default

if(条件式) { ... } else { ... }

まずは構文から。

if(条件式) {
    trueだった場合の処理;
} else {
    falseだった場合の処理;
}

条件式の値はtrueだった場合は最初の処理が実行されて、falseだった場合にはelseの後の処理が実行される。

使用例

let age = 20;

if(30 <= age) {
   console.log("30歳以上です");
} else {
   console.log("30歳以下です");
}

上記の例ではageは20と定義されているので（30 <= 20）という式となり、間違っている（false）のでelse以降の処理が実行される。

if(条件式①) { ... } else if(条件式②) { ... } else { ... }

条件式が複数ある場合にはelse ifを使用して追加することができる。

if(条件式①) {
    trueだった場合の処理;
} else if(条件式②) {
    trueだった場合の処理;
} else {
    falseだった場合の処理;
}

プログラムは上から順番に実行していくので最初に条件式①を確認してtrueであればその直後の処理を、falseであれば次に条件式②を確認してtrueであればその直後の処理を、どの式もfalseだった場合には最後のelse以降の処理が実行される。

なお、else ifによる条件式はいくつでも追加可能。

使用例

let age = 22;

if(age <= 20) {
    console.log("歳は20歳以下です");
} else if (21 <= age <= 30) {
    console.log("歳は21歳から30歳の間です");
} else {
    console.log("歳は31歳以上です");
}

上記の例ではageは22となっており、条件式②に合致するため『歳は21歳から30歳の間です』と出力される。

条件式 ? trueの処理 : falseの処理

if elseの処理は短く書くこともできる。

条件式 ? trueの処理 : falseの処理;

コードが読みにくくなる欠点があるのであまり使わなくても良い。

使用例

let age = 20;

30 <= age ? console.log('30歳以上です') : console.log('30歳以下です');

// 下記と同義

if(30 <= age) {
   console.log('30歳以上です');
} else {
   console.log('30歳以下です');
}

switch(値) case: 処理; default: 処理;

条件式の複数が===（等しい）の式になる場合、switchを使用して簡潔にコードを書くことができる。

まずは構文から。

switch(比較する値) {
    case A:
        処理;
        break;
    case B:
        処理;
        break;
    ...:
    default:
        処理;
        break;
}

◯◯の場合、△△の場合と分けて処理を行う。どの場合にも当てはまらない処理にはdefaultの処理が実行される。

各caseの最後には必ずbreakを入れないと次のcaseの処理も実行してしまうので注意。

使用例

例えば下記の式。

let color = 'red';

if(color === 'red') {
   console.log('赤です');
} else if(color === 'yellow') {
   console.log('黃です');
} else if(color === 'blue') {
   console.log('黃です'); 
} ... {
    ...;
}

赤の場合、黄の場合、青の場合・・・と考えることもできる。そこで下記のように書き換える。

let color = 'red';

switch(color) {
    case 'red':
        console.log('赤です');
        break;
    case 'yellow':
        console.log('黃です');
        break;
    case 'blue':
        console.log('青です');
        break;
    default:
        console.log('どれでもありません');
        break;
}

colorが赤、黃、青であれがそれぞれの処理が実行されて、そのどれでもない場合は最後のdefaultの処理が実行される。

defaultはif文のelseのような立ち位置だと思って良い。

※このnoteはProgate・ドットインストール・Udemyなどの教材から学習した内容をまとめており、初心者から中級者になるレベルを目指しています。ご指摘点あればコメントにてお願いします。
+--------------------------------------------------------------------------+
しょうみゆ@WEBエンジニア
twitter@MykiiTech
インフラエンジニアとWEBマーケティングで仕事した人。日本×フィリピンのハーフ。ごはんと仕事とおしゃべりが大好き。ワンストップでサービス提供できるフルスタックエンジニアになるべく、まずはフロントエンドエンジニアから攻め中。HTML/CSSは得意。
+--------------------------------------------------------------------------+