Reactの条件分岐を理解しよう！if文と三項演算子の使い分け

こんにちは、とまだです。

Reactで「ログインしているときだけプロフィールを表示したい」と思ったことはありませんか？

HTMLなら簡単にできそうなことなのに、Reactではどう書けばいいか迷いますよね。

今回は現役のエンジニア、そして元プログラミングスクール講師としての経験から、Reactでの条件分岐について解説します。

条件分岐とは？

条件分岐は、信号機のようなものです。

赤なら止まる、青なら進む。

プログラミングでも同じように「もし〜なら、こうする」という判断をコードで表現します。

例えば、こんな場面で使います。

• ログイン状態でメニューを切り替える
• エラーがあればエラー画面を表示
• データ読み込み中はローディング表示

このような切り替えが、条件分岐です。

なぜReactで条件分岐が難しく感じるのか

普通のJavaScriptなら、if文を書けばOKです。

でもReactのJSXでは、ちょっと違います。

JSXはHTMLのような見た目ですが、実はJavaScriptです。

だから、HTMLタグの中に直接if文を書けません。

この制約があるため、最初は戸惑うんです。

でも大丈夫。

ちゃんと解決方法があります。

基本的な3つの書き方

Reactで条件分岐を書く方法は主に3つあります。

それぞれの特徴を理解して使い分けましょう。

1. 三項演算子を使う方法

最もよく使われる方法です。

// ログイン状態で表示を切り替える例
{isLoggedIn ? (
  <p>ようこそ！</p>
) : (
  <p>ログインしてください</p>
)}

この書き方は「もし〜なら？AそうでなければB」という意味です。

シンプルな2択の場合に便利ですね。

2. &&演算子を使う方法

特定の条件でだけ表示したい場合に使います。

// エラーがある時だけエラーメッセージを表示
{error && <p>エラーが発生しました</p>}

errorがtrueのときだけ、右側が表示されます。

表示・非表示の切り替えに最適です。

3. if文を使う方法

複雑な条件分岐では、関数の中でif文を使います。

function UserMessage({ role }) {
  if (role === "admin") {
    return <p>管理者画面へようこそ</p>;
  }

  if (role === "user") {
    return <p>ユーザー画面へようこそ</p>;
  }

  return <p>ゲスト画面へようこそ</p>;
}

3つ以上の選択肢がある場合は、この方法が読みやすいです。

早めにreturnすることで、コードの見通しも良くなります。

実際に使ってみよう

では、実際のコンポーネントで使ってみましょう。

ログインボタンの表示を切り替える例を作ります。

import React, { useState } from "react";

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

  // ログイン・ログアウトの処理
  const toggleLogin = () => {
    setIsLoggedIn(!isLoggedIn);
  };

  return (
    <div>
      {/* 状態に応じてメッセージを切り替え */}
      <h2>
        {isLoggedIn ? "ログイン中です" : "ログインしていません"}
      </h2>

      {/* ボタンのテキストも切り替え */}
      <button onClick={toggleLogin}>
        {isLoggedIn ? "ログアウト" : "ログイン"}
      </button>

      {/* ログイン時のみ表示される要素 */}
      {isLoggedIn && (
        <div>
          <p>プロフィール情報</p>
          <p>設定メニュー</p>
        </div>
      )}
    </div>
  );
}

このコードでは、3つの条件分岐を使っています。

1つ目と2つ目は三項演算子で、3つ目は&&演算子です。

それぞれ適切な場面で使い分けているのがポイントです。

よくある間違いと対処法

初心者がつまずきやすいポイントをまとめました。

間違い1：JSXの中に直接if文を書く

// これはエラーになります
return (
  <div>
    {if (isLoggedIn) {
      <p>ログイン中</p>
    }}
  </div>
);

JSXの中では式しか書けません。

if文は文なので、エラーになります。

間違い2：&&演算子で0が表示される

// countが0の時、画面に0が表示されてしまう
{count && <p>{count}件のメッセージ</p>}

数値の0はfalseと判定されず、そのまま表示されます。

明示的に条件を書きましょう。

// 正しい書き方
{count > 0 && <p>{count}件のメッセージ</p>}

間違い3：三項演算子の入れ子が深い

// 読みづらい例
{isLoggedIn ? (
  isAdmin ? (
    <AdminPanel />
  ) : (
    <UserPanel />
  )
) : (
  <GuestPanel />
)}

入れ子が深いと読みづらくなります。

関数に切り出すか、if文を使いましょう。

実務で使えるパターン集

実際の開発でよく使うパターンを紹介します。

ローディング・エラー・成功の3パターン

APIからデータを取得する際の典型的なパターンです。

function DataDisplay() {
  const [status, setStatus] = useState("loading");
  const [data, setData] = useState(null);

  // 状態に応じて表示を切り替え
  if (status === "loading") {
    return <p>読み込み中...</p>;
  }

  if (status === "error") {
    return <p>エラーが発生しました</p>;
  }

  return (
    <div>
      <h3>データ一覧</h3>
      {/* データの表示 */}
    </div>
  );
}

早期リターンを使うことで、コードがスッキリします。

条件が増えても、見通しが良いままです。

権限による表示制御

ユーザーの権限で機能を制限する例です。

function ActionButtons({ userRole, itemOwner, currentUser }) {
  const isOwner = itemOwner === currentUser;
  const isAdmin = userRole === "admin";

  return (
    <div>
      {/* 誰でも見られるボタン */}
      <button>詳細を見る</button>

      {/* 所有者かつ管理者のみ */}
      {(isOwner || isAdmin) && (
        <button>編集する</button>
      )}

      {/* 管理者のみ */}
      {isAdmin && (
        <button>削除する</button>
      )}
    </div>
  );
}

条件を変数に格納することで、可読性が上がります。

複雑な条件も、わかりやすく表現できますね。

まとめ

Reactの条件分岐は、最初は難しく感じるかもしれません。

でも、基本の3つのパターンを覚えれば大丈夫です。

• 2択なら三項演算子
• 表示/非表示なら&&演算子
• 複雑ならif文で早期リターン

この使い分けを意識すれば、読みやすいコードが書けます。

まずは簡単な例から始めて、徐々に慣れていきましょう。

条件分岐をマスターすれば、動的なUIが自在に作れるようになります。