JavaScriptの条件分岐

どうも、ぺんしるです。

今日はJavaScriptの条件分岐について記載します。

if文
if elseif else 文
switch文
最後に

if文

条件によって、処理を分けたい場合に利用するのがif文です。

例えば、○○が▲▲の場合に□□をおこなう、のような処理を記載したい場合に利用します。

if文は以下のように記載します。以下の例では、変数aが0の場合にaを1インクリメントしています。

if (a == 0){　
   a++;
}

if elseif else 文

複数のif文を組み合わせることも可能です。その場合に利用するのが、if elseif else文です。

例えば、○○が▲▲の場合に□□をおこなうが、○○が▼ ▼ の場合には◆ ◆ をおこなう、のような複雑な条件分岐処理を記載したい場合に利用します。if elseif else文は以下のように記載します。

以下の例では、変数aが0の場合にaを1インクリメント、変数aが1の場合にaを1デクリメント、変数aが0でも1でもない場合は、変数aに100を代入しています。

if (a == 0){
   a++;
} else if (a == 1){
   a--;
} else {
   a = 100;
}

if文のネスト

if文はネストすることもできます。上記のif elseif else文は、以下と同じ意味になります。

if (a == 0){
   a++;
} else {
  if (a == 1){
     a--;
  } else {
     a = 100;
  }
}

ただし、ネストを多用すると可読性が落ち不具合につながるので、多用は避けたほうがよいです。

省略

if文はいくつか簡略化した書き方ができます。

ここでは、その書き方をご紹介しますね。

{}括弧の省略

if文の処理が1行の場合、{}を省略することができます。

//通常の書き方
if (a > 0){
   //処理
}

確実に1行で済むような処理の場合には、省略して書きます。1行で書く書き方をワンライナーと呼びます。

//省略した書き方
if (a > 0)
   //処理

この書き方ができるのは処理が1行の場合のみです。処理が複数行の場合には使用できません。正確に言うと、複数行ある場合には先頭の1行しかif文内で処理されません。そのため、以下のように書いた場合には、処理Aしかif文内では処理されずに、処理Bはif文の条件への合致可否にかかわらず、実行されます。

//省略した書き方
if (a > 0)
   //処理A
　 //処理B

このような背景もあるため、省略文は不具合を生む可能性があります。確実に処理が1つしかない場合にしか使用しないほうが良いです。ぺんしるの場合は、処理が複数になりそうな場合には、{}括弧付きで書いています。

三項演算子の利用

if文は三項演算子を使用して簡略化することができます。

例えば、変数aが0の場合には変数bに1を代入、変数aが0以外の場合には変数bに2を代入する式は、if文と三項演算子では以下のように記載することができます。

//if文を使用した場合
if (a == 0){
   b = 1;
} else {
   b = 2;
}

//三項演算子を使用した場合
b = (a == 0) ? 1 : 2;

三項演算子を使用したほうが、行数が少なくすっきりしたコードになりますね。

true/falseの省略

条件式において、ある変数が true か false かを判断する場合は、以下のような省略した書き方がよく使われます。

if (a == true){
   //処理
}

上記式は、以下のように== trueの部分の記載を省略して書くこともできます。

if (a){
   //処理
}

変数aがtrueではない場合は、以下のように変数aの前に!を記載します。

if (!a){
   //処理
}

switch文

if文以外にも、条件によって処理を振り分ける記載方法があります。それがswitch文です。

以下の例では、変数aが0の場合に変数bに0を代入、変数aが1の場合に変数bに1を代入、変数aが2か3の場合に変数bに2を代入、それ以外の場合は変数bに100を代入しています。

1つのcaseの終わりには、必ずbreak句を入れて処理を抜けてください。breakを入れないと次のcaseの処理が呼ばれることになります。

var a = 0;
var b = -1;
switch (a) {
 case 0:
   b = 0;
   break;
 case 1:
   b = 1;
   break;
 case 2:
 case 3:
   b = 2;
   break;
 default:
   b = 100;
   break;
}

上記式をif文で記載すると、以下になります。どちらも同じ結果になります。

if (a == 0){
   b = 0;
} else if (a == 1){
   b = 1;
} else if (a == 2 || a == 3){
   b = 2;
} else {
   b = 100;
}

と書くと、以下の疑問が生まれるかもしれません。

エンジニア

ifとswitchの使い分けは？

ぺんしる

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

if文よりswitch文のほうが可読性があることが分かるかと思います。1つの条件文の中にelse ifが複数あると見づらいですよね。else ifを多用する場合はswitch文を利用、else ifが少ない場合はif文を利用、と理解しておくとよいです。

例）else ifを多用した場合

//else ifが複数の場合、可読性が落ちる
if (a == 0){
   b = 0;
} else if (a == 1){
   b = 1;
} else if (a == 2){
   b = 2;
} else if (a == 3){
   b = 3;
} else {
   b = 100;
}

例）else ifをswitchで書き換えた場合

//switchを使用すると、if文より可読性が上がる
switch (a) {
 case 0:
   b = 0;
   break;
 case 1:
   b = 1;
   break;
 case 2:
   b = 2;
   break;
 case 3:
   b = 3;
   break;
 default:
   b = 100;
   break;
}

仕事で開発者のコードレビューすることがよくありますが、switch文はあまり使われていません。if文で書けるのであればif文で書く、という開発者が多いのが現状ではと感じます。