Reactで使っていた `&&` と `||` の条件付きレンダリングの仕組みをちゃんと理解する

この記事は ウェブクルー Advent Calendar 2025 の3日目の記事です。
昨日は @wc_shinjigotoさんの「 New Relic APM さわってみた！ 」でした！

はじめに

業務でReactの開発を行うことになり、Reactの勉強を始めて最初に「おっ？」と思った書き方の一つがこれです。

JSX

// isShowがtrueならコンポーネントを表示する
{ isShow && <MyComponent /> }

// userNameがnullなら "Guest" を表示する
{ userName || "Guest" }

JSXの{}内ではif{...}のような文を書くことができないため、&&演算子などを使って条件分岐を表現することが多いと思います。
ただ、なぜこの書き方でコンポーネントの表示・非表示などの出し分けができるのか最初は理解できずにいました。
そこでこの記事ではその仕組みを理解するために、&&・||演算子の仕組みと、Reactがそれをどう解釈しているかを整理してみます。

1. JavaScriptの論理演算子はBooleanを返さない

JavaやC#などの静的型付け言語出身だと、&& や || は「論理演算の結果（true / false）」を返すものという認識が強いと思います。

しかし、JavaScriptの論理演算子は、条件判定に使われた「値そのもの」 を返します。

Reactの条件付きレンダリングは、このJSの言語仕様をうまく利用したパターンなのです。

2. && (AND) 演算子の仕組み

JavaScriptにおける A && B の挙動は以下の通りです。

1. 左側（A）を評価する。

2. Aが Falsy（false, null, 0, undefined, ""（空文字列）など）なら、Aをそのまま返す。（右側は評価しない）

3. Aが Truthy（Falsyではない値）なら、Bをそのまま返す。

この性質をまとめると以下のようになります。

true && expression   => expression
false && expression  => false

Reactでの挙動

React（JSX）には 「ブーリアン値 (true/false)、null、undefined はレンダリングしない（何も表示しない）」 というルールがあります。

これを組み合わせると：

• 条件がtrueの場合： 例（true && <Component />）
  → JSの仕様で <Component /> が返される。
  → Reactは <Component /> をレンダリングする。

• 条件がfalseの場合：例（false && <Component />）
  → JSの仕様でfalseが返される。
  → Reactはfalseをレンダリングしないため、何も表示されない。

これが && で出し分けができる仕組みです。

3. || (OR) 演算子の仕組み

JavaScriptにおける A || B の挙動は && の逆です。

1. 左側（A）を評価する。

2. Aが Truthy なら、Aをそのまま返す（右側は評価しない）

3. Aが Falsy なら、Bをそのまま返す。

こちらの性質はまとめると以下のようになります。

true || expression   => true
false || expression  => expression

Reactでの挙動

Reactでは、||演算子は「デフォルト値（Fallback）」の表示によく使われます。

JSX

// userNameがあればそれを表示、なければ "Guest" を表示
<p>こんにちは、{userName || "Guest"}さん</p>

&& と同様に処理の流れを追うと、

• 左側がTruthy（値がある）場合： 例（"Taro" || "Guest"）
  → JSの仕様で "Taro"（左側の値） が返される。
  → Reactは "Taro" をレンダリングする。

• 左側がFalsy（値がない）場合： 例（null || "Guest"）
  → JSの仕様で "Guest"（右側の値） が返される。
  → Reactは "Guest" をレンダリングする。

4. 注意！ && のハマりポイント

&&演算子のハマりやすいポイントが数値を被演算子にしたときです。

JavaScriptでは 数値の0は Falsy として扱われます。

その性質を利用して、配列の長さが1以上のときだけリストを表示したい場合、以下のように書くと動きそうですが、実はバグになります。

JSX

// やってはいけない例
// items.length が 0 の場合、falseが返されそうだが‥
{ items.length && <List items={items} /> }

なぜダメなのか？
items.lengthが0の場合を考えてみます。

1. items.length が 0 になる。

2. 0 は Falsy なので、&& 演算子は左側の 0 を返す。

3. Reactは false はレンダリングしないが、数値の 0 はレンダリングする。

結果、画面には 「0」 という数字が表示されてしまいます。

このような問題を避けるため、左側が必ず Boolean になるように書くのが鉄則です。

JSX

// 解決例: 比較演算子を使って true/false にする
{ items.length > 0 && <List items={items} /> }

まとめ

• JavaScriptの && と || は、Booleanではなく値そのものを返す。

• Reactは false や null を描画しない。

• この2つの特性を組み合わせることで、&&・||演算子は条件付きレンダリングを実現している。

• ただし、数値の 0 は描画されてしまうので、&& の左側は必ず Boolean (length > 0 など) になるように注意する。

明日は@wchikarusato さんの投稿になります。お楽しみに！