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

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

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

Reactで条件分岐を行う方法には、三項演算子、if文、そして論理演算子を使った表示切り替えなどがあります。 条件分岐とは、状況に合わせて画面に見せるものを変える仕組みのことで、家の玄関で「合言葉を知っている人だけ中へ入れる」 といったイメージに近いものです。特にWebアプリでは、ログイン状態や会員レベルに応じて表示内容を変えることが多く、 初心者の方でもしっかり理解しておくと後々役に立ちます。 Reactは画面の部品を組み合わせてつくるので、特定の状況に合わせて「この部品は表示する」「これは隠す」といった 制御ができることがとても重要です。三項演算子は「条件 ? A : B」という形で、条件が成り立つときはA、そうでないときはBを 表示します。論理演算子の「&&」は「条件が本当のときだけ右側を表示する」という便利な仕組みで、 シンプルな条件にはとても向いています。さらにif文は複雑な条件を組み合わせたいときに使われ、 役割に応じて場面ごとに使い分けることができます。ここでは、これらの違いを初心者でも理解しやすいように サンプルコードを交えながらゆっくり解説していきます。

2. 三項演算子を使った基本的な条件付きレンダリング

2. 三項演算子を使った基本的な条件付きレンダリング

三項演算子は比較的短い条件分岐に向いており、状態に応じて表示内容を切り替えるときに最もよく使われます。 例えばログインしているかどうかを判定してメッセージを切り替える場合、三項演算子を使うと短く書けます。 初心者にとって三項演算子は少し見慣れない書き方かもしれませんが、仕組みは「もし〜なら〜、そうでなければ〜」と 同じ考え方で、慣れるととても読みやすくなります。ログイン中の利用者に挨拶を表示し、ログアウト状態なら ログインを促すメッセージを見せるといった基本的な構成によく使われます。

import React, { useState } from "react";

function App() {
  const [loggedIn, setLoggedIn] = useState(false);

  return (
    <div>
      <h1>{loggedIn ? "ログイン中です" : "ログインしてください"}</h1>
      <button onClick={() => setLoggedIn(!loggedIn)}>
        {loggedIn ? "ログアウト" : "ログイン"}
      </button>
    </div>
  );
}

export default App;

3. &&（論理演算子）を使ったシンプルな条件表示

3. &&（論理演算子）を使ったシンプルな条件表示

&&を使う条件分岐は、条件が成り立つときだけ特定の要素を表示したい場合に便利です。 三項演算子のように「AかBどちらかを表示する」という形ではなく、 「条件が本当ならこの部分を表示し、偽なら何も表示しない」という仕組みです。 例えば、通知メッセージやエラー表示など「特定の状態のときだけ表示したい」というケースにとても適しています。 実務でも頻繁に利用されるスタイルで、読みやすいコードを書きたい人には特におすすめです。

function Notice({ show }) {
  return (
    <div>
      {show && <p className="text-danger">エラーが発生しました</p>}
    </div>
  );
}

4. if文と早期リターンを使った複雑な条件処理

4. if文と早期リターンを使った複雑な条件処理

条件が増えて複数の状況を切り替える必要が出てくると、三項演算子や&&では読みにくくなる場合があります。 そこで役に立つのが、if文と早期リターンです。早期リターンとは、 「ある条件を満たした時点でそこで処理を終える」書き方のことで、条件ごとの分岐がわかりやすくなるという利点があります。 例えば、ログインしていない、メール認証が終わっていない、会員種別が異なるといった複数の条件がある場合、 早期リターンを使うと見通しがよくなります。初心者の方でも理解しやすく、後から内容を変更するときにも安心です。

function Dashboard({ loggedIn, verified, premium }) {
  if (!loggedIn) {
    return <p>ログインしてください</p>;
  }

  if (!verified) {
    return <p>メール認証を完了してください</p>;
  }

  return (
    <div>
      <h2>会員ダッシュボード</h2>
      {premium ? <p>プレミアム会員です</p> : <p>一般会員です</p>}
    </div>
  );
}

