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

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

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

Reactで条件分岐を行う方法はいくつかありますが、その中でも特に使われるのが論理演算子を使った方法です。なかでも&&という記号を使う方法は、短く書けて読みやすいため、多くのプログラマーが日常的に使います。普段の生活でも「もし〜なら〜する」という考え方がありますよね。この日常の考え方をそのままコードにするのが条件分岐です。初心者の方でも、ルールさえ覚えればすぐに使えるようになります。

2. 論理演算子（&&）とは？

2. 論理演算子（&&）とは？

論理演算子のひとつである&&は、「そして」という意味を持つ記号です。ふだんの会話でも「宿題を終わらせたそして部屋の片付けもしたらゲームをしていいよ」というように使いますよね。Reactでも同じで、「この条件がtrue（真）だったら、右側を表示する」というシンプルな仕組みです。

たとえば、Reactで「ログインしているときだけメッセージを表示したい」という場合にとても便利です。&&は短いのにとても実用的な書き方なので、初めてReactを学ぶ人にも覚えておく価値があります。

3. && を使って条件付き表示をする基本形

3. && を使って条件付き表示をする基本形

まず、条件付きレンダリング（表示）というのは、必要なときだけ画面に何かを出すという操作です。Reactの画面はコンポーネントという部品からできており、&&を使うと、その部品を出したり隠したりできます。

基本の形はとても簡単です。

{ 条件 && <div>表示したい内容</div> }

条件がtrueなら右側の内容が画面に表示され、falseなら何も表示されません。とても単純な仕組みなので、複雑な書き方を覚えなくてもすぐに使いこなせます。

4. 実際に React で && を使ってみよう

4. 実際に React で && を使ってみよう

実際に小さな例を作って動きを見てみましょう。今回は「ボタンを押したらメッセージが表示される」というシンプルなサンプルです。表示するかどうかはisShowという状態（state）で管理します。stateとは「変わる値を保存しておく箱」のようなものです。

import React, { useState } from "react";

function App() {
  const [isShow, setIsShow] = useState(false);

  return (
    <div>
      <button onClick={() => setIsShow(true)}>メッセージを表示</button>
      {isShow && <p>このメッセージは条件がtrueのときだけ見えます！</p>}
    </div>
  );
}

export default App;

このように&&を使うと、「条件がtrueなら表示する」というシンプルな仕組みをとても短く書けます。特に、ちょっとした文章や小さなパーツを条件によって出したいときに非常に便利です。

5. && を使うときに気をつけたいポイント

5. && を使うときに気をつけたいポイント

便利な&&ですが、いくつか覚えておくと安心なポイントがあります。たとえば、数字のゼロや空文字などが条件になっているときは、その値がfalseとして扱われてしまうことがあります。JavaScriptでは空っぽの値を「falsy（偽っぽい値）」と判断するルールがあります。Reactでもこのルールがそのまま使われます。

たとえば、数字の0はfalsyなので、0 && 〜と書くと右側は実行されません。このように、条件に使う値の性質を知っておくと、思わぬ動きにならずに済みます。初心者のうちは難しく感じるかもしれませんが、コードを書いているうちに自然と覚えられるので心配しなくて大丈夫です。

6. 実用シーンでよく使われるパターン

6. 実用シーンでよく使われるパターン

実際のウェブアプリでは、&&を使った条件表示が頻繁に登場します。よくある例は、ログインしているかどうかを判定する画面です。ユーザーの状態をチェックし、「ログイン中ならプロフィールを表示」「ログインしていなければ案内文だけ出す」といった処理が簡単にできます。

また、読み込み中のスピナー（ぐるぐる回る表示）を出したいときにも便利です。isLoading && ローディング表示のように書けば、必要なときだけ表示できます。画面をすっきり保てるため、初心者でもきれいなコードが書きやすくなる点も魅力です。

7. && と他の条件分岐との使い分け

7. && と他の条件分岐との使い分け

