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

1. Reactで権限による表示切り替えをするには？

1. Reactで権限による表示切り替えをするには？

Reactで条件分岐を行う方法はいくつかありますが、権限による表示切り替えでは特に if文、三項演算子、論理演算子がよく使われます。 これらを使うことで、ログイン済みかどうか、管理者かどうか、会員かどうかなどを判定して画面を柔軟に変えられます。

例えば、ショッピングサイトの管理画面では管理者だけが「商品登録」ボタンを見れるようにしたい場合があります。 また、ログインしていないユーザーには「ログインしてください」という注意メッセージだけを表示したいときもあります。 こうした「条件に応じて見せる内容を切り替える」仕組みが、Reactの条件付きレンダリングです。

プログラミングが初めての人でも大丈夫です。まずはシンプルな権限を表すための状態（ログインしているかどうか）を使った例を見ながら進めていきましょう。

2. ログイン状態による画面表示の切り替え

2. ログイン状態による画面表示の切り替え

ここでは、ユーザーがログインしているかどうかで表示を変える最も基本的なパターンを紹介します。 初心者でも理解しやすいようにシンプルな構成で書いています。

import React, { useState } from "react";

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div className="p-3">
      <h1>権限に応じた画面表示</h1>

      {isLoggedIn ? (
        <p>ようこそ！ユーザー画面へアクセスできます。</p>
      ) : (
        <p>ログインが必要です。</p>
      )}

      <button
        className="btn btn-primary mt-3"
        onClick={() => setIsLoggedIn(!isLoggedIn)}
      >
        {isLoggedIn ? "ログアウト" : "ログイン"}
      </button>
    </div>
  );
}

export default App;

この例では三項演算子を使って状態に応じた表示切り替えをしています。 ボタンをクリックするたびにログイン・ログアウトが切り替わり、表示されるテキストも変化します。

3. 管理者権限（Admin）のみに表示されるUIを作る

3. 管理者権限（Admin）のみに表示されるUIを作る

実際のアプリケーションでは、ログイン状態だけでなく、ユーザーが管理者なのか一般ユーザーなのかで見せたいコンテンツを変えることがあります。 例えば、管理者だけに「ユーザー管理」ページへのリンクを見せるといった使い方です。

import React, { useState } from "react";

function App() {
  const [role, setRole] = useState("guest"); // guest, user, admin

  return (
    <div className="p-3">
      <h1>ユーザー権限による表示切り替え</h1>

      {role === "admin" && (
        <div className="alert alert-warning mb-3">
          管理者メニュー：ユーザー管理・データ編集
        </div>
      )}

      <p>現在の権限：{role}</p>

      <div className="mt-3">
        <button className="btn btn-secondary me-2" onClick={() => setRole("guest")}>
          ゲスト
        </button>
        <button className="btn btn-info me-2" onClick={() => setRole("user")}>
          一般ユーザー
        </button>
        <button className="btn btn-danger" onClick={() => setRole("admin")}>
          管理者
        </button>
      </div>
    </div>
  );
}

export default App;

この例では論理演算子「&&」を使って、特定の条件を満たしたときだけ要素を表示する仕組みになっています。 条件がfalseの場合、その部分はレンダリングされないためとても便利です。

4. 複数の条件を組み合わせて柔軟な表示切り替えを作る

4. 複数の条件を組み合わせて柔軟な表示切り替えを作る

現実のアプリでは、単純なログイン状態や管理者権限だけでなく、 「有料会員かどうか」「プロフィールが設定済みか」「メール認証が済んでいるか」など、 いくつもの条件を組み合わせて表示を決めたい場面があります。 そうした場合にもReactの条件付きレンダリングは役立ちます。

import React from "react";

function Dashboard({ isLoggedIn, isPremium, isVerified }) {
  if (!isLoggedIn) {
    return <p>ログインしてください。</p>;
  }

  if (!isVerified) {
    return <p>メール認証が必要です。</p>;
  }

  return (
    <div>
      <h2>ダッシュボード</h2>
      {isPremium ? (
        <p>プレミアム会員限定コンテンツにアクセスできます。</p>
      ) : (
        <p>一般会員向けコンテンツをご利用いただけます。</p>
      )}
    </div>
  );
}

export default Dashboard;

このように複数の条件がある場合は、早めにreturnして不要な処理を避ける「ガード節」という書き方が便利です。

まとめ

まとめ

ここまで、Reactにおける条件分岐の基本から、権限に応じた具体的な表示切り替えの手法について詳しく解説してきました。Reactのコンポーネント設計において、ユーザーの状態（ログインの有無、管理者権限、有料プランの加入状況など）に基づいて表示内容を制御することは、モダンなWebアプリケーション開発において避けては通れない非常に重要なテーマです。

