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

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

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

Reactでは、特定の状態や値によって画面に表示する内容を切り替えることができます。プログラミング未経験の人は、難しく感じるかもしれませんが、Reactの条件分岐は基本的に「表示したいときだけそのコンポーネントをreturnする」仕組みです。つまり、HTMLのようにスタイルで隠すのではなく、最初から存在させないという考え方になります。Reactの条件分岐には、論理演算子を使った方法、三項演算子を使う方法、関数内でif文を使う方法などがあり、今回のテーマのような非表示処理にも応用できます。

2. コンポーネントを条件付きで非表示にする基本

2. コンポーネントを条件付きで非表示にする基本

Reactでコンポーネントを隠す最もシンプルな方法は、「falseを返すとその部分が表示されない」という仕組みを利用することです。例えば、操作ボタンを押したときだけ表示されるメッセージなどがその典型例です。HTMLのようにdisplay:noneを使う方法もありますが、Reactでは不要なコンポーネントを最初からDOMに追加しない書き方が一般的です。DOMとは、ブラウザが実際に表示するための要素の構造のことで、これが少ないほど高速で軽く動作します。そのため、初心者の方でもReactでは「条件が合わないときは出さない」という考え方に慣れていくと便利です。

3. 条件付きでコンポーネントを非表示にするサンプル

3. 条件付きでコンポーネントを非表示にするサンプル

次の例では、ボタンを押すと表示されていたメッセージが消える動きを作っています。このようにReactでは条件式を書くだけで、画面に表示されるかどうかを自然に切り替えることができます。実際の動きを確認しながら、どの部分が非表示をコントロールしているのか見てみましょう。

import React, { useState } from "react";

function App() {
  const [visible, setVisible] = useState(true);

  return (
    <div>
      {visible && <p>このメッセージは表示切替できます</p>}

      <button onClick={() => setVisible(false)}>
        非表示にする
      </button>
    </div>
  );
}

export default App;

4. 三項演算子で非表示を切り替える方法

4. 三項演算子で非表示を切り替える方法

Reactでは、if文以外に三項演算子を使って表示内容を切り替えることができます。三項演算子とは、「条件 ? A : B」という書き方で、条件がtrueならA、falseならBを返します。プログラミング経験がない人でも、慣れてしまえば短いコードでわかりやすく書ける方法です。この方法を使うと、表示するパターンが複数あるときにも対応しやすくなります。

import React, { useState } from "react";

function App() {
  const [show, setShow] = useState(true);

  return (
    <div>
      {show ? <p>表示中です</p> : null}

      <button onClick={() => setShow(!show)}>
        表示切替
      </button>
    </div>
  );
}

export default App;

5. 関数内での条件分岐で非表示を管理する例

5. 関数内での条件分岐で非表示を管理する例

もう少し複雑な処理をしたい場合、コンポーネント内でif文を使って表示する内容を切り替える方法もあります。例えば、ユーザーが入力した値によって特定のコンポーネントだけを表示する場合などはif文が役立ちます。初心者の方でも、普段の会話の「もし〜なら〜する」という感覚で書けるので自然な書き方になります。ReactのコンポーネントはJavaScriptの関数なので、if文を使ってreturnする内容を変えられるというわけです。

import React, { useState } from "react";

function App() {
  const [flag, setFlag] = useState(false);

  let message = null;
  if (flag) {
    message = <div>特別メッセージが表示されます</div>;
  }

  return (
    <div>
      {message}

      <button onClick={() => setFlag(!flag)}>
        切り替える
      </button>
    </div>
  );
}

export default App;

6. display:noneを使う場合との違い

6. display:noneを使う場合との違い

HTMLやCSSに慣れている人は、非表示と言えば「display:none」を思い浮かべることが多いと思います。しかしReactではコンポーネントを表示しないときは「最初から存在させない」方法が推奨されます。display:noneは画面には出ませんが、DOM上には存在し続けます。一方Reactの条件分岐でfalseを返す方法であれば、DOMに無駄な要素が残らないため、動作が軽くなり管理も簡単になります。初心者の方でも、Reactでは見せないものはDOMに置かないという考えに慣れておくと、今後の学習がスムーズになります。

まとめ

まとめ

今回はReactにおける条件分岐の基本から応用までを一通り整理しました。Reactでは見た目の制御をスタイルで行うのではなく、表示するかしないかそのものをJavaScriptの条件で判断するという考え方が重要です。これにより不要な要素を最初から描画しない設計が可能になり、結果として画面の表示速度やアプリ全体のパフォーマンス向上にもつながります。特に初心者の方は、まずは論理演算子を使ったシンプルな書き方に慣れることで、Reactの条件分岐の仕組みを直感的に理解できるようになります。

また、三項演算子を使うことで表示内容を柔軟に切り替えることができ、コードの記述量を減らしつつ読みやすさを保つことができます。さらに複雑な条件が必要な場合には、コンポーネント内でif文を活用することで、より細かい制御が可能になります。ReactのコンポーネントはJavaScriptの関数として動作するため、通常のプログラミングと同じように条件分岐を組み込める点が特徴です。

display noneとの違いについても理解しておくことが重要です。従来のHTMLやCSSでは要素を隠す方法としてdisplay noneがよく使われますが、この方法では要素自体はDOMに残り続けます。一方でReactの条件分岐を利用すれば、そもそも要素を生成しないため、無駄な処理を減らすことができます。この違いを理解することで、より効率的なReact開発が可能になります。

実務においては、ログイン状態による表示切替や、入力内容によるメッセージ表示、ボタン操作による画面更新など、さまざまな場面で条件分岐が活用されます。Reactの条件分岐をしっかり理解しておくことで、ユーザーにとって使いやすいインターフェースを構築できるようになります。特にuseStateと組み合わせることで、状態に応じたリアルタイムな画面更新が実現できる点は、Reactの大きな強みと言えるでしょう。

import React, { useState } from "react";

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

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

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

export default App;

このように状態と条件分岐を組み合わせることで、画面の表示内容を動的に変えることができます。Reactの条件分岐は難しく見えるかもしれませんが、基本はとてもシンプルです。表示したいかどうかを条件で判断するという考え方を身につけることで、より自然にコードを書けるようになります。初心者の方はまずシンプルな例から試し、徐々に複雑な条件へとステップアップしていくのがおすすめです。