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

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

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

Reactでは、ある条件によって表示する内容を切り替える「条件付きレンダリング」がとても重要になります。日常生活でも、天気が晴れなら洗濯物を外に干すけれど、雨なら部屋の中に干すという判断があります。Reactでも同じように、状態によって表示を切り替えます。条件分岐にはいくつか方法がありますが、その中でも特に使われるのが「三項演算子」と呼ばれる書き方です。三項演算子は、短く読みやすい記述で分岐が書けるため、初心者でも扱いやすく人気があります。

2. 三項演算子とは？

2. 三項演算子とは？

三項演算子とは、「条件 ? 真の場合 : 偽の場合」という形で使う簡潔な分岐の書き方です。文章で説明すると難しそうですが、実際にはとてもシンプルで、日常の「もし〜なら〜、そうでなければ〜」という考え方をそのままコードで表現します。例えば、温度が二十五度より高いときは「暑い」と表示し、そうでなければ「快適」と表示させるようなイメージです。長い条件分岐を書く必要がないので、Reactのコンポーネント内のコードをきれいに保つことにも役立ちます。

3. Reactで三項演算子を使った条件分岐を書く

3. Reactで三項演算子を使った条件分岐を書く

ここでは、ボタンを押したときに「ログインしているかどうか」で表示を切り替える例を紹介します。三項演算子の基本的な使い方が理解できれば、もっと複雑な場面でも応用できます。まずはシンプルなパターンで書いてみましょう。状態を管理するためにuseStateという仕組みを使いますが、これは値を保存して画面に反映させるための機能です。難しく感じるかもしれませんが、使っているうちに自然と理解が深まります。

import React, { useState } from "react";

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

  return (
    <div>
      <h1>{isLogin ? "ログイン中です" : "ログアウト中です"}</h1>

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

export default App;

4. 三項演算子の読み方をイメージで理解する

4. 三項演算子の読み方をイメージで理解する

三項演算子の便利さを理解するには、日常生活の判断に置き換えるとわかりやすくなります。例えば、夕飯を外食にするか家で食べるかを決める場面を想像してみましょう。「料理する気力があるなら家で食べる、疲れているなら外食する」というような判断です。Reactのコードでも同じ理屈で、「状態が真ならこの表示、偽なら別の表示」と素直に考えれば問題ありません。長文のif文を使わずに短く書けるため、コンポーネントが読みやすくなるという利点があります。

5. 三項演算子を使うときの注意点

5. 三項演算子を使うときの注意点

三項演算子は便利ですが、複雑な条件を詰め込みすぎると逆に読みづらくなってしまうことがあります。特に初心者の場合は、一つの条件だけをシンプルに書くところから始めましょう。もし分岐が三つ以上に増えるようであれば、無理に三項演算子に詰め込まず、if文を使うほうが適しています。また、状態の名前をわかりやすくつけることも大切です。名前がわかりにくいと、何を条件にしているのかが分かりづらくなり、ミスにつながりやすくなります。

6. よく使うパターンの応用例

6. よく使うパターンの応用例

Reactの実務では、「読み込み中ならローディング表示」「データがあるなら一覧を表示」「データが空ならメッセージを表示」というケースがよくあります。こうした場面でも三項演算子は役に立ちます。例えば、読み込み中かどうかを判定してメッセージを切り替えるだけでも、ユーザーにとって親切な画面になります。読んでいる人が迷わないように、必要最小限の分岐を的確に書くことがポイントになります。

function LoadingExample() {
  const [loading, setLoading] = useState(true);

  return (
    <div>
      {loading ? "読み込み中です..." : "データが表示されました！"}
    </div>
  );
}

まとめ

まとめ

Reactにおける条件分岐、特に「条件付きレンダリング」の基本について詳しく解説してきました。React開発において、ユーザーの操作やデータの状態に合わせて画面表示を動的に切り替えるスキルは必須と言えます。今回学んだ「三項演算子」は、その中でも最も頻繁に使われるテクニックの一つです。

これまでの内容を振り返ると、Reactで条件分岐を行う際には、単にJavaScriptの構文を使うだけでなく、Reactの「状態（State）」と組み合わせて考えることが重要であることがわかりました。useStateを使って管理している値が変化すると、Reactが自動的に画面を再描画してくれるため、私たちは「どのような条件の時に何を表示するか」というロジックに集中するだけで、動的なUIを構築することができます。

React条件分岐のポイント整理

Reactのコーディングをより効率的に、そして読みやすくするためのポイントを以下にまとめました。

• 三項演算子の活用： 条件 ? 真の時の表示 : 偽の時の表示 という形式は、JSX（HTMLのような記述部分）の中で直接使えるため、非常に強力です。
• 論理演算子（&&）の併用： 「もし～なら表示し、そうでなければ何も表示しない」という場合には、三項演算子よりも 条件 && 表示内容 という書き方の方がシンプルになる場合があります。
• 可読性の維持： 条件が複雑になりすぎる場合は、JSXの外で変数に代入したり、別のコンポーネントに切り出したりすることで、コードのメンテナンス性が向上します。
• ユーザー体験（UX）の向上： 読み込み中（Loading）やエラー時の表示を条件分岐で出し分けることで、ユーザーがストレスを感じない親切なアプリケーションになります。

実践的なサンプルコード：複数の条件を扱う

これまでは二択の切り替えを見てきましたが、もう少し実践的な「複数の状態」を管理する例を見てみましょう。例えば、フォームの送信状態を「入力中」「送信中」「完了」の3段階で切り替えるようなケースです。このような場合は、三項演算子を入れ子にするよりも、一度変数に表示内容を格納する方法がスッキリします。

import React, { useState } from "react";

function StatusMessage() {
  const [status, setStatus] = useState("typing"); // "typing", "sending", "success"

  // 条件によって表示する内容を変数に代入する
  let content;
  if (status === "typing") {
    content = <p>メッセージを入力してください...</p>;
  } else if (status === "sending") {
    content = <p>現在送信中です。少々お待ちください。</p>;
  } else if (status === "success") {
    content = <p>無事に送信が完了しました！ありがとうございます。</p>;
  }

  return (
    <div className="p-4 border rounded">
      <h3>ステータス確認</h3>
      {content}
      
      <div className="mt-3">
        <button className="btn btn-primary me-2" onClick={() => setStatus("typing")}>入力中</button>
        <button className="btn btn-warning me-2" onClick={() => setStatus("sending")}>送信中</button>
        <button className="btn btn-success" onClick={() => setStatus("success")}>完了</button>
      </div>
    </div>
  );
}

export default StatusMessage;

これからの学習ステップ

条件分岐をマスターしたら、次は「配列の展開（map関数）」に挑戦してみるのがおすすめです。条件分岐が「表示の切り替え」なら、map関数は「リストの表示」を担います。この二つを組み合わせることで、例えば「データがあるときはリストを表示し、データが空のときは『データがありません』という警告を出す」といった、実務でよくある画面を簡単に作れるようになります。

Reactの世界は非常に奥が深いですが、基礎となる条件分岐をしっかり押さえておけば、どんな複雑なUIもその積み重ねで作ることができます。まずは小さな部品から、今回学んだ三項演算子を使って、自分の手で動かしてみることが上達への近道です。プログラムは書けば書くほど自分の身になりますので、ぜひ色々なパターンを試してみてくださいね。