三項演算子で条件分岐

4日 ago

user

1 minute

Reactコンポーネントの中で、表示を条件によって切り替えるには三項演算子が便利です。シンプルかつ読みやすく記述できるため、UIロジックに頻繁に使われます。

✅ 基本構文

{ 条件 ? 表示A : 表示B }

条件が true のときに「表示A」、false のときに「表示B」が描画されます。

🔤 文字列の表示切り替え例

export const Greeting = () => {
  const isLoggedIn = true;

  return (

<div>
      {isLoggedIn ? "ようこそ！" : "ログインしてください"}
    </div>
  );
};

🔘 コンポーネントの切り替え

const LoggedInUser = () => 
<p>こんにちは、ユーザーさん</p>;
const Guest = () => 
<p>ゲストとして閲覧中</p>;

export const Welcome = () => {
  const isLoggedIn = false;

  return (

<div>
      {isLoggedIn ? <LoggedInUser /> : <Guest />}
    </div>
  );
};

⚠ 空要素を返す場合

何も表示したくない場合には null を返します。

{show && 
<p>表示するテキスト</p>}
// または
{show ? 
<p>表示あり</p> : null}

❗ ネストには注意

複雑なロジックを三項演算子で書きすぎると可読性が下がるため、早めに if や switch に切り出す判断も重要です。

// 悪い例（読みにくい）
{isLoggedIn
  ? (isAdmin ? "管理者ログイン" : "ユーザーログイン")
  : "ログインしてください"}

✅ まとめ

単純な分岐：三項演算子で十分
ネストが増えるようなら事前に変数化 or 条件式を分ける
条件が false で何も出したくない場合は null を使う