5. 条件付きレンダリングの使い分けと理解のコツ

5. 条件付きレンダリングの使い分けと理解のコツ

条件付きレンダリングはReactの基本でありながら、状況に応じて最適な書き方を選ぶ必要があります。 三項演算子は短く書けるため、表示内容が少ない場面に向いています。 &&演算子は「条件が本当のときだけ表示」というシンプルな用途に向きます。 if文と早期リターンは複数の条件が重なるときに適しており、大規模な画面や複雑な分岐が必要な場面に向いています。 初心者の方はまず三項演算子と&&から慣れていき、その後早期リターンを理解すると自然に読み書きできるようになります。 条件分岐は単なる記号の並びではなく、画面の流れを整理するための大切な考え方ですので、 自分が見たときに理解しやすい書き方を選ぶことがとても大切です。 画面に「いつ」「何を表示するのか」を明確にすることで、より使いやすいアプリに近づきます。

まとめ

まとめ

今回の記事では、Reactにおける条件分岐の基本から応用までを詳しく解説してきました。React開発において、特定の状態（State）に応じて表示を切り替える「条件付きレンダリング」は、避けては通れない非常に重要な技術です。ユーザーがログインしているか、データの読み込み中か、あるいはエラーが発生しているかなど、動的なWebアプリケーションには欠かせない要素ばかりです。

React条件分岐の主な手法

これまでに学んだ内容を整理すると、大きく分けて3つのパターンがありましたね。それぞれの特徴を活かして、読みやすいコードを書くことが大切です。

• 三項演算子： 「AかBか」の二択を表示する場合に最適です。JSXの中で直接書けるため、短いコードで完結します。
• 論理演算子（&&）： 「条件を満たす時だけ表示する」場合に非常に便利です。条件が偽（false）のときは何も表示されないという特性を利用します。
• if文と早期リターン： コンポーネントの構造が複雑になる場合や、複数のチェック項目がある場合に有効です。コードの見通しを良くするために実務でも多用されます。

実践的なサンプルコード：ユーザー情報の表示切り替え

まとめとして、学んだ知識を詰め込んだ少し実用的なコンポーネントを作成してみましょう。ここでは、ユーザーデータの読み込み状態（Loading）、データの有無、そしてユーザーの種類（管理者かどうか）を判定して表示を切り替えるコードを紹介します。

import React, { useState, useEffect } from "react";

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

  useEffect(() => {
    // 擬似的なデータ取得の遅延
    setTimeout(() => {
      setUser({ name: "テストユーザー", isAdmin: true });
      setLoading(false);
    }, 2000);
  }, []);

  // 1. 早期リターンによるローディング表示
  if (loading) {
    return <p className="text-muted">データを読み込み中です...</p>;
  }

  // 2. 早期リターンによるエラーハンドリング（データがない場合）
  if (!user) {
    return <p className="text-danger">ユーザーが見つかりませんでした。</p>;
  }

  return (
    <div className="border p-3 rounded bg-light">
      <h3 className="fs-5">ユーザープロフィール</h3>
      <p>お名前：{user.name}</p>
      
      {/* 3. 三項演算子による権限表示 */}
      <p>権限：{user.isAdmin ? <span className="badge bg-primary">管理者</span> : "一般ユーザー"}</p>

      {/* 4. 論理演算子(&&)による管理者限定メニュー */}
      {user.isAdmin && (
        <div className="mt-2">
          <button className="btn btn-sm btn-danger">管理者専用設定</button>
        </div>
      )}
    </div>
  );
}

export default UserProfile;

このように、Reactの条件分岐を使いこなせるようになると、ユーザーの操作やサーバーからの応答に合わせた柔軟なUIを構築できるようになります。最初はどれを使うべきか迷うかもしれませんが、「コードが一番スッキリ見えるのはどれか」を基準に選んでみてください。