今回の内容をおさらいすると、主に以下の3つの手法を使い分けることがポイントでした。

• 三項演算子（condition ? true : false）: 2つの状態のどちらかを表示したい場合に最適です。ログインボタンのラベル切り替えなどに重宝します。
• 論理演算子（condition && element）: 特定の条件を満たした時だけ表示し、そうでない時は何も表示したくない（nullを返したい）場合に非常にシンプルに記述できます。
• if文（ガード節）: 複雑な条件分岐や、特定の条件を満たさない場合にコンポーネント全体の描画を中断して別のものを返したい場合に有効です。コードの可読性を高める効果もあります。

さらに応用！複数の条件をスマートに管理するJSXの実践例

実際の現場では、より多くのユーザー属性を組み合わせて複雑なUI制御を行うことが求められます。例えば、Next.jsなどのフレームワークを使用して、認証情報を取得した後に「管理者」かつ「プロフィールの設定が完了している」ユーザーにだけ特別なダッシュボードを表示するようなケースです。

以下のコードは、これまで学んだ「論理演算子」や「状態管理」を応用し、より実戦に近い形でユーザーのステータスに応じたUI表示を切り替えるサンプルプログラムです。React HooksのuseStateを効果的に使い、動的に画面が変化する様子を確認してみましょう。

import React, { useState } from "react";

/**
 * ユーザー権限とステータスに基づいた高度な条件分岐コンポーネント
 */
function AdvancedUserDashboard() {
  // ユーザーの状態を一括で管理
  const [user, setUser] = useState({
    name: "テラコヤ太郎",
    isLoggedIn: true,
    role: "admin", // admin, staff, guest
    hasUnreadMessages: true,
    isProfileComplete: false,
  });

  // ログアウト処理のシミュレーション
  const handleLogout = () => {
    setUser({ ...user, isLoggedIn: false });
  };

  // 1. 非ログイン時のガード節
  if (!user.isLoggedIn) {
    return (
      <div className="container mt-4">
        <div className="alert alert-danger">
          セッションが切れました。再度ログインしてください。
        </div>
        <button className="btn btn-primary" onClick={() => window.location.reload()}>
          ログイン画面へ
        </button>
      </div>
    );
  }

  return (
    <div className="container mt-4 border p-4 rounded shadow-sm">
      <h2 className="mb-4">ユーザー管理パネル</h2>
      <p>こんにちは、<strong>{user.name}</strong> さん</p>

      {/* 2. 管理者権限のみに表示されるツールバー */}
      {user.role === "admin" && (
        <div className="bg-light p-3 mb-3 border-start border-4 border-danger">
          <h4 className="fs-6 fw-bold text-danger">管理者専用ツール</h4>
          <div className="d-flex gap-2">
            <button className="btn btn-sm btn-outline-danger">システム設定</button>
            <button className="btn btn-sm btn-outline-danger">ユーザー一括削除</button>
          </div>
        </div>
      )}

      {/* 3. 未読メッセージがある場合のみ表示するバッジ */}
      <div className="mb-3">
        ステータス: 
        {user.hasUnreadMessages ? (
          <span className="badge bg-warning text-dark ms-2">未読メッセージあり</span>
        ) : (
          <span className="badge bg-secondary ms-2">通知なし</span>
        )}
      </div>

      {/* 4. プロフィール未完了時のみ表示する警告（論理演算子） */}
      {!user.isProfileComplete && (
        <div className="alert alert-info py-2">
          <i className="bi bi-info-circle me-2"></i>
          プロフィールが未完成です。設定を完了させてください。
        </div>
      )}

      <hr />

      <div className="mt-3">
        <button className="btn btn-dark" onClick={handleLogout}>
          ログアウト
        </button>
      </div>
    </div>
  );
}

export default AdvancedUserDashboard;

このようにReactの条件付きレンダリングをマスターすることで、ユーザー一人ひとりに最適化されたパーソナライズな体験を提供することが可能になります。 大切なのは「どの手法が最もコードを読みやすく、後から変更しやすいか」という視点を持つことです。 まずはシンプルな三項演算子から使い始め、徐々にガード節や論理演算子を組み合わせて、スマートなコンポーネント設計を目指してみてください。

Reactの強力な宣言的UIの仕組みを活かせば、複雑なビジネスロジックも驚くほどスッキリと記述できるようになります。今回の学習をきっかけに、さらに高度なステート管理やコンポーネント分割にもぜひ挑戦してみてください。