Reactでif文を使った条件分岐のやり方（初心者向け解説）

フロントエンド開発•2025/1/28

はじめに

Reactを触り始めると、必ず直面するのが「ある条件で特定のコンポーネントを表示したい」「条件に応じて表示内容を切り替えたい」といったニーズではないでしょうか。一見シンプルな要望に思えますが、コードの書き方を誤ると可読性が下がり、予期せぬバグにつながることもあります。そのため、React で条件分岐を扱う際には基礎的な文法だけでなく、実務で役立つ考え方を理解しておくことが大切です。とはいえ、初心者の方には「if文を入れる場所がわからない」「JSXではどのように条件分岐をするのかイメージしづらい」といった不安を抱えるケースも多いかもしれません。本記事では、React特有の書き方や実務での活用シーンを紹介しながら、初心者でも取り組みやすい形で条件分岐の実装方法を解説していきます。

この記事を読むとわかること

条件分岐を行うための基本的なJavaScript構文の復習
Reactでif文や三項演算子を用いるときの実装例
実務の中で活用される具体的な条件分岐の使い方
複数の条件を整理してコードを読みやすくするテクニック

条件分岐とは

条件分岐とは「もし〜ならば◯◯をする」というロジックをコードに落とし込むための手法です。多くのプログラミング言語で、if文やswitch文、三項演算子（条件演算子）などを利用することで分岐を実現します。たとえば「ユーザーがログインしていればプロフィール情報を表示し、未ログインならログインボタンを見せる」という場面などが典型例でしょう。 Reactの場合はJSX上でJavaScriptの構文を使って条件を分けますが、HTMLのような見た目とロジックが同じファイルに混在するため、最初は書き方に戸惑うかもしれません。しかし、基本的な思想としては通常のJavaScriptにおける条件分岐と変わりませんので、大まかな流れを理解してしまえばそれほど難しくはないでしょう。

Reactで条件分岐を行う仕組み

ReactはJSXという独自の構文拡張を使ってUIを表現します。 JSXは見た目こそHTMLに似ていますが、中身はJavaScriptの機能と連動しており、状態（State）や属性（Props）に応じてコンポーネントを出し分ける仕組みを簡単に実装できます。具体的には、状態を管理するフック（useStateなど）から取得した値を参照し、if文や三項演算子 を使って表示する要素を切り替えていきます。条件が真の場合だけ特定のコンポーネントをレンダリングする書き方や、複数の条件に応じて異なるUIを返すパターンなど、多彩な実装方法を選択できます。その際、Reactが仮想DOMを使って差分だけを反映してくれるため、レンダリングのタイミングがわかりやすいのも特徴です。

if文や三項演算子を使った実装例

Reactの中で「if文をそのまま書いてはいけない」と思われる方がいますが、それは誤解です。 JSXの中で直接if文を書く場合、たとえば条件によって何も表示しないパターンを扱うなら、関数の先頭で条件分岐を行うことがあります。一方で、UIを切り替える場面では三項演算子がしばしば使われます。実例として「ユーザーのログイン状態」に応じて表示を切り替えるコードを見てみましょう。


import React, { useState } from "react";

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

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
  };

  return (
    <div>
      {isLoggedIn ? (
        <p>ログインしています。</p>
      ) : (
        <p>ログインしていません。</p>
      )}

      {isLoggedIn ? (
        <button onClick={handleLogout}>ログアウト</button>
      ) : (
        <button onClick={handleLogin}>ログイン</button>
      )}
    </div>
  );
}

export default LoginStatus;

この例では、isLoggedIn というステートによって表示する文言とボタンを切り替えています。三項演算子は「条件 ? 真の場合 : 偽の場合」の構文で、JSX内でのちょっとした分岐にとても便利です。また、if文を使って複数の条件を段階的に分けたいケースもありますが、その場合はコンポーネント上部で条件をまとめる方が可読性を保ちやすいでしょう。

実務での活用シーン

実務では、単に「ログイン状態か否か」以外にも、多彩な条件分岐が必要になるケースがあります。たとえば、APIリクエストの結果がエラーだったときにエラー画面を表示する、ロード中はスピナーを表示するといった形で、複数の状態を分岐させるパターンがよくあります。さらに、ユーザー権限によってボタンそのものを非表示にするなど、UIの表示可否を複雑に制御したい場面もあるでしょう。こうした複数の条件が絡む実装を行うときは、三項演算子を入れ子で書きすぎると見づらくなるので注意が必要です。可読性を維持するためには、早めに各状態ごとに条件分岐をまとめて記述するか、ロジックを小さな関数に切り出してからJSXで呼び出す方法がよく用いられています。

複雑な条件分岐を行うときは、まずロジック側で状態をまとめておくとコードが見やすくなることがあります。

複数条件での分岐

if文を使って複数の条件を連続して書くケースでは、実装が複雑になりがちです。特に、状態や入力値によって「3パターン以上の異なるUIを返す」といった場面では、見通しのよいコード構造を工夫しないと混乱しやすいでしょう。以下は「ユーザーの役割（role）」が "admin" の場合と "guest" の場合で処理を分岐し、それ以外なら警告を表示する例です。


function UserDashboard({ role }) {
  if (role === "admin") {
    return <p>管理者向けのダッシュボードを表示しています。</p>;
  } else if (role === "guest") {
    return <p>ゲスト向けの制限された画面を表示しています。</p>;
  } else {
    return <p>権限が不明です。アクセス許可を確認してください。</p>;
  }
}

export default UserDashboard;

このように記述することで、UIのパターンを明確に分けることができます。さらに条件が増える場合はswitch文を使う方法もありますが、Reactではif文による記述を好む開発者も多いようです。複数条件の分岐をスッキリまとめるコツとして、JSXの中に直接条件を並べるのではなく、関数内で状況に応じたメッセージや要素を予め変数に格納する形にすると整理しやすいです。

よくある疑問

初心者の方が迷いやすいポイントとして、「JSXにおける条件分岐の書き方が自由すぎてどれを使うべきか判断できない」という声がよくあります。結論としては、UIを一つだけ選択するなら三項演算子が直感的ですが、複数の条件があるならif文でまとめたほうが見通しが良いケースが多いです。また、最終的に何も表示しないロジックを組み込みたい場合は、React特有の「論理演算子 &&」を使うとスッキリする場面があります。たとえば、isLoading がtrueのときだけスピナーを表示したいなら、isLoading && <Spinner /> という形がよく使われます。この書き方は三項演算子と比べてシンプルですが、偽の場合は何も返さないため、用途をしっかり見極めて使うことが大事です。

三項演算子と論理演算子&&の使い分けを誤ると、意図せずUIが表示されなくなることがあるので注意してください。

まとめ

今回は、React の条件分岐にフォーカスして、基本的なif文や三項演算子による実装、さらに実務での応用例について解説しました。コードを読みやすく保つには「複数条件を一箇所に集める」「if文と三項演算子のそれぞれの強みを活かす」といったテクニックがカギになります。また、複雑なロジックを伴う分岐ほど、コンポーネント内に詰め込みすぎないよう意識しておくと保守が楽になるでしょう。みなさんがReactでアプリケーションを組むときは、今回紹介したポイントを踏まえながら、スムーズに条件分岐を実装してみてはいかがでしょうか。正しく条件分岐を扱えるようになれば、UIの見せ方が柔軟になり、ユーザー体験の向上にもつながるはずです。