JavaScript

【初心者向け】JavaScriptの条件分岐について優しく解説します

条件分岐は、プログラミングでよく使うもので、条件に応じて挙動を変更したい場合に使用します。
この記事では、そんなJavaScriptの条件分岐について、初心者向けに解説します。

条件分岐は主に「if文」と「switch」の二つを使用して行います。

JavaScriptで条件分岐【If文】

ifは、言葉のとおり「もし〇〇だったら△△する」という条件分岐で、下記の様に、ifの横に( )で条件(もし〇〇だったら)を書き、そこが「true(正しい場合)」の場合は、{ }の中(△△する)を実施します。

※このifの横の()内は、boolean型になっていて「true」か「false」が返されます。

if (条件式) {
    実行する処理;
}

 

【実際の例】

let num = 3;

//numは2より大きいため、コンソールに「numは2より大きい数字です。」と表示されます。
if(num>2){
  console.log("numは2より大きい数字です。")
}

//numは2より小さくないため、コンソールに何も表示されません。
if(num<2){
  console.log("numは2より小さい数字です。")
}

else文

シンプルなif文に関しては、条件に合致した場合(条件式の部分が「true」の場合)に{  }の中が実行されて、それ以外の場合には、何も起こりません

条件に合致しない場合に何かしら処理したい場合もあり、その場合には「else」を使います。

下記のように、if文の{ }の後にelse{ 実行する}と記述することで、if文以外の場合、elseの処理が実行されます。

※elseはif文の条件式以外の場合、全て適用されるため、条件式を記述する必要はありません。

if (条件式) {
    実行する処理;
}else{
    実行する処理;
}

 

【実際の例】

let num = 3;

//numは2より大きいため、if文の{ }が処理され、コンソールに「numは2より大きい数字です。」と表示される。
if(num>2){
  console.log("numは2より大きい数字です。")
}else{
  console.log("numは2より小さい数字です。")
}

//numは5より小さいため、else{ }が処理され、コンソールに「numは5より小さい数字です。」と表示される。
if(num>5){
  console.log("numは5より大きい数字です。")
}else{
  console.log("numは5より小さい数字です。")
}

else If文

if文だけを使用する場合、条件分岐が1つだけとなりますが、複数分岐が必要な場合があります。そうした時にif文に合わせて使うのが「else if」です。

下記のように、if文の{ }の後にelse if(条件式){ 実行する}と記述することで、if文の条件式が「false」だった場合に、else ifの条件式の判定がされ、「true」の場合に処理が実行されます。

if (条件式) {
    実行する処理;
}else if(条件式) {
    実行する処理;
}

 

【実際の例】

let num = 3;

//numは2より大きいため、if文の{ }が処理され、コンソールに「numは2より大きい数字です。」と表示される。
if(num > 2 ){
  console.log("numは2より大きい数字です。")
}else if(num < 2){
  console.log("numは2より小さい数字です。")
}

//numは5より小さいため、else ifの条件式が判定され、numは2より大きいため、{}が処理され、コンソールに「numは5より小さい数字です。」と表示される。
if(num > 5 ){
  console.log("numは5より大きい数字です。")
}else if(num > 2){
  console.log("numは2より大きい数字です。")
}

また、elseifで複数回使うことも可能です。

下記の例の様に、else if(条件式){処理内容}を繋げていけば条件式を増やしていくことも可能です。

【実際の例】

let str = "青";

//strは青のため、コンソールに「strは青色です。」と表示される。
if(str === "赤" ){
  console.log("strは赤色です。")
}else if(str === "黄"){
  console.log("strは黄色です。")
}else if(str === "青"){
  console.log("strは青色です。")
}
}

また、複数分岐をした上で、elseをつなぐことで、どの条件にも合わない場合の処理を記述することが可能です。

let str = "緑";

//strは、どの条件分岐にもあてはならないため、コンソールに「strは赤色でも黄色でも青色でもありません。」と表示される。
if(str === "赤" ){
  console.log("strは赤色です。")
}else if(str === "黄"){
  console.log("strは黄色です。")
}else if(str === "青"){
  console.log("strは青色です。")
}else{
  console.log("strは赤色でも黄色でも青色でもありません。")
}

 

複数の条件に当てはまる場合

else ifで複数の条件を記述する場合、複数の条件に当てはまることがあります。

例えば、下記のような場合、(num > 2)と(num >= 0)のどちらにも当てはまる(true)となります。そのような場合にどうなるかというと、一番最初に条件式が「true」となる(num > 2)の処理が実行され、コンソールには、「numは2より大きい数字です。」と表示されます。

let num = 3;