Reactでは&&以外にも三項演算子やif文があります。それぞれ得意な場面があり、&&は「表示するかしないか」だけを切り替えたいシンプルなケースに向いています。逆に、「A を表示するか B を表示するか」のように二つ以上の選択肢がある時は三項演算子のほうが書きやすいです。状況に応じて使い分けることで、読みやすく整ったコードになります。

まとめ

まとめ

Reactにおける条件分岐、特に論理演算子&&を活用した手法について解説してきました。いかがでしたでしょうか。JavaScriptの基本知識を活かしつつ、React独自の「宣言的」なUI構築を支えるこのテクニックは、モダンなウェブフロントエンド開発において欠かせないスキルです。コードを簡潔に保ちつつ、ユーザーの操作に応じて柔軟に画面表示を切り替えることができるため、開発の生産性を大きく向上させてくれます。

ここまでの学習内容を振り返ると、条件分岐の本質は「状態（State）」の管理にあることが分かります。ユーザーがログインしているか、データが読み込み中か、あるいは通知があるかないか。こうした刻一刻と変化するアプリケーションの状態を、Reactは常に監視し、私たちが書いた条件式に基づいて自動的に画面を更新してくれます。初心者のうちは、いつどのタイミングで画面が書き換わるのか不思議に感じることもあるかもしれませんが、今回の&&演算子の挙動をマスターすることで、その仕組みの全貌が見えてきたはずです。

さらにステップアップするためのヒント

基本を学んだあとは、少し応用的なコードにも触れてみましょう。例えば、複数の条件を組み合わせたり、三項演算子と組み合わせてより複雑な表示制御を行うことができます。以下のサンプルコードは、ログイン状態に応じて表示するメッセージを切り替え、かつ、未読のメッセージがある場合のみ通知バッジを表示するような実戦的な例です。

import React, { useState } from "react";

function UserDashboard() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [unreadMessages, setUnreadMessages] = useState(5);

  const toggleLogin = () => setIsLoggedIn(!isLoggedIn);

  return (
    <div style={{ padding: "20px", border: "1px solid #ccc", borderRadius: "8px" }}>
      <h2>ユーザーダッシュボード</h2>
      <button onClick={toggleLogin} className="btn btn-primary mb-3">
        {isLoggedIn ? "ログアウト" : "ログイン"}
      </button>

      {/* ログイン時のみ表示されるエリア */}
      {isLoggedIn && (
        <div className="alert alert-success">
          <p>ようこそ、マイページへ！</p>
          {/* 未読メッセージがある場合のみバッジを表示 */}
          {unreadMessages > 0 && (
            <span className="badge bg-danger">
              未読メッセージが {unreadMessages} 件あります。
            </span>
          )}
        </div>
      )}

      {/* 非ログイン時のみ表示されるエリア */}
      {!isLoggedIn && (
        <div className="alert alert-warning">
          <p>ログインしてすべての機能を利用してください。</p>
        </div>
      )}
    </div>
  );
}

export default UserDashboard;

このコードでは、isLoggedInがtrueのときにのみ内部のコンテンツを表示し、さらにその中でunreadMessages > 0という二重の条件分岐を行っています。このように、Reactのコンポーネント内ではHTML（JSX）の中にJavaScriptの論理を直接埋め込むことができるため、非常に直感的でメンテナンス性の高いコードが書けるようになります。

また、記事の中で触れた「falsyな値」への注意も重要です。JavaScriptには0、""（空文字）、null、undefined、NaNといった、論理値として評価するとfalseになる値が存在します。これらを条件式に直接使うと、意図せず「0」という数字が画面に表示されてしまったり、意図した表示が出なかったりすることがあります。そうした場合は、unreadMessages > 0のように比較演算子を使って明示的にboolean型（true/false）へ変換してあげることが、バグを防ぐコツです。

Reactの学習は、一歩ずつ確実に進めていくことが大切です。まずはこの&&を使ったシンプルな条件分岐を使い倒して、自分の思い通りに画面を操れる楽しさを体感してください。それが次の学習ステップである「三項演算子」や「より高度なHooks（フック）」への強力なモチベーションに繋がります。