【React入門】条件分岐レンダリングとは？if文・三項演算子・短絡評価をわかりやすく解説

はじめに｜Reactで条件分岐に悩んだ話

ReactでUIを作っていると、必ず出てくるのが「条件によって表示を切り替える」処理です。

あなたも一度は「if文で書ける？」「三項演算子の方がいい？」「&&ってなに？」と悩んだことがあるはず。

この記事では、その疑問を整理してスッキリ解決できるようにまとめます。

この記事では、Reactの条件分岐レンダリングを「if文」「三項演算子」「短絡評価（&&）」の3本柱で、コード全文 → 抜粋 → 丁寧な解説の順に、やさしく整理します。

Reactの条件分岐レンダリングとは「ある条件のときだけUIを出す／出し分ける」ための書き方の総称です。
HTMLは“見た目の宣言”が主ですが、ReactではJSXの中でJavaScriptの式を使えるので、条件に応じて要素を切り替えられます。

方法①：Reactで if 文を使って条件分岐する（読みやすさ重視）

コード全文

import { useState } from "react";

function Profile() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // 早期returnパターン（おすすめ）
  if (!isLoggedIn) {
    return (
      <div>
        <h2>ログインが必要です</h2>
        <button onClick={() => setIsLoggedIn(true)}>ログインする</button>
      </div>
    );
  }

  // ここに来るのは isLoggedIn === true のとき
  return (
    <div>
      <h2>ようこそ！</h2>
      <button onClick={() => setIsLoggedIn(false)}>ログアウト</button>
    </div>
  );
}

export default Profile;

抜粋

if (!isLoggedIn) {
  return <LoginPrompt />;
}
return <Dashboard />;

解説

if文はJSXの“外”で使うのがコツ。return ( ... ) の中に if (...) { ... } は置けません。
「早期 return（early return）」は分岐がはっきりして読みやすいのがメリット。
分岐が増えたら、さらに分岐ごとに小コンポーネントに分けると保守性が上がります。

もう1つの書き方：変数に一度代入してから返す

let content;
if (isLoggedIn) {
  content = <Dashboard />;
} else {
  content = <LoginPrompt />;
}
return <section>{content}</section>;

一時変数 content を使うと、後で共通のラップ（レイアウト）に入れやすいのが利点です。

方法②：Reactで三項演算子（`条件 ? 真 : 偽`）を使う

コード全文

import { useState } from "react";

function Greeting() {
  const [hour, setHour] = useState(9); // 0〜23

  return (
    <div>
      <p>
        {hour < 12 ? "おはようございます" : "こんにちは"}
      </p>

      <div style={{ marginTop: 8 }}>
        <button onClick={() => setHour(9)}>9時にする</button>
        <button onClick={() => setHour(15)} style={{ marginLeft: 8 }}>
          15時にする
        </button>
      </div>
    </div>
  );
}

export default Greeting;

抜粋

{hour < 12 ? "おはようございます" : "こんにちは"}

解説

JSXの中で完結できるので、短い2択に向いています。
ネスト（入れ子）が深くなると一気に読みにくくなるので、三項は1段までを目安に。
3択以上・複雑な条件はif文（early return）に戻すのが安全です。

ちょい応用：要素ごと切り替える

{isMobile ? <MobileNav /> : <DesktopNav />}

方法③：Reactで短絡評価（`条件 && JSX`）を使う

コード全文

import { useState } from "react";

function Notifications() {
  const [unreadCount, setUnreadCount] = useState(3);

  return (
    <div>
      <h3>お知らせ</h3>

      {/* 条件を満たすときだけバッジを表示 */}
      {unreadCount > 0 && <span className="badge">{unreadCount}</span>}

      <div style={{ marginTop: 8 }}>
        <button onClick={() => setUnreadCount((n) => n + 1)}>+1</button>
        <button onClick={() => setUnreadCount(0)} style={{ marginLeft: 8 }}>
          既読にする
        </button>
      </div>
    </div>
  );
}

export default Notifications;

抜粋

{unreadCount > 0 && <span className="badge">{unreadCount}</span>}

解説

「条件を満たすなら出す、満たさなければ何も出さない」を1行で書けるのが魅力。
elseが要らないとき（例：エラー時だけメッセージを出す）、最短で書けます。

よくある落とし穴（重要）

{unreadCount && <span>{unreadCount}</span>}

unreadCount が 0 のとき、0 がそのまま描画されてしまいます（false・null・undefined は描画されませんが、0 は描画されます）。
比較演算で明示しましょう。

{unreadCount > 0 && <span>{unreadCount}</span>}

React条件分岐レンダリングの比較まとめ

方法	向いているケース	読みやすさ	else の扱い	メモ
if文（early return）	分岐が複数・複雑	高い	もちろん可	迷ったらこれ。小コンポーネント化しやすい
三項演算子	シンプルな二択	中（※1段まで）	`? A : B`	1段を超えたらifへ退避
短絡評価（&&）	「ある時だけ出す」	高い	なし	`0` が描画される落とし穴に注意