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

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

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

Reactで条件分岐を行うときは、画面に表示する内容を状況に応じて切り替えるために 「条件付きレンダリング」という考え方を使います。条件付きレンダリングとは、 ある条件が成立したときだけ特定の部品（コンポーネントやテキスト）を表示する仕組みのことです。 家の電気がスイッチを押したときだけ点灯するのと同じで、状況に応じて画面の見た目を変えるために欠かせない仕組みです。 その中でも最も基本的でわかりやすいのが「if文」を使った書き方です。if文はプログラミングで 「もし～ならば」という条件を判断する文法で、Reactでもこの仕組みを使って動きをコントロールできます。 初心者がつまずきやすいのは「JavaScriptのif文」と「Reactのレンダリング」の組み合わせ方なので、 ここではできるだけ丁寧に解説していきます。

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

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

Reactでは、コンポーネントの中でif文を使って、表示する内容を切り替えることができます。 例えば「ログインしているかどうか」「フラグがオンかオフか」「エラーが起きているかどうか」などの状態に応じて、 違う内容を画面に出し分けたいときにとても便利です。まずは最もシンプルな例から見ていきます。 ここでは、ある変数の値がtrueであればメッセージを表示し、falseであれば別のメッセージを表示するという基本的な仕組みを作ります。 また、ReactではHTMLのように見えるJSXという書き方を使って画面を作るため、 if文を書く位置や書き方のルールを理解することが大切です。 JSXの中では直接if文を書くことはできないため、事前に変数を用意してそこへ条件に応じた内容を入れておくという方法がよく使われます。

import React, { useState } from "react";

function App() {
  const [isLogin, setIsLogin] = useState(false);

  let content;
  if (isLogin) {
    content = <h2>ログイン中です</h2>;
  } else {
    content = <h2>ログアウト状態です</h2>;
  }

  return (
    <div>
      {content}
      <button onClick={() => setIsLogin(!isLogin)}>
        状態を切り替える
      </button>
    </div>
  );
}

export default App;

上の例では、if文の条件によってcontentに代入する内容を切り替えています。 JSXの外で条件判断を行い、結果だけをreturn内で表示するという流れが理解できれば、 Reactでの条件分岐は一気にわかりやすくなります。

3. 関数の中で直接if文を使う方法

3. 関数の中で直接if文を使う方法

Reactでは、必要に応じてコンポーネント内のreturnより前で条件を分ける方法がよく使われますが、 場合によってはreturnの中で分岐したい状況もあります。その場合は、returnを複数用意する形で 条件に応じて違うreturnを書く方法があります。これは処理が短くまとまる場合に便利です。 ただし、画面構成が複雑になると逆に見づらくなるため、構造を整理しながら使うことが大切です。

function App() {
  const isError = true;

  if (isError) {
    return <p style={{ color: "red" }}>エラーが発生しました</p>;
  }

  return <p>正常に動作しています</p>;
}

このように複数のreturnを使うことで、条件に応じた画面の切り替えがより直感的に書けます。 特に「ある条件のときだけ別画面にしたい」という場合に役立ちます。

4. 画面の一部だけ切り替えるif文の使い方

4. 画面の一部だけ切り替えるif文の使い方

画面の全部ではなく、一部分だけを切り替える場合もあります。 例えば「エラーメッセージだけを条件によって表示したい」といったケースです。 その場合はif文の代わりに、条件を満たしたときだけ特定の要素を返すようにする方法があります。 また、表示したい部分を専用の変数にまとめることで、構造もわかりやすくなります。 初心者がReactでつまずく理由の一つに「JSXの中に直接if文が書けない」という点がありますが、 事前に変数を作るという流れを理解すれば問題なく対応できます。

function App() {
  const isError = false;

  let errorMessage = null;
  if (isError) {
    errorMessage = <p style={{ color: "red" }}>エラーです</p>;
  }

  return (
    <div>
      <h1>ようこそ</h1>
      {errorMessage}
    </div>
  );
}

