JavaScriptのif else if文

概要: このチュートリアルでは、JavaScriptのif...else...if文を使用して、複数の条件をチェックし、条件がtrueの場合に対応するブロックを実行する方法を学びます。

JavaScriptのif else if文の紹介

if文とif…else文は、単一の条件を受け入れ、条件に基づいてifブロックまたはelseブロックを実行します。

複数の条件をチェックし、条件がtrueの場合に対応するブロックを実行するには、次のようにif...else...if文を使用します。

if (condition1) {
  // ...
} else if (condition2) {
  // ...
} else if (condition3) {
  //...
} else {
  //...
}Code language: JavaScript (javascript)

この構文では、if...else...if文には3つの条件があります。理論的には、必要な数の条件を設定できます。各else...ifブランチには条件があります。

if...else...if文は、条件を上から下にチェックし、条件がtrueの場合に対応するブロックを実行します。

if...else...if文は、条件がtrueになるとすぐに残りの条件の評価を停止します。たとえば、condition2がtrueの場合、if...else...if文はcondition3を評価しません。

すべての条件がfalseの場合、if...else...if文はelseブランチのブロックを実行します。

次のフローチャートは、if...else...if文の動作を示しています。

JavaScriptのif else if文の例

if...else...if文を使用する例をいくつか見てみましょう。

1) JavaScriptのif…else…if文の簡単な例

次の例では、if...else...if文を使用して、月の番号から月の名前を取得します。

let month = 6;
let monthName;

if (month == 1) {
  monthName = 'Jan';
} else if (month == 2) {
  monthName = 'Feb';
} else if (month == 3) {
  monthName = 'Mar';
} else if (month == 4) {
  monthName = 'Apr';
} else if (month == 5) {
  monthName = 'May';
} else if (month == 6) {
  monthName = 'Jun';
} else if (month == 7) {
  monthName = 'Jul';
} else if (month == 8) {
  monthName = 'Aug';
} else if (month == 9) {
  monthName = 'Sep';
} else if (month == 10) {
  monthName = 'Oct';
} else if (month == 11) {
  monthName = 'Nov';
} else if (month == 12) {
  monthName = 'Dec';
} else {
  monthName = 'Invalid month';
}
console.log(monthName);Code language: JavaScript (javascript)

出力

Jun

この例では、月を1から12までの12個の数字と比較し、対応する月の名前をmonthName変数に代入します。

月は6なので、式month==6はtrueと評価されます。したがって、if...else...if文はリテラル文字列'Jun'をmonthName変数に代入します。そのため、コンソールにJunが表示されます。

月を1から12までの数字以外に変更すると、else句が実行されるため、コンソールに「無効な月」が表示されます。

2) JavaScriptのif…else…if文を使用してボディマス指数を計算する

次の例では、人のボディマス指数（BMI）を計算します。 if...else...if文を使用して、BMIに基づいて体重の状態を判断します。

let weight = 70; // kg
let height = 1.72; // meter

// calculate the body mass index (BMI)
let bmi = weight / (height * height);

let weightStatus;

if (bmi < 18.5) {
  weightStatus = 'Underweight';
} else if (bmi >= 18.5 && bmi <= 24.9) {
  weightStatus = 'Healthy Weight';
} else if (bmi >= 25 && bmi <= 29.9) {
  weightStatus = 'Overweight';
} else {
  weightStatus = 'Obesity';
}

console.log(weightStatus);Code language: JavaScript (javascript)

出力

Healthy Weight

仕組み

• まず、体重（キログラム）と身長（メートル）を保持する2つの変数を宣言します。実際のアプリケーションでは、これらの値はWebフォームから取得します。
• 次に、体重を身長の2乗で割ってボディマス指数を計算します。
• 3番目に、if...else..if文を使用して、BMIに基づいて体重の状態を判断します。
• 最後に、体重の状態をコンソールに出力します。

まとめ

• JavaScriptのif...else...if文を使用して、複数の条件をチェックし、条件がtrueの場合に対応するブロックを実行します。