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

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

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

Reactで条件分岐を行う方法はいくつかあります。もっともよく使われるのは、JavaScriptの if文や三項演算子という仕組みを使って表示する内容を変える方法です。 条件分岐とは、特定の条件が「真（true）」か「偽（false）」かによって、画面に出すものを切り替える仕組みのことです。 プログラミング未経験の方は、家のライトのスイッチを想像するとわかりやすいかもしれません。 スイッチがオンなら部屋が明るくなり、オフなら暗いままです。Reactの条件分岐も、似たように「状態」によって見える内容が変わります。

この記事では、とくに実務でもよく使われる「エラーメッセージを条件付きで表示するパターン」を深く解説します。 Webアプリやフォームでは、入力に誤りがあると赤い文字で注意を表示することがあります。 Reactではこれを簡単に作れるため、初心者でも安心してフォームを扱えるようになります。

2. エラーメッセージを条件付きで表示する仕組みとは？

2. エラーメッセージを条件付きで表示する仕組みとは？

エラーメッセージを条件付きで表示するには、まず「エラーがあるかどうか」を判定するための変数を用意します。 この変数は、ReactのuseState（ユースステート）という、画面の状態を管理する仕組みを使って作ります。 useStateについて簡単に説明すると、Reactで画面を更新するための特別な箱のようなものです。 中身を書き換えると画面が新しい状態に変わるため、ボタンを押す操作や入力内容に応じて表示を変えることができます。

エラー表示では、たとえば「入力されていないとき」や「メールアドレスの形式が違うとき」などの状況で エラーメッセージを出したい場面がよくあります。 Reactでは、このような条件をif文や三項演算子で記述し、エラーがあるときだけメッセージを表示する仕組みを作ります。

3. 三項演算子を使ったエラー表示の例

3. 三項演算子を使ったエラー表示の例

ここでは、三項演算子というJavaScriptの書き方を使って、エラーメッセージを表示する例を紹介します。 三項演算子とは、条件 ? 真の場合 : 偽の場合 という形で書ける短いif文のようなものです。 Reactでは非常に多くの場面で使われるので、早い段階で慣れておくと便利です。

import React, { useState } from "react";

function App() {
  const [text, setText] = useState("");
  const [error, setError] = useState("");

  const handleChange = (e) => {
    const value = e.target.value;
    setText(value);

    if (value.trim() === "") {
      setError("入力が必要です");
    } else {
      setError("");
    }
  };

  return (
    <div>
      <input
        type="text"
        placeholder="入力してください"
        value={text}
        onChange={handleChange}
      />

      {error ? <p style={{ color: "red" }}>{error}</p> : null}
    </div>
  );
}

export default App;

このコードでは、入力欄が空の場合にだけエラーメッセージが表示され、文字が入力されると消える仕組みになっています。 実際のWebフォームでもよく使われる書き方で、初心者でも少しずつ慣れていけば理解できるようになります。 また、三項演算子は短く書ける一方で、複雑になりすぎると読みづらくなるので、用途に応じて使い分けることが大切です。

4. 短絡評価を使って書くよりシンプルな書き方

4. 短絡評価を使って書くよりシンプルな書き方

もうひとつよく使われる方法として、短絡評価（&&）を利用した書き方があります。 JavaScriptでは、条件 && 表示する内容 と書くことで、条件が真のときだけ右側が実行されます。 エラーメッセージのように「あるときだけ表示したいもの」がある場合、この方法は非常に便利です。

{error && <p style={{ color: "red" }}>{error}</p>}

この書き方は、三項演算子よりもシンプルで読みやすい場合が多く、日常的に使われることも多いです。 とくにエラーメッセージや注意文のように「出すか出さないか」の二択の場合、短絡評価が最適です。

5. よくある初心者のつまずきポイント

5. よくある初心者のつまずきポイント

条件付きレンダリングを扱う際、初心者がつまずきやすいところがあります。 まず、useStateを使わずにただ変数を書き換えても画面は更新されない点です。 Reactは画面の状態をuseStateで管理しているため、エラーメッセージもその状態に応じて再描画されます。

