条件分岐の基本

JavaScript で条件分岐を行う方法のひとつである if 文の使い方について解説します。 if 文では記述した条件式が true か false かによって実行する処理を分けることができます。

目次

• if文の基本書式
• 条件式がfalseの時の処理(if..else)
• ブロックの括弧{}を省略する

if文の基本書式

if 文では条件式を評価した結果に応じて異なる実行する処理を分けることができます。書式は次の通りです。

if (条件式){
  条件式が true の時に実行する処理;
  ...
}

条件式が true を返した場合には if の直後のブロック内に記述された文を順番に実行します。条件式が false を返した場合には if 文の次へ処理が移ります。

※ ブロックというのは { から } までの間に記述された複数の文をグループ化したものです。

次の例を見てください。

let result = 78;

if (result >= 70){
  console.log('合格です');
  console.log('おめでとうございます');
}

この if 文では変数 result の値が 70 以上かどうかという条件式が記述されています。条件式が true を返した場合は直後のブロック内に記述されたコンソールへの出力を実行します。

今回の場合は条件式は true となりますので、ブロック内の処理が実行されます。

let result = 78;

if (result >= 70){
  console.log('合格です');
  console.log('おめでとうございます');
}

>> 合格です
>> おめでとうございます

条件式がfalseの時の処理(if..else)

if 文では条件式が true の場合だけではなく false の場合に別の処理を実行することができます。書式は次のとおりです。

if (条件式){
  条件式が true の時に実行する処理;
  ...
}else{
  条件式が false の時に実行する処理;
  ...
}

条件式が true を返した場合には if の直後のブロック内に記述された文を順番に実行します。条件式が false を返した場合には else のあとのブロック内に記述された分を順番に実行します。

次の例を見てください。

let result = 64;

if (result >= 70){
  console.log('合格です');
  console.log('おめでとうございます');
}else{
  console.log('不合格です');
  console.log('残念でした');
}

この if 文では変数 result の値が 70 以上かどうかという条件式が記述されています。条件式が true を返した場合は直後のブロック内に記述されたコンソールへの出力を実行します。また条件式が false を返した場合には else のあとのブロック内に記述されたコンソールへの出力を実行します。

今回の場合は条件式は false となりますので、 else のあとのブロック内の処理が実行されます。

let result = 64;

if (result >= 70){
  console.log('合格です');
  console.log('おめでとうございます');
}else{
  console.log('不合格です');
  console.log('残念でした');
}

>> 不合格です
>> 残念でした

ブロックの括弧{}を省略する

条件式が true または false だった場合に、実行する処理が 1 つの文だけだった場合はブロックを表す {} を省略することができます。

if (条件式)
  条件式が true の時に実行する処理;
else
  条件式が false の時に実行する処理;

より完結に記述することができますが、場合によってはどの文が実行されるのか分かりにくくなることもあるのでご注意ください。

— —

JavaScript で条件分岐を行う方法のひとつである if 文の使い方について解説しました。

チェックテスト

let speed = 60;