条件分岐 の

条件分岐について

基本的な構文

JavaScriptで条件に応じて処理を実行する一般的な方法は、if文です。 これは、ifキーワード、丸括弧（()）で囲んだ条件、波括弧（{}）で囲んだコードブロックからなります。 コードブロックは、条件がtrueと評価されたときだけ実行されます。

if (condition) {
  // code that is executed if "condition" is true
}

単独で使うことも、elseキーワードと組み合わせて使うこともできます。

if (condition) {
  // code that is executed if "condition" is true
} else {
  // code that is executed otherwise
}

入れ子になったif文

else文にもう1つ条件を入れ子にするには、else ifを使います。 JavaScriptにはelseifというキーワードはありませんので、注意してください。 代わりに、elseのあとに別のif文を書きます。

if (condition1) {
  // code that is executed if "condition1" is true
} else if (condition2) {
  // code that is executed if "condition2" is true
  // but "condition1" was false
} else {
  // code that is executed otherwise
}

理論上は、追加の条件をいくつでも入れ子にできます。 実際には、こうした場合は代わりにswitch文を使うでしょう。

if (condition1) {
  // ...
} else if (condition2) {
  // ...
} else if (condition3) {
  // ...
} else if (condition4) {
  // ...
} else {
  // ...
}

条件

複雑な条件を組み立てるときは、不要な括弧を避けるために演算子の優先順位表を参照してください。

if (num >= 0 && num < 1) {
  // ...
}

// The inner brackets are obsolete because relational operators
// have higher precedence than logical operators.
<!-- prettier-ignore-start -->

if ((num >= 0) && (num < 1)) {
  // ...
}
<!-- prettier-ignore-end -->

また、コードを読みやすくするために、追加の変数を使うことも検討しましょう。

const isPositive = num >= 0;
const isSmall = num < 1;
if (isPositive && isSmall) {
  // ...
}

JavaScriptでは、条件は真偽値型である必要はありません。 if文のような真偽値の文脈で真偽値以外の型が渡されると、JavaScriptはその値を暗黙的に真偽値に変換します。 どの値がそれぞれ_truthy_で、どの値が_falsy_なのかの詳細については、型変換のコンセプトを参照してください。

const num = 4;
if (num) {
  // this code block will be executed because 4 is truthy
}

省略記法

ifやelseのコードブロックで実行したい文が1つだけなら、JavaScriptでは波括弧を省略できます。

if (condition) doSomething();

// or

if (condition)
  doSomething();

これは、たとえばエラー条件をチェックするときなどに使われることがあります。 一般的にはおすすめしません。同じ条件に依存させたい2つ目の文を追加するときに、括弧を付け直すのを忘れやすいからです。

関数を書くときは、elseブロックを省略し、代わりにifブロックで早めにreturnするのがよくあるパターンです。 多くの場合、これによって_入れ子_が減り、コードが読みやすく、追いやすくなります。

function checkNumber(num) {
  let message = '';

  if (num === 0) {
    message = 'You passed 0, please provide another number.';
  } else {
    message = 'Thanks for passing such a nice number.';
  }

  return message;
}

// Can also be written as ...
function checkNumber(num) {
  if (num === 0) {
    return 'You passed 0, please provide another number.';
  }

  return 'Thanks for passing such a nice number.';
}