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

Reactで条件付きレンダリングを行う方法はとても多く、初心者の方はどの書き方を選べばよいか迷いやすいところです。条件付きレンダリングとは、「特定の条件によって画面に表示する内容を切り替える書き方」のことです。これは家の電気スイッチを想像すると分かりやすく、スイッチを押すとライトが点いたり消えたりするように、画面にも特定の条件で表示を変える仕組みが必要です。 Reactではこの切り替えをJavaScriptの条件式を使って行います。画面に何を表示するかは「現在の状態によって決まる」ため、状態管理と条件分岐がとても重要です。初心者は最初に難しく感じることがありますが、パターンを理解すればスムーズに書けるようになります。条件分岐にはif文、三項演算子、論理演算子、変数による分岐など複数の使い方があります。それぞれ得意な場面があるため、Reactで複雑な画面を作るには書き分けが必要になります。特に画面に複数パターンの表示がある場合、条件をまとめて整理しておくと見やすく保守しやすいコードになります。さらにエラー表示や読み込み中表示などWebアプリに欠かせない部分も、この条件付きレンダリングで実現されます。実際のアプリではデータの有無、ログイン状況、権限、非同期処理の進行状態など複数の条件が同時に関わります。 ReactではJSXという書き方を使いますが、これは画面をHTMLのように記述できる仕組みのため、条件をそのまま埋め込みやすい特徴があります。

2. if文で分岐させる基本の書き方

最も基本的な方法は、JavaScriptのif文を使う書き方です。 JSXのreturn文の前で条件ごとに返す内容を切り替えるため、初心者でも理解しやすい構造になります。条件が明確なとき、画面を大きく切り替えるときに有効です。 if文は日本語の「もし〜なら」という考え方に近く、プログラム未経験の方でも直感的に理解できます。大きい表示ブロックを切り替えるときに特に便利で、複雑なUIの場合も分かりやすい構造を保てます。


function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h2>ログインしています</h2>;
  } else {
    return <h2>ログインしていません</h2>;
  }
}

（ログイン状態で表示内容が切り替わります）

if文の分岐は「結果がはっきり2つに分かれる」場面で特に効果的です。また、長いJSXを三項演算子で書くより読みやすくなるため、初心者にはまずこの書き方に慣れることをおすすめします。

3. 三項演算子で簡潔に書く方法

三項演算子は「条件 ? 真のとき : 偽のとき」という書き方です。 if文より短く書けるため、簡単な表示切替なら非常に便利です。ただし複雑すぎる場合は読みにくくなるため、用途を絞るのがポイントになります。


function Price({ isMember }) {
  return (
    <p>{isMember ? "会員価格は1000円です" : "通常価格は1500円です"}</p>
  );
}

（会員かどうかで値段が変わって表示されます）

短く書きたいときにとても有効ですが、条件が増えて三項演算子をネストすると途端に読みにくくなります。そのため三項演算子は「1条件で短いテキストを切り替える」程度に留めるのがベストです。

4. &&（論理AND）で「条件を満たしたときだけ表示」する方法

Reactの条件付きレンダリングでよく使われる書き方が論理AND演算子です。特定の条件がtrueのときだけ画面に表示したい場合に便利で、「条件を満たすならこの要素を表示する」という自然な読み方ができます。


function Notice({ show }) {
  return (
    <div>
      {show && <p>お知らせがあります！</p>}
    </div>
  );
}

（showがtrueのときだけメッセージが表示されます）

この書き方はReactで非常によく使われ、余計なelseが不要なため見た目もすっきりします。小さな通知やラベル表示など、ちょっとしたUIのオンオフに最適です。

5. 複数の条件がある場合は変数に切り出すと整理しやすい

条件が複雑になってくると、JSXの中に直接条件を書くと見にくくなってしまいます。そこで条件を変数にして名前を付ける方法がおすすめです。これは状態の意味を明確にする効果があり、大きなアプリほど可読性の向上に繋がります。


function Status({ loading, error, data }) {
  const isLoading = loading;
  const isError = error;
  const isEmpty = !loading && !error && data.length === 0;

  if (isLoading) return <p>読み込み中です</p>;
  if (isError) return <p>エラーが発生しました</p>;
  if (isEmpty) return <p>データがありません</p>;

  return <p>データが表示されます</p>;
}

（状態ごとに読みやすいUI切り替えが行えます）

このように変数に意味を持たせることで、コードを初めて読む人でも状態が理解しやすくなります。また、後から条件を追加する場合も管理が楽になります。

6. 複雑な画面はコンポーネントを分けて管理するとスッキリする

全ての条件を一つのコンポーネントに書くと、どうしても長くなってしまいます。そこでUIごとに小さなコンポーネントへ分けると、全体が驚くほど整理されます。特に読み込み中画面やエラー画面などは共通化できるため、複数ページで再利用できて便利です。また分割することで理解しやすい構造になり、他の人と共同で開発する場合にもスムーズに進められる利点があります。


function Loading() {
  return <p>読み込み中です</p>;
}

function ErrorView() {
  return <p>エラーが発生しました</p>;
}

function DataView({ data }) {
  return <p>{data}</p>;
}

function Screen({ loading, error, data }) {
  if (loading) return <Loading />;
  if (error) return <ErrorView />;
  return <DataView data={data} />;
}

（画面の部品化で整理された構造になります）

Reactのコンポーネント分割は、条件分岐が多くなったときに最も効果を発揮します。読みやすくシンプルな設計になり、将来の機能追加にも対応しやすくなります。