Reactでハマッた`&&`の罠 ~JSとJSXを正しく理解しよう~

はじめに

Reactでは、&&を使って条件付きレンダリングをすることがよくあります。
しかし、&&の動作を誤解していると、意図しない表示につながることがあります。
今回は、「0が表示される問題」を例に、Reactの&&の仕組みを解説します！

---

基本の&&の挙動

&&（論理積）は、左側の値がfalsy（falseとみなされる値）の場合、左側の値をそのまま返します。
falsyな値の例:

false, 0, "", null, undefined, NaN

▼繰り返しですが、左側の値がfalthy（falthyとみなされる値）の場合、左側の値を返します。

console.log(false && "Hello"); // false

▼逆に、左側の値がtruthy（trueとみなされる値）の場合、右側の値を返します。

console.log(true && "Hello");  // "Hello"
console.log(false && "Hello"); // false
console.log(0 && "Hello");     // 0

---

Reactでの条件付きレンダリング

Reactでは、&&を使って要素を条件付きで表示することができます。

✅ 一般的な例

const isLoggedIn = true;
return <div>{isLoggedIn && <p>ログイン済み</p>}</div>;

• ✅ isLoggedIn = true の場合 → <p>ログイン済み</p> が表示される

• ✅ isLoggedIn = false の場合 → 何も表示されない

  • これは、false && <p>ログイン済み</p> の結果が false になるためです。

---

❌ 0が表示される問題

❌ 予想外の動作をする例

const itemCount = 0;
return <div>{itemCount && <p>カートに{itemCount}個の商品があります</p>}</div>;

💡 期待する動作

• itemCount > 0 のとき → "カートにN個の商品があります" が表示される
• itemCount === 0 のとき → 何も表示されないはず

💥 実際の動作

• itemCount === 0 のとき、0 が表示される！！！

---

🧐 なぜ 0 が表示されるのか？

console.log(0 && "Hello");  // 0

0 && "Hello" の場合、0 は falsy なので && の評価はここで止まり、0 がそのまま返る。

🛑 ここで重要なのは、JSX のレンダリングルール！

値	JSXでのレンダリング
false	何も表示されない
null	何も表示されない
undefined	何も表示されない
0	0 が表示される
""（空文字）	""（空白として）

💡 JSX では false / null / undefined は レンダリングされない が、
0 は普通の値としてそのまま表示される！

つまり、itemCount && <p>カートに{itemCount}個の商品があります</p> の評価結果が 0 になるため、JSX 内で 0 がそのまま表示されてしまう！

▼React公式ドキュメントより引用

---

✅ 正しい条件付きレンダリングの方法

この問題を防ぐには、0 をレンダリングしないようにする工夫が必要です。

✅ 方法1: 三項演算子 (? :) を使う

return <div>{itemCount ? <p>カートに{itemCount}個の商品があります</p> : null}</div>;

💡 itemCount === 0 の場合、null が返るため、何も表示されない。

---

✅ 方法2: Boolean() で明示的に変換

return <div>{Boolean(itemCount) && <p>カートに{itemCount}個の商品があります</p>}</div>;

💡 Boolean(0) === false なので、&& の左側で評価が止まり、何も表示されない。

---

✅ 方法3: ??（Nullish Coalescing Operator）を使う

return <div>{itemCount ?? <p>カートに{itemCount}個の商品があります</p>}</div>;

💡 ?? は null や undefined の場合にのみ右側を評価するため、0 の場合は影響を受けない。

---

💡 if 文の条件式の&&との違い

実は、if文の条件式の&&とReactの&&に違いはない！
どちらも「左側がfalseなら左側の値を返し、trueなら右側の値を返す」だけ。

📌 ただし、if文はtrueのときにブロックを実行するが、ReactのJSXは&&の結果をそのまま表示するため、0が表示されることがある。

---

まとめ

✔ && は「左側がfalsyならそのまま返し、truthyなら右側を返す」
✔ JSX内では && の結果がそのままレンダリングされる
✔ false / null / undefined は JSX で 何も表示されない
✔ 0 は falsy だけど JSX では普通の値として表示される！
✔ ? : や Boolean() で意図しない表示を防ぐ

▼&&に慣れるための問題集もあるので是非！

---