JavaScript #2 条件分岐

2020年12月12日

JavaScritptは他のプログラム言語同様に、条件分岐や繰り替えしなどの処理制御ができ、今回は条件分岐をまとめていきたいと思います。

条件分岐

条件分岐とは、ある条件に合致する場合と合致しない場合で異なる処理を行いたい場合に使用します。条件分岐にはif文とswitch文があります。条件に関しては、比較演算子を用いた比較式を使います。条件に関しては1つ以上指定する必要があり、複数指定することもできます。
比較演算子は以下のようなものがあります。JavaScriptでは等しい場合の評価が2種類あるため、気をつける必要があります。数字の「1」と文字の「1」を混同してバグの温床にならないように基本的には「===」,「!===」を使うほうがよいです。

A==BAとBが等しい場合に条件を満たします。
A!=BAとBが等しくない場合に条件を満たします。
A===BAとBが等しくかつ、AとBのデータ型も同じ場合に条件を満たします。
A!==BAとBが等しくないまたは、AとBのデータ型がことなる場合に条件を満たします。
A>BAよりBが大きい場合に条件を満たします。A=Bは含まない。
A>=BBがA以上の場合に条件を満たします。A=Bを含む。
A<BAよりBが大きい場合に条件を満たします。A=Bは含まない。
A<=BAがB以下の場合に条件を満たします。A=Bを含む。

if文

まずはif文から見ていきましょう。
if文の文法はこんな感じ。条件分岐したい条件をcondition,condition2として、条件に合致すると合致した範囲の処理(波括弧内のコードが実行される)を行います。条件に合致しない場合はelse内の処理を行います。

if (condition) {
  console.log("conditionに合致しました");
} else if (condition2){
  console.log("condition2に合致しました");
} else  {
  console.log("condition1,condition2に合致しませんでした");
}

それでは具体的に動かしてみた。
まずは最初の一歩、簡単な処理分岐はこんな感じ。
変数nunmberが1だったら、「変数numberは1です。」と表示させます。変数numberが1でないと何も表示されません。

let number =1;

if(number ===1){
  console.log("変数numberは1です。");
}

上の場合は、1かどうか2つの処理分岐でしたが、3つ以上に処理分岐することもできます。
こんな感じ。
変数numberが2だったら、「変数numberは2です。」と表示されます。もちろん変数numberが1でも2でもない場合は何も表示されません。

let number =2;

if(number ===1){
  console.log("変数numberは1です。");
}else if(number ===2){
  console.log("変数numberは2です。");
}

また、変数numberが1でも2でもない場合に「変数numberは1でも2でもありません」と表示したい場合は今感じ。

let number =0;

if(number ===1){
  console.log("変数numberは1です。");
}else if(number ===2){
  console.log("変数numberは2です。");
}else{
  console.log("変数numberは1でも2でもありません");
}

さらに、if文の条件分岐内にさらに条件分岐を書く(ネスト)することも可能です。

let number =1;
let number2 =2;

if(number ===1){
  console.log("変数numberは1です。");
  if(number2 ===2){
    console.log("変数number2は2です。");
  }
}

switch文

条件分岐にはif文の他にswitch文があります。ifでは、条件がAの場合、Bの場合、Cの場合には都度ifやelse ifで分岐していましたがswitch文では条件分岐が複数ある場合に、以下のような書き方になります。
とはいえ、条件分岐が数個の場合は、if文を使ったほうが書きやすいと思います。

switch文の書き方はこんな感じです。比較したいもの(condition)として、条件(contidion_A,condition_B)とそれ以外(default)と書きます。各caseの最後にはbreakを書きます。書き忘れると、breakの次の処理も実行されてしまうので注意が必要です。

switch (condition) {
  case condition_A:
    consle.log("conditionはAです。");
    break;
  case condition_B:
    consle.log("conditionはBです。");
    break;
  default:
    consle.log("conditionはAとB以外です。");
    break;
}

実際に書くとこんな感じ。
変数Todayに「Wednesday」が入っているため、「今日は水曜日です。」と表示される。if文と記述する量はそんなに変わらないですね。。。

let Today ="Wednesday";

switch(Today){

  case "Monday":
    console.log("今日は月曜日です。");
    break;
  case "Tuesday":
    console.log("今日は火曜日です。");
    break;
  case "Wednesday":
    console.log("今日は水曜日です。");
    break;
  case "Thursday":
    console.log("今日は木曜日です。");
    break;
  case "Friday":
    console.log("今日は金曜日です。");
    break;
  case "Saturday":
    console.log("今日は土曜日です。");
    break;
  default:
    console.log("今日は日曜日です。");
    break;
}

以上、今回は条件分岐に関してまとめてみました。間違ってたらごめんなさい。

Program

Posted by Qtaro