先生と生徒の会話形式で理解しよう

生徒

「Reactで条件分岐ってできますか？」

先生

「Reactの条件分岐は、いくつかの方法があります。」

生徒

「具体的にはどのように使うんですか？」

先生

「それでは、具体的にプログラムの書き方を見ていきましょう！」

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

React（リアクト）で画面に表示する内容を切り替えるには、「条件分岐（じょうけんぶんき）」という考え方が必要です。たとえば、「ログインしているかどうか」で表示を変えたり、「数値が0より大きいかどうか」で見た目を切り替えるといった場面でよく使われます。

Reactでは、条件分岐に以下のような方法があります。

if文を使う
三項演算子（さんこうえんざんし）を使う
論理演算子（&&や||）を使う

この記事では、初心者にもわかりやすく「if文」と「三項演算子」の使い方を中心に解説します。

2. if文でReactの条件分岐を書く基本

if文とは、「もし〜だったら、こうする」という命令です。たとえば、「もしログインしていたら、ようこそと表示する」といった感じです。

Reactでは、JSX（ジェイエスエックス：HTMLのように見えるJavaScriptの書き方）の中では直接if文を書くことができません。なので、まずはJSXの外で分岐の処理を用意する方法をとります。


import React from "react";

function App() {
  const isLoggedIn = true;
  let message;

  if (isLoggedIn) {
    message = "ログインしています";
  } else {
    message = "ログインしていません";
  }

  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
}

export default App;

（画面に「ログインしています」と表示されます）

このように、messageという変数にif文で代入しておいて、それをJSX内で{message}のように使います。これが一番基本的なやり方です。

3. 三項演算子でシンプルに条件分岐する

if文よりも短く書ける方法が「三項演算子（さんこうえんざんし）」です。これは、条件 ? 真の場合 : 偽の場合という形で書きます。

「もし〇〇ならA、そうでなければB」と1行で書けるので、ReactのJSXではよく使われます。


import React from "react";

function App() {
  const isLoggedIn = false;

  return (
    <div>
      <h1>
        {isLoggedIn ? "ログイン済みです" : "ログインが必要です"}
      </h1>
    </div>
  );
}

export default App;

（画面に「ログインが必要です」と表示されます）

このように、JSXの中でも{条件 ? 真 : 偽}という形で直接書けます。とても見やすく、短く書けるのが魅力です。

4. ボタンを押すと条件が変わる例

次は、ボタンを押すと条件が変わるようなサンプルを見てみましょう。useStateというReactの機能を使って、状態を変えます。


import React, { useState } from "react";

function App() {
  const [isOnline, setIsOnline] = useState(false);

  return (
    <div>
      <h2>
        {isOnline ? "オンライン中です" : "オフラインです"}
      </h2>
      <button onClick={() => setIsOnline(!isOnline)}>
        状態を切り替え
      </button>
    </div>
  );
}

export default App;

（画面に「オフラインです」と表示され、ボタンを押すと「オンライン中です」に切り替わります）

このように、useStateで状態（isOnline）を管理し、その値によって表示内容を切り替えるのが、Reactの基本的な考え方です。

5. JSXの中での条件分岐に注意しよう

Reactでは、HTMLのように見えるJSXの中では、直接if文を使うことができません。これは、JSXがJavaScriptの「値」として扱われるからです。そのため、条件分岐をJSX内で行うには、三項演算子か論理演算子（&&など）を使うのが一般的です。

たとえば以下のように書くとエラーになります。


// JSX内で直接if文を書くとエラーになる
return (
  <div>
    if (isLogin) {
      <p>ログイン中</p>
    }
  </div>
);

正しくは、if文はJSXの外で使うか、三項演算子を使いましょう。

6. Reactの条件分岐は日常の「もし〜なら」にそっくり

Reactの条件分岐は、普段の生活で考える「もし〇〇なら〜する」という考え方ととても似ています。

たとえば、「もし雨が降ったら傘を持っていく」「もしメールが届いたら通知する」というような行動の切り替えです。

プログラムの中でも同じで、「もし〇〇なら〜を表示」と考えると、とてもわかりやすくなります。

まとめ

