【React】JSXでif文を利用して要素を出し分ける（条件付きレンダー）方法

JavaScript

条件によってレンダーするコンポーネントを出し分ける際は条件付きレンダーを利用します。
今回は条件付きレンダーの記述方法について紹介します。

条件付きレンダーの記述方法

条件付きレンダーの記述方法について紹介します。

条件分岐を実装したメソッドを定義し、JSX内でメソッドを呼び出す

条件付きレンダーをコンポーネントのメソッドで定義し、JSX内でメソッドを呼び出す方法です。
JSXからメソッドを呼び出す、つまりJSX内に式を埋め込む場合は中括弧（{}）で式を囲む必要があります。1

以下のコードはisMorningがtrueなら<GoodMorning />、falseなら<GoodEvening />をレンダーする例です。

import React from "react";
import GoodEvening from "./GoodEvening";
import GoodMorning from "./GoodMorning";
import "./Hello.css";

export const Hello: React.FC = () => {
  const isMorning = true;

  const greeting = (isMorning: boolean) => {
    if (isMorning) {
      return <GoodMorning />;
    } else {
      return <GoodEvening />;
    }
  };

  return (
    <div className="Hello">
      <h1>Welcome</h1>
      {greeting(isMorning)}
    </div>
  );
};

即時関数を利用してJSX内に条件分岐を記述する

即時関数を利用してメソッドの定義と呼び出しをJSX内で完結させる方法です。
即時関数はJSXに直接ロジックを記述できるというメリットがあります。
ただし、複雑なロジックを即時関数を利用してJSXに埋め込んでしまうとJSXのコードの見通しが悪くなるので注意が必要です。

そもそも即時関数自体がパッと見で分かりにくいので、多用はしないほうが無難です。

以下のコードはさきほど紹介した{greeting(isMorning)}を即時関数で表現したものです。

import React from "react";
import GoodEvening from "./GoodEvening";
import GoodMorning from "./GoodMorning";
import './Hello.css';

export const Hello: React.FC = () => {
  const isMorning = true;
  return (
    <div className="Hello">
      <h1>Welcome</h1>

      {/* 一番外側の中括弧はJSXに式を埋め込むためのもの */}
      {/* 一番外側の中括弧で囲まれた部分が即時関数 */}
      {(() => {
        if (isMorning) {
          return <GoodMorning />;
        } else {
          return <GoodEvening />;
        }
      })()}

    </div>
  );
};

即時関数の詳細解説は即時関数をアロー関数やfunctionを利用して色々なパターンで書いてみるで紹介しています。

条件付きレンダー用のコンポーネントを作成し、JSX内でコンポーネントを呼び出す

条件付きレンダーを別のコンポーネントで実装する方法です。条件付きレンダー用のコンポーネントは受け取ったPropsの値に応じて返す結果を変えます。

以下のコードは『isMorningがtrueなら<GoodMorning />、falseなら<GoodEvening />をレンダーする』というロジックをGreetingというコンポーネントで定義した例です。

Hello.tsx

import React from "react";
import Greeting from "./Greeting";
import "./Hello.css";

export const Hello: React.FC = () => {
  const isMorning = true;

  return (
    <div className="Hello">
      <h1>Welcome</h1>
      <Greeting isMorning={isMorning} />
    </div>
  );
};

Greeting.tsx

import React from "react";
import GoodMorning from "./GoodMorning";
import GoodEvening from "./GoodEvening";

type GreetingProps = {
  isMorning: boolean;
};

const Greeting: React.FC<GreetingProps> = ({ isMorning }) => {
  if (isMorning) {
    return <GoodMorning />;
  } else {
    return <GoodEvening />;
  }
};
export default Greeting;

より短い構文で条件付きレンダーを記述する方法

条件付きレンダーを実装する上で覚えておくと便利な記述方法について紹介します。

三項演算子

三項演算子（condition ? true : false）を利用するとシンプルな形でJSXに式を埋め込めます。

以下のコードはisMorningがtrueなら<GoodMorning />、falseなら<GoodEvening />をレンダーする例です。
三項演算子を利用することで即時関数を使うことなくコンポーネントの出しわけが実現できています。

import React from "react";
import GoodMorning from "./GoodMorning";
import GoodEvening from "./GoodEvening";
import "./Hello.css";

export const Hello: React.FC = () => {
  const isMorning = true;

  return (
    <div className="Hello">
      <h1>Welcome</h1>
      {isMorning ? <GoodMorning /> : <GoodEvening />}
    </div>
  );
};

また、三項演算子は以下のように文字列の出し分けをする場合などでよく活用されます。

import React from "react";
import "./Hello.css";

export const Hello: React.FC = () => {
  const isMorning = true;

  return (
    <div className="Hello">
      <h1>Welcome</h1>
      <div>good {isMorning ? 'morning' : 'evening'}</div>
    </div>
  );
};

&&演算子（論理積演算子、論理結合）

&&演算子は true && expressionならexpression、false && expressionならfalseを返します。

&&演算は条件を満たす場合のみexpressionを返すので、『trueならレンダー、falseならなにも返さない』という条件付きコンポーネントを作成する場合は&&演算子を利用するとよいです。

以下のコードはisMorningがtrueなら<strong>Wake up!!!</strong>を表示する例です。

import React from "react";
import "./Hello.css";

export const Hello: React.FC = () => {
  const isMorning = true;

  return (
    <div className="Hello">
      <h1>Welcome</h1>
      {isMorning && <strong>Wake up!!!</strong>}
      <div>Hollo</div>
    </div>
  );
};

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

参考

  1. React『条件付きレンダー』 ↩
RECOMMEND