【React初心者メモ】if文

Last updated at 2025-06-08Posted at 2025-06-07

if文の基本

React（JavaScript）では、条件分岐ifの値がtruthyかfalsyかによって、条件が成り立つかが自動で決まります。

falsy：false, 0, -0, 0n, "", null, undefined, NaN
truthy：上記以外の全ての値

複数の条件を扱いたい場合は、elseやelse if文を使います。

if (条件1) {
  // 条件1がtrueの時の処理
} else if (条件2) {
  // 条件2がtrueの時の処理
} else {
  // どちらもfalseの時の処理
}

条件式を書きたい場合は、比較演算子や論理演算子を使って書きます。

>：より大きい
<：より小さい
>=：以上
<=：以下
===：等しい（型も）
!==：等しくない（型も）
==：等しい（型は無視）
!=：等しくない（型無視）

&&：AND（かつ）

let age = 20;
let isMember = true;
if (age >= 18 && isMember) {
  console.log("会員で18歳以上です");
}

||：OR（または）

let username = "";
let email = "user@example.com";
if (username || email) {
  console.log("ユーザー名またはメールアドレスが入力されています");
}

!；否定

let input = "";
if (!input) {
  console.log("入力が空です"); // inputが空文字（falsy）なので true になる
}