//コンソールに「numは2より大きい数字です。」と表示される。
if(num > 5 ){
  console.log("numは5より大きい数字です。")
}else if(num > 2){
  console.log("numは2より大きい数字です。")
}else if(num >= 0){
  console.log("numは正の数字です。")
}else{
  console.log("numは負の数字です。")
}

if文は、上から順番に条件式の判定を行い条件式に合致しない(false)の場合、次の判定式を確認し、条件式が合致した「true」場合に、その「true」となった{ }内の処理が実行され、それ以降の条件式の判定は行われません。

この例の場合、(num > 5 )が「false」のため、次の(num > 2)の判定をし、「true」となっているため、 コンソールには、「numは2より大きい数字です。」と表示し、それ以降の処理はされませんので注意してください。

JavaScriptで条件分岐【switch文】

条件分岐には、if文ともう一つswitch文があります。

※今後if文の方が使うことが多いと思いますが、記述によってはswitch文の方が良い場合もあるので、記述方法を覚えておきましょう。

switch文の記述は下記の様になります。swithの横の( )には、判定する変数などを入れ、caseの横のラベルという部分に値を記述し、変数と値が合致しているか、判定を行い、合致した場合、その処理を実行します。

処理を記述した後は、breakと記述し、switch文の処理から離脱します。

caseは複数記述することで、条件分岐を行うことができ、最後にdefaultを記述することで、条件のどれにも当てはまらない場合の記述をすることができます。

switch (式) {
    case ラベル1:
        実行する処理;
        break;
    case ラベル2:
        実行する処理;
        break;
    default:
        実行する処理;
        break;
}

 

【実際の例】

let str = "青";

//strは青のなので、コンソールに「strは青色です。」が表示される。
    switch (str) {
      case "赤":
        console.log("strは赤色です。")
        break
      case "黄":
        console.log("strは黄色です。")
        break
      case "青":
        console.log("strは青色です。")
        break
      default:
        console.log("strは赤色でも黄色でも青色でもありません。")
        break
    }

上記の例のcaseの部分をif文の例だとif(str === “赤” )のような記述になります。

    switch (str) {
    // if(str === "赤" )
      case "赤":
        console.log("strは赤色です。")
        break
    //else if(str === "黄")
      case "黄":
        console.log("strは黄色です。")
        break
    //else if(str === "青")
      case "青":
        console.log("strは青色です。")
        break
    //else
      default:
        console.log("strは赤色でも黄色でも青色でもありません。")
        break
    }

if文で記述するとこんな感じです。

let str = "青";

    if(str === "赤" ){
      console.log("strは赤色です。")
    }else if(str === "黄"){
      console.log("strは黄色です。")
    }else if(str === "青"){
      console.log("strは青色です。")
    }else{
      console.log("strは赤色でも黄色でも青色でもありません。")
    }

switch文でbreakを記述し忘れると

switch文は、caseごとにbreakを記述することで、処理が終わった後、switch文から離脱します。

では、breakを記述し忘れるとどうなるかというと、合致したcase以降のすべての処理が実行されてしまいます。

下記の例だと、case”青”で合致したため、コンソールに「strは青色です。」と表示されますが、breakで離脱しないため、次の「strは赤色でも黄色でも青色でもありません。」に関しても実行されてしまい、コンソールに表示されます。

こうなると、予期せぬ動作をしてしまう可能性がありますので、switch分を使用する場合には、breakをcaseごと必ず忘れないように記述しましょう。

let str = "青";

//strは青のなので、3つ目以降の処理がされ、コンソールに「strは青色です。」と「strは赤色でも黄色でも青色でもありません。」とが表示される。
    switch (str) {
      case "赤":
        console.log("strは赤色です。")
      case "黄":
        console.log("strは黄色です。")
      case "青":
        console.log("strは青色です。")
      default:
        console.log("strは赤色でも黄色でも青色でもありません。")

    }

JavaScriptで条件分岐【三項演算子】

三項演算子は、簡単なIF文を作ることができる演算子で、非常に便利です。

  • 三項演算子・・・ 条件式 ? trueの時の値 : falseの時の値

書き方は、上記の様になり、条件式の部分が「ture」か「false」の場合で表示するあたりを変更することが可能です。

【実際の例】

let num = 20;

 //「num>20」はfalseとなる 
let answer = num>20 ? "numは20より大きい数字です。":"numは20以下の数字です";

console.log( answer ); //「numは20以下の数字です」と表示される

let num2 = 25;

 //「num2>20」はtrueとなる 
let answer2 = num2>20 ? "num2は20より大きい数字です。":"num2は20以下の数字です";

console.log( answer ); //「num2は20より大きい数字です」と表示される