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

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

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

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

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. 三項演算子で非表示を切り替える方法

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. 関数内での条件分岐で非表示を管理する例

もう少し複雑な処理をしたい場合、コンポーネント内で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を使う場合との違い

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