Reactの条件分岐をふりかえると、画面の表示を「状態」によって切り替える仕組みがとても重要であることがあらためて理解できます。日常の行動で「もし雨なら傘を持つ」と考えるように、Reactでは「もし true ならこのメッセージを表示する」という形でUIを切り替えます。こうした条件分岐の使い方は、ログイン状態の判定、オンライン・オフラインの表示、ボタンの有効・無効、エラー表示の切り替えなど、多くの画面で自然に利用されています。Reactの魅力は、JSXとJavaScriptが一体となって動作し、状態の変化がそのままUIの変化につながることです。今回の記事で扱った if文、三項演算子、論理演算子の使い方を正しく理解することで、動きのあるインターフェースを自分の手で自由に作れるようになります。

また、JSXの中で直接 if文が使えないというポイントは、React初心者がつまずきやすい部分です。しかし、JSXはあくまでも「値を返す記述」であるため、if文のように文（ステートメント）を書くことができません。この仕組みを理解すると、Reactでは条件分岐をどのように扱えばよいかが自然に見えてきます。JSX外で変数に代入して使ったり、JSX内では三項演算子を使ってシンプルに記述する方法が広く採用されています。とくに三項演算子は、Reactのコードの中で非常によく登場し、「条件 ? 真の場合 : 偽の場合」という書き方が画面構築においてとても便利です。

さらに、useStateと条件分岐を組み合わせると、ユーザー操作に応じてリアルタイムに画面が変化する仕組みを簡単に実現できます。ボタンを押したらテキストが切り替わる動作は、Reactの根本である「状態管理」の理解にもつながります。状態（state）を変更するとコンポーネントが再レンダリングされ、それに応じて条件分岐の結果も変わり、新しいUIが表示されるという一連の流れは、Reactが生み出す自然で滑らかな操作体験を支えています。条件分岐の理解は、単に UI を切り替えるだけではなく、アプリ全体の振る舞いをコントロールする基礎になるため、今回学んだ書き方をしっかり身につけておくことで、より複雑な画面や状態管理へもスムーズに進めるようになります。

また、実用的な場面では、複数の条件が重なる場合も多く、三項演算子をネストしすぎて可読性が下がってしまうこともあります。そのようなときは、あえて一度JSXの外で変数に代入する方式を取り入れたり、条件ごとに小さなコンポーネントを分けて整理するという工夫が役立ちます。Reactの条件分岐は、単に「書ける」だけでなく、「読みやすく」「管理しやすく」書くことが大切です。UIが増えれば増えるほど、適切な条件分岐とコンポーネント構造の工夫が開発の効率を左右するようになります。

条件分岐の復習サンプルコード

最後に、if文と三項演算子を組み合わせてよりわかりやすくしたまとめ用サンプルを示します。


import React, { useState } from "react";

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

  let statusText;
  if (count === 0) {
    statusText = "まだ何もありません";
  } else if (count > 0 && count < 5) {
    statusText = "少し増えました";
  } else {
    statusText = "たくさん増えました！";
  }

  return (
    <div className="card p-3" style={{ margin: "10px" }}>
      <h2>{statusText}</h2>
      <p>現在の数：{count}</p>
      <button onClick={() => setCount(count + 1)}>
        増やす
      </button>
      <p>{count >= 10 ? "２桁になりました！" : "もう少しで２桁です" }</p>
    </div>
  );
}

export default StatusMessage;

このサンプルでは、if文で複数段階の条件を整理しつつ、最後に三項演算子で表示を切り替えています。状態（count）の変化によって表示が変わる様子が一目で理解でき、Reactにおける条件分岐の考え方を広く確認できる構成になっています。小さな分岐から少し複雑な分岐まで、Reactではシンプルに書けるという点が、開発者にとって大きな利点となっています。

先生と生徒の振り返り会話

生徒

「Reactの条件分岐って最初はむずかしいと思っていたけれど、生活の『もし〜なら』と同じ考え方だと気づいてからスッと理解できました！」

先生

「その感覚はとても大切ですよ。条件分岐を正しく使えると、画面の動きが一気に豊かになります。」

生徒

「三項演算子で短く書けるのも便利ですね。JSXの中で直接使えるって知ってから書きやすくなりました。」

先生

「そうですね。ただ、複雑になりすぎると読みにくくなるので、if文との使い分けが大切です。」

生徒

「ボタンで状態が切り替わるサンプルを見て、Reactらしい動きが理解できました！条件分岐とuseStateの組み合わせはすごく強力ですね。」

先生