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

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

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

Reactで条件付きレンダリングを行うということは、画面に表示する内容を「状態」や「条件」によって切り替えるという意味になります。 普通の文章を読むときに「もし〜なら〜する」という表現がありますが、それを画面表示にも使えるのが条件分岐です。 プログラミングをまったく触ったことがない初心者でも、日常の判断と同じ考え方なので理解しやすい特徴があります。

Reactの条件付きレンダリングの代表的な書き方としては、次の四つがあります。

• if文を使う
• 三項演算子（さんこうえんざんし）を使う
• 論理AND（&&）演算子を使う
• 条件ごとにコンポーネントを切り替える

「三項演算子」という言葉は難しく聞こえますが、これは短い条件分岐を一行で書ける便利な書き方です。 また「論理AND（&&）」は「条件が真（true）なら後ろを実行する」という仕組みで、何かを表示したいときにとても使いやすい方法です。

2. if文を使ったReactの条件付きレンダリング

2. if文を使ったReactの条件付きレンダリング

もっとも基本的で初心者にも理解しやすいのがif文を使う方法です。 「もし◯◯なら、△△を表示する」という考え方をそのままコードにできます。

import React from "react";

function App() {
  const isLogin = true;

  if (isLogin) {
    return <h1>ログイン済みのユーザーです</h1>;
  }

  return <h1>ログインしていません</h1>;
}

export default App;

このように、条件の結果によってreturnを切り替えるだけで簡単に表示内容を変えることができます。 初めてReactを書く人でも理解しやすいシンプルな書き方です。

3. 三項演算子を使う条件付きレンダリング

3. 三項演算子を使う条件付きレンダリング

三項演算子は短い条件分岐に向いている書き方です。 「条件 ? 真のとき : 偽のとき」という形で、文章のように読めるのが特徴です。

import React from "react";

function App() {
  const score = 80;

  return (
    <div>
      {score >= 60 ? <p>合格です！</p> : <p>残念、不合格です…</p>}
    </div>
  );
}

export default App;

結果を左右どちらか一つに分けたいときにとても便利で、Reactの実務でも多く使われる書き方です。

4. &&（論理AND）を使う条件付きレンダリング

4. &&（論理AND）を使う条件付きレンダリング

「条件が真のときだけ表示したい」場合には&&を使うとシンプルに書けます。 これは「もし条件が成り立つなら、この要素を表示する」という意味になります。

import React from "react";

function App() {
  const isAdmin = true;

  return (
    <div>
      <h1>ユーザーページ</h1>
      {isAdmin && <p>管理者向けの特別メニュー</p>}
    </div>
  );
}

export default App;

条件がfalseの場合は右側が実行されないため、短い条件表示に最適な方法です。

5. 条件によってコンポーネントを切り替える方法

5. 条件によってコンポーネントを切り替える方法

Reactでは小さな部品を組み合わせて画面を作ります。 そのため、条件によってまるごと別のコンポーネントを表示することもできます。 状態が複雑な画面では、この方法がもっとも見通しの良い書き方になります。

import React from "react";

function Login() {
  return <h2>ログインページです</h2>;
}

function Dashboard() {
  return <h2>ダッシュボードへようこそ</h2>;
}

function App() {
  const isLogin = false;

  return (
    <div>
      {isLogin ? <Dashboard /> : <Login />}
    </div>
  );
}

export default App;

コンポーネントを条件で切り替えることで、画面全体の構成を自然に分けられ、読みやすく維持もしやすくなります。

まとめ

まとめ

今回の記事では、Reactにおける条件分岐の基本から応用までを詳しく解説してきました。React開発において、特定の状態（State）や条件に基づいて画面の表示内容を動的に変更する「条件付きレンダリング」は、アプリケーションのユーザー体験を向上させるために欠かせない技術です。

