Reactの三項演算子活用ガイド

Reactでは条件に基づいたレンダリングが頻繁に必要になります。この記事では、三項演算子を使って簡潔かつ効率的に条件付きレンダリングを実装する方法を解説します。

三項演算子の基本

三項演算子は次のような構文を持ちます：

条件 ? 真の場合の式 : 偽の場合の式

これはシンプルな if-else 文の簡略形です。JSXの中で直接使用できるため、Reactでは特に便利です。

// 従来のif文（JSX内では使用不可）
if (isLoggedIn) {
  return <Dashboard />;
} else {
  return <LoginForm />;
}

// 三項演算子（JSX内で使用可能）
{isLoggedIn ? <Dashboard /> : <LoginForm />}

実践的な使用パターン

コンポーネントの条件付きレンダリング

function AuthScreen({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <Dashboard /> : <LoginForm />}
    </div>
  );
}

スタイルとクラスの条件付き適用

<button
  className={isActive ? "btn-active" : "btn-inactive"}
  style={{ fontWeight: isActive ? "bold" : "normal" }}
>
  クリック
</button>

プロパティの条件付き設定

<input
  type="text"
  disabled={isDisabled ? true : false}
  aria-invalid={hasError ? "true" : "false"}
/>

よくある問題と解決策

ネストの複雑さ

三項演算子のネストは可読性を低下させます。

// 読みにくいネスト
{status === 'loading'
  ? <LoadingSpinner />
  : status === 'error'
    ? <ErrorMessage />
    : <Content />
}

解決策： 別の関数に抽出する

// 可読性向上
const renderContent = () => {
  if (status === 'loading') return <LoadingSpinner />;
  if (status === 'error') return <ErrorMessage />;
  return <Content />;
};

return <div>{renderContent()}</div>;

null/undefined エラー

// エラーの可能性あり
{user ? <h1>{user.name}</h1> : <p>ログインしてください</p>}

解決策： オプショナルチェーンを使用

{user?.name ? <h1>{user.name}</h1> : <p>ログインしてください</p>}

代替手段

論理AND演算子（&&）

単に真の場合のみ表示するなら && がシンプル：

{isLoggedIn && <WelcomeMessage />}

ただし、0 や空文字列などの扱いに注意が必要です。

switch文やオブジェクトマッピング

複数条件の場合は以下が適切：

// スイッチケースパターン
const getStatusComponent = (status) => {
  switch(status) {
    case 'loading': return <LoadingSpinner />;
    case 'error': return <ErrorMessage />;
    case 'success': return <SuccessMessage />;
    default: return <DefaultContent />;
  }
};

// オブジェクトマッピングパターン
const statusComponents = {
  loading: <LoadingSpinner />,
  error: <ErrorMessage />,
  success: <SuccessMessage />
};

return statusComponents[status] || <DefaultContent />;

ベストプラクティス

1. シンプルに保つ

   • 複雑な条件は関数に抽出する
   • 多重ネストは避ける

2. 可読性を優先

   • 適切に改行とインデントを使用
   • 複雑な条件は分割して命名変数にする

3. Falsy値に注意

   • 0、''、false、null、undefined の挙動を理解する
   • 特に数値表示では注意が必要

実用例：データ取得状態の処理

function DataDisplay({ isLoading, error, data }) {
  if (isLoading) return <LoadingSpinner />;
  if (error) return <ErrorMessage message={error} />;

  return (
    <div>
      {data.length > 0
        ? <DataTable items={data} />
        : <EmptyState message="データがありません" />}
    </div>
  );
}

まとめ

三項演算子はReactでの条件付きレンダリングを簡潔に表現できる強力なツールです。シンプルな条件分岐には三項演算子、複雑な条件には関数抽出を使い分けることで、読みやすく保守しやすいコードを書くことができます。

---

React 18.xとES6以上の環境を前提としています。