Reactの条件分岐の使い方を完全ガイド！初心者でもわかるReactの条件分岐

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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;

まとめ

まとめ

Reactにおける条件分岐は、画面の表示を柔軟にコントロールするために欠かせない重要な技術です。今回の記事では、条件付きレンダリングの基本的な考え方から、初心者がつまずきやすいアンチパターンまで幅広く学びました。特に重要なのは、ただ動くコードを書くのではなく、読みやすく保守しやすいコードを書くという意識です。Reactの条件分岐はJavaScriptの文法をそのまま使えるため自由度が高い反面、書き方を誤ると複雑で理解しにくいコードになりやすいという特徴があります。

まず理解しておきたいのは、条件分岐は表示ロジックを整理するための手段であるという点です。例えばログイン状態やデータの有無によって表示内容を切り替える場面では、適切に条件を分けることでユーザーにとって分かりやすい画面を作ることができます。しかし、条件をそのままJSXに書きすぎると、どの条件で何が表示されるのかが直感的に分かりにくくなります。そのため、条件式は事前に変数にまとめる、または処理を分離することで、コードの可読性を高めることが大切です。

また、三項演算子の使いすぎにも注意が必要です。簡潔に書けるというメリットはありますが、ネストが深くなると一気に理解が難しくなります。特に複数の条件が絡む場合は、無理に一行で書こうとせず、if文を使って段階的に処理を分ける方が安全です。React開発ではチームでコードを共有することが多いため、誰が見ても理解できる書き方を意識することが重要です。

falsy値による意図しない非表示も重要なポイントです。JavaScriptではゼロや空文字も偽として扱われるため、条件式によっては本来表示したい内容が消えてしまうことがあります。この問題を防ぐには、曖昧な条件ではなく、明確な比較を行うことが大切です。例えばゼロを表示したい場合は、単純な論理演算ではなく、明示的な条件を書くことでバグを防ぐことができます。

さらに、早期returnを活用することでコード全体の見通しが大きく改善されます。条件ごとに処理を分岐し、不要なネストを減らすことで、シンプルで読みやすい構造を実現できます。特にログインチェックやローディング状態の分岐では、早期returnを使うことでロジックが整理され、バグの発生も抑えられます。

Reactの条件分岐をマスターするためには、単に書き方を覚えるだけでなく、どのように書けば読みやすくなるのかを意識することが重要です。今回紹介したアンチパターンを避けることで、より実践的で品質の高いコードを書けるようになります。React初心者から中級者へステップアップするためには、このようなコードの書き方の工夫が大きな差になります。

サンプルプログラムで復習

import React, { useState } from "react";

function App() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(false);

  if (loading) return <p>読み込み中です</p>;
  if (!user) return <p>ログインしてください</p>;

  return (
    <div>
      <p>ようこそ {user.name} さん</p>
    </div>
  );
}

export default App;