if文は、Reactで条件付きレンダリングを行う際の基本的な道具です。 状況に応じて「表示するかどうか」を細かく制御できるため、多くの実務コードでもよく使われています。 初心者でも理解しやすく、また応用もしやすいため、Reactを学ぶうえで最初に覚えておくべき考え方と言えます。

まとめ

まとめ

Reactにおける条件分岐の基本である「if文」を使った実装方法について解説してきましたが、いかがでしたでしょうか。Reactの開発において、ユーザーの操作やデータの状態（ステート）に合わせて画面の表示を動的に切り替える「条件付きレンダリング」は、アプリケーションの使い勝手を左右する非常に重要な要素です。

JavaScriptの基礎知識であるif文を、Reactのコンポーネントの中でどのように配置し、JSXと組み合わせていくのかという流れを理解することが、フロントエンドエンジニアとしての第一歩となります。

Reactで条件分岐をマスターするためのポイント

記事の内容を振り返り、実務でも役立つ重要なポイントを整理しました。

• JSXの外で分岐処理を行う： JSX（return文の中）ではif文が直接書けないため、returnの前に変数を定義して条件分岐の結果を代入しておく手法が一般的です。
• 早期リターン（Early Return）： コンポーネントの冒頭でエラーチェックなどを行い、特定の条件で全く別のUIを返したい場合は、複数のreturn文を使うとコードがスッキリします。
• 変数を活用する： 部分的な表示の切り替えには、letで宣言した変数にJSXの要素を代入し、それを波括弧 {} で埋め込む方法が、可読性を高めるコツです。
• ステートとの連動： useStateなどのフックと組み合わせることで、ボタンクリックやフォーム入力といったユーザーアクションに即座に反応する画面が作れます。

今回はif文に焦点を当てましたが、Reactには他にも「三項演算子」や「論理論理積（&&演算子）」を使った、より簡潔な条件分岐の書き方も存在します。しかし、複雑な条件や複数の処理が絡む場合は、今回学んだif文による分岐が最もデバッグしやすく、読み間違いも少ない方法です。まずはこの基本をしっかりと身につけ、どのような状況でも自在に画面をコントロールできるよう練習を重ねていきましょう。

応用：複数の条件で表示を切り替える実践コード

最後に、より実践的な例として「読み込み中」「エラー」「データ表示」の3つの状態をif文で切り替えるプログラムコードを紹介します。このように状態を細かく分けることで、ユーザーに親切なインターフェースを提供できます。

import React, { useState } from "react";

function DataFetcher() {
  const [status, setStatus] = useState("loading"); // "loading", "error", "success"

  // 1. 早期リターンによる条件分岐
  if (status === "loading") {
    return (
      <div className="container mt-4">
        <p className="text-muted">データを読み込んでいます...</p>
        <button className="btn btn-outline-primary" onClick={() => setStatus("success")}>
          読み込み完了をシミュレート
        </button>
      </div>
    );
  }

  // 2. 変数を使った部分的な条件分岐
  let content;
  if (status === "error") {
    content = <div className="alert alert-danger">通信エラーが発生しました。</div>;
  } else if (status === "success") {
    content = (
      <div className="card shadow-sm p-3">
        <h3 className="h5">データ取得成功！</h3>
        <p>Reactの条件分岐をマスターすれば、複雑なアプリも自由自在です。</p>
      </div>
    );
  }

  return (
    <div className="container mt-4">
      <h2 className="mb-3">ステータス表示システム</h2>
      {content}
      <hr />
      <button className="btn btn-secondary me-2" onClick={() => setStatus("loading")}>
        最初に戻る
      </button>
      <button className="btn btn-danger" onClick={() => setStatus("error")}>
        エラーを発生させる
      </button>
    </div>
  );
}

export default DataFetcher;

このように、if文を使い分けることで、ユーザーの状況に合わせた柔軟なUI設計が可能になります。プログラムの可読性を保ちつつ、最適な手法を選べるようになりましょう。