また、エラーメッセージを複数扱う場合、状態をまとめるかどうかでコード量が大きく変わります。 最初は単純な例から始めて、慣れてきたら少しずつ整理していくと理解しやすいでしょう。 さらに、入力チェックの条件が増えるとロジックが複雑になってきますが、まずは一つの条件だけで動作を理解し、 徐々にパターンを増やしていくのが良い学習方法です。

まとめ

まとめ

今回の記事では、Reactにおける条件分岐の基本から、実務で多用されるエラーメッセージの表示方法まで詳しく解説してきました。Reactの条件分岐は、単に画面の見た目を切り替えるだけでなく、ユーザーの操作に対して適切なフィードバックを返すための非常に重要な技術です。これらをマスターすることで、ユーザーにとって使い心地の良い、インタラクティブなWebアプリケーションを構築することができるようになります。

React条件分岐の主要な手法

Reactで開発を行う際、私たちがもっとも頻繁に目にする条件分岐の手法は、主に以下の3つに集約されます。それぞれの特徴を理解し、状況に合わせて最適なものを選択できるようにしましょう。

• 三項演算子（? :）：条件によって「Aを表示するか、Bを表示するか」を切り替えたい場合に最適です。
• 論理積（&&）による短絡評価：条件が満たされたときだけ「何かを表示したい」場合に、もっともシンプルに記述できます。
• if文：JSX（returnの中）の外側で、複雑なロジックを整理して変数を定義する場合に適しています。

実戦で役立つ！さらに高度な条件分岐の例

記事本編ではシンプルなエラーメッセージを紹介しましたが、実際の開発現場では、ログイン状態やデータの読み込み中（ローディング）など、複数の状態を管理することが求められます。ここでは、もう少し実戦に近い、複数の条件を組み合わせたプログラムコードを見てみましょう。

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

function UserProfile() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 擬似的なデータ取得シミュレーション
    setTimeout(() => {
      const success = true; // ここをfalseに変えるとエラー表示の確認ができます
      if (success) {
        setUser({ name: "React太郎", email: "react@example.com" });
      } else {
        setError("データの取得に失敗しました。");
      }
      setIsLoading(false);
    }, 2000);
  }, []);

  // 1. ローディング中の表示
  if (isLoading) {
    return <p>データを読み込み中です...</p>;
  }

  // 2. エラー発生時の表示
  if (error) {
    return <p style={{ color: "orange" }}>警告: {error}</p>;
  }

  // 3. データが存在する場合の表示（正常系）
  return (
    <div className="profile-card">
      <h3>ユーザープロフィール</h3>
      {user ? (
        <div>
          <p>名前: {user.name}</p>
          <p>メール: {user.email}</p>
        </div>
      ) : (
        <p>ユーザー情報が見つかりません。</p>
      )}
    </div>
  );
}

export default UserProfile;

条件分岐を使いこなすためのポイント

Reactのコーディングにおいて、条件分岐を綺麗に書くコツは「コンポーネントを肥大化させないこと」です。return文の中が三項演算子だらけになってしまうと、後からコードを見直したときに、どこが何の条件なのか分からなくなってしまうことがあります。

そのような場合は、条件分岐の結果を一度変数に代入してからJSX内で呼び出すか、あるいは「条件付きで表示する部分」そのものを別の小さなコンポーネントとして切り出すのがプロのテクニックです。これにより、コードの再利用性が高まり、チーム開発でも喜ばれるメンテナンス性の高いプログラムになります。

最後に：継続的な学習が上達への近道

最初は「&&」や「三項演算子」の書き方に違和感を覚えるかもしれませんが、何度も手を動かしてコードを書くうちに、自然と指が動くようになります。エラーメッセージの表示は、フォームバリデーション（入力チェック）の基礎でもあります。この技術を土台にして、次はAPI連携や複雑なステート管理に挑戦してみてください。Reactの世界は奥が深いですが、一歩ずつ進めば必ず習得できます！