私たちは、if文、三項演算子、論理AND（&&）演算子、そしてコンポーネントの切り替えという4つの主要な手法を学びました。これらは一見するとどれを使っても同じ結果が得られるように思えますが、実際には「読みやすさ」や「保守性」という観点で使い分けが重要になります。

各手法の振り返りと最適な使い分け

まず、if文はJavaScriptの基本であり、ロジックが複雑な場合に最適です。JSXの外部で計算や判定を行い、その結果を変数に格納して表示に利用するスタイルは、コードの意図が明確になります。

次に、三項演算子です。これはJSX（HTMLのような見た目の部分）の中で直接「Aならこれ、Bならこれ」と2パターンを切り替えたいときに非常に重宝します。非常に簡潔に書けるため、React開発者が最も多用するテクニックの一つと言えるでしょう。

そして、論理AND（&&）演算子。これは「特定の条件を満たすときだけ表示し、そうでないときは何も出さない」というシンプルなケースに最強の威力を発揮します。不要な「else」の部分を書かなくて済むため、ソースコードがすっきりと整理されます。

最後に、コンポーネントの切り替えです。大規模なアプリケーションでは、一つのファイルに全ての表示ロジックを詰め込むと読みづらくなります。役割ごとにコンポーネントを分割し、条件によって呼び出す部品を切り替えることで、プログラムの再利用性が高まり、修正も容易になります。

さらに一歩進んだ実践的なReactコード例

学んだことを踏まえて、もう少し実践的な「カウントアップ機能と警告表示」を組み合わせたサンプルプログラムを見てみましょう。ここでは、数値の状態に応じてメッセージを出し分け、かつ特定の数値を超えたときだけ警告用のコンポーネントを表示させる処理を実装しています。

import React, { useState } from "react";

// 警告を表示するための小さな部品（コンポーネント）
const WarningMessage = () => {
  return (
    <div style={{ color: 'red', fontWeight: 'bold' }}>
      数値が10を超えました！注意してください。
    </div>
  );
};

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

  // カウントを増やす関数
  const handleIncrement = () => {
    setCount(count + 1);
  };

  // カウントをリセットする関数
  const handleReset = () => {
    setCount(0);
  };

  return (
    <div className="container mt-5">
      <h1>カウンターと条件分岐の実践</h1>
      <p>現在のカウント: <strong>{count}</strong></p>

      {/* 三項演算子で表示するテキストを切り替える */}
      <p>
        状態: {count === 0 ? "開始していません" : "計測中..."}
      </p>

      {/* 論理AND（&&）で10以上の時だけ警告コンポーネントを表示 */}
      {count > 10 && <WarningMessage />}

      <div className="mt-3">
        <button className="btn btn-primary me-2" onClick={handleIncrement}>
          カウントアップ
        </button>
        
        {/* countが0より大きい時だけリセットボタンを表示 */}
        {count > 0 && (
          <button className="btn btn-secondary" onClick={handleReset}>
            リセット
          </button>
        )}
      </div>
    </div>
  );
}

export default App;

このコードでは、これまで学んだテクニックが凝縮されています。count > 10 && <WarningMessage /> の部分は、エラー表示や通知バナーの実装にそのまま応用できるパターンです。また、リセットボタンの表示・非表示を切り替えることで、ユーザーが操作できない無意味なボタンを隠し、UIをクリーンに保つことができます。

学習のポイントと今後のステップ

Reactを習得するコツは、一度に完璧を目指さないことです。まずは三項演算子を使ってみて、コードが読みづらいなと感じたらif文に戻したり、共通化できそうならコンポーネント化したりと、試行錯誤を繰り返すことが上達への近道です。

また、最新のフロントエンド開発では、今回紹介した方法に加えて「配列のmap処理の中での条件分岐」や「Switch文的な処理を行うためのオブジェクトマッピング」といった手法もよく使われます。基礎を固めた後は、ぜひそういった応用テクニックにも挑戦してみてください。条件分岐をマスターすれば、Reactで作成できるWebアプリケーションの幅は一気に広がります。