JavaScript/if

if

if は、JavaScript において条件分岐を行うためのキーワードです。与えられた条件式の評価結果が true の場合にのみ、特定のコードブロックを実行します。if 文は、プログラムの制御フローを管理する基本的な方法の1つです。

構文

基本構文

if (条件式) {
  // 条件が true の場合に実行されるコード
}

if...else 構文

if (条件式) {
  // 条件が true の場合に実行されるコード
} else {
  // 条件が false の場合に実行されるコード
}

if...else if...else 構文

if (条件式1) {
  // 条件式1が true の場合に実行されるコード
} else if (条件式2) {
  // 条件式1が false かつ条件式2が true の場合に実行されるコード
} else {
  // 上記の条件がすべて false の場合に実行されるコード
}

使用例

基本的な if 文

const number = 10;

if (number > 5) {
  console.log('number は 5 より大きい');
}
// 出力: number は 5 より大きい

if...else 文

const number = 3;

if (number > 5) {
  console.log('number は 5 より大きい');
} else {
  console.log('number は 5 以下');
}
// 出力: number は 5 以下

if...else if...else 文

const number = 7;

if (number > 10) {
  console.log('number は 10 より大きい');
} else if (number > 5) {
  console.log('number は 5 より大きいが、10 以下');
} else {
  console.log('number は 5 以下');
}
// 出力: number は 5 より大きいが、10 以下

ネストされた if 文

const number = 8;

if (number > 5) {
  if (number % 2 === 0) {
    console.log('number は 5 より大きく、偶数です');
  } else {
    console.log('number は 5 より大きく、奇数です');
  }
}
// 出力: number は 5 より大きく、偶数です

三項演算子との比較

if 文の代わりに、短い条件分岐には三項演算子（? :）を使うことができます。

// if 文を使った場合
const age = 20;
let message;

if (age >= 18) {
  message = '成人です';
} else {
  message = '未成年です';
}

console.log(message);
// 出力: 成人です

// 三項演算子を使った場合
const message2 = (age >= 18) ? '成人です' : '未成年です';
console.log(message2);
// 出力: 成人です

注意点

• if 文の条件式は必ず論理値に評価されますが、JavaScript の「truthy」と「falsy」に注意する必要があります。
  • Falsy: false, 0, (空文字列), null, undefined, NaN
  • Truthy: 上記以外のすべての値
• ネストされた if 文が深くなると、コードが読みにくくなるため、適切な構造や三項演算子、論理演算子の使用を検討してください。

関連項目

• else
• switch
• 三項演算子

参考

• MDN Web Docs: if...else 文
• ECMA-262: if 文