JSXの条件分岐

JSXとは

JSX(JavaScript XML)は、JavaScriptの構文拡張で、JavaScript(TypeScript)ファイル内にHTMLのようなコードを記述できるようにするものです。
Meta(旧Facebook)によって開発されました。

JSXはHTMLに似た構文を持ちつつも、JavaScript(TypeScript)の処理を組み合わせられるのが特徴です。
例えば、{} の中に変数や関数を埋め込み、条件分岐やループ処理を行えます。

JSXの条件分岐方法

Reactコンポーネントを作成するとき、「特定の条件を満たしたときだけ表示する」「条件によって表示内容を切り替える」といった処理はよくあります。
ここでは代表的な方法を3つ紹介します。

1. && を使う方法(シンプルな条件付き表示)

最もシンプルな方法で、「条件が真のときだけ表示したい」場合に使います。

import React from "react";
import ReactDOM from "react-dom/client";

const App = () => {
  const isFlag = true;
  return (
    <>
      <div>{isFlag && "hello world"}</div>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById("container"));
root.render(<App />);

ポイント

• isFlag が true のときだけ "hello world" が表示される
• false のときは null が返り、DOMには何も出力されない
• 注意点: 0 && 'hello' のように数値を条件にすると、0 がそのまま表示されてしまう

2. 三項演算子を使う方法(条件に応じて切り替え)

表示内容を「AとB」で切り替える場合に便利です。

import React from "react";
import ReactDOM from "react-dom/client";

const App = () => {
  const isFlag = false;
  return (
    <>
      <div>{isFlag ? "hello world" : "Not hello world"}</div>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById("container"));
root.render(<App />);

ポイント

• isFlag が true なら "hello world"、false なら "Not hello world" を表示
• 条件によって 必ず何かを出したいとき に向いている
• ネストが深くなると可読性が落ちるので注意(複雑な条件は関数に切り出すのがオススメ)

3. 即時関数を使う方法(複雑な条件分岐に対応)

条件が複雑で、if 文を使いたい場合に有効です。

import React from "react";
import ReactDOM from "react-dom/client";

const App = () => {
  const isFlag = true;
  return (
    <>
      <div>
        {(() => {
          if (isFlag) {
            return "hello world";
          } else {
            return "not hello world";
          }
        })()}
      </div>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById("container"));
root.render(<App />);

ポイント

• JSX内で直接 if 文を使えないため、即時関数でラップする
• 複雑な条件分岐や複数のreturnが必要な場合に便利
• 一方でコード量が増えて読みにくくなるので、必要に応じて関数に切り出すのがよい

まとめ

• 簡単に有無だけを制御したいなら &&
• 表示を切り替えたいなら 三項演算子 ? :
• 複雑な条件分岐は 即時関数や外部関数に切り出す

Reactの条件分岐は柔軟に書けますが、読みやすさを優先することが大切です。
小規模な条件ならJSX内で済ませ、複雑なものは関数に切り出してメンテナンス性を高めるのが良いです。