1. Reactで条件分岐するには？

Reactで条件分岐は、JavaScriptの仕組みをそのまま利用して表示を切り替える仕組みです。たとえば「ログインしている時だけメニューを表示する」「読み込み中はスピナーを表示する」といったように、画面の見せ方を状況に応じて変えられます。しかし、初心者がつまずきやすいのが「条件付きレンダリングで起きるアンチパターン」です。アンチパターンとは、動くけれど後々問題を引き起こす書き方のことです。理解しておくことで、読みやすく壊れにくいコードを書けるようになります。

2. よくあるアンチパターン① 条件をそのまま書きすぎて読みにくくなる

React初心者で特に多いのが、JSXの中に複雑な条件式を書きすぎてしまうパターンです。たとえば「データがあり、ユーザーがログインしていて、なおかつ設定が有効な時だけ表示する」というような条件を直接書き込むと、JSXが非常に読みにくくなります。読みづらいコードはバグの原因になりやすく、修正もしづらくなります。


{user && data && settings?.enabled && <Dashboard />}

このように条件が多くなると、後から見たときに「この表示って何が揃ったら出るんだっけ？」と分かりにくくなります。初心者のうちは特に、条件式は事前に変数にまとめる方が安全です。

3. アンチパターン② 三項演算子を多重に使う

三項演算子は便利ですが、多重になると読みづらさが一気に増します。三項演算子とは、条件 ? 真の場合 : 偽の場合の形で書く簡潔な条件分岐です。しかし便利すぎて使いすぎる人が多く、画面表示のロジックが複雑な場合にカオスになります。


{loading ? <Loading /> : error ? <Error /> : <Content />}

慣れた人でも読み間違える可能性があり、特に初心者は不具合の原因を追いにくくなります。こういった場合は、条件ごとに if 文で整理したり、コンポーネントに切り出す方が明確です。

4. アンチパターン③ return の中で分岐を大量に書く

React の function コンポーネントでは、return の中にJSXを書きますが、その中に直接分岐を並べると非常に読みにくくなります。初心者がよく書いてしまうのが、表示内容を直接条件式で分けてしまうパターンです。


function App() {
  return (
    <div>
      {isLogin ? (
        <div>ログイン中</div>
      ) : isGuest ? (
        <div>ゲストユーザー</div>
      ) : (
        <div>未ログイン</div>
      )}
    </div>
  );
}

三つ以上の分岐を return の中で直接書くと、indent（インデント）が深くなり、構造も把握しづらくなります。複雑な分岐は return 前に変数へ格納したり、別コンポーネントにする方が安全です。

5. アンチパターン④ falsy 値による意図しない非表示

Reactでは、0 や ""（空文字）など、一見意味がある値でも falsy と判断されてしまうことが理由で表示されない問題が起きます。初心者がよくつまずくポイントのひとつです。


{count && <p>{count} 回クリックされました</p>}

このコードは一見正しく見えますが、実は count が 0 のとき何も表示されません。ゼロは本来意味のある値なのに、非表示になってしまうのです。こういった場合は、明確に条件を書く必要があります。

6. アンチパターン⑤ 早期 return を使わずネストが深くなる

条件分岐をそのまま書き続けると、ネストが深くなり「階段のように右へ右へ」ずれていきます。HTML構造も理解しづらくなるため、React の可読性が一気に下がります。こういった場合は、表示条件が満たされないときに早期 return することで、実装が驚くほどスッキリします。


if (!user) return <Login />;
if (loading) return <Spinner />;
return <Dashboard />;

このように書くことで、複雑なネストを避け、初心者にも理解しやすくなります。

7. 条件付きレンダリングの正しい書き方例

最後に、Reactで安全に条件付きレンダリングを使うための基本形を紹介します。シンプルで読みやすいコードを書くことが、後々のトラブル回避につながります。


import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [loading, setLoading] = useState(false);

  let content;

  if (loading) {
    content = <p>読み込み中...</p>;
  } else if (count === 0) {
    content = <p>まだクリックされていません</p>;
  } else {
    content = <p>{count} 回クリックされました</p>;
  }

  return (
    <div>
      {content}
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
}

export default App;

（画面にクリック回数が表示され、ボタンを押すと数字が増えていきます）