Reactの JSX内部でif文やSwitch文, 三項演算子などの条件分岐をする方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、Reactの JSX内部で if文やSwitch文, 三項演算子などの条件分岐をする方法について解説していきます。

1 Reactの JSX内部で、if文やSwitch文, 三項演算子などの条件分岐をする方法
2 Twitterやってます！Follow Me！
3 React関連の書籍
4 参考・引用
5 プログラミング学習・エンジニア転職関連の情報
6 最近の投稿

Reactの JSX内部で、if文やSwitch文, 三項演算子などの条件分岐をする方法

論理積演算子「&&」を使って、JSX内部で条件分岐をする方法

条件がtrueの時のみに処理や表示を行いたい場合には、JavaScriptの論理演算子「&&」を利用する方法があります。

特徴としては、次のとおり。

条件 && trueの時の処理の形で表現する。
- JavaScriptの仕様で、true && expression(表現) の時は必ずexpressionと評価するため。
falseの場合の処理を記述することができない。
他のどの方法よりも、表現が短くすむ。

const Sample = () => {
  const isLogined = true;
  return(
    <div>
      { isLogined && <p>ログイン済みです。</p> }
    </div>
  );
};

export default Sample;

三項演算子を使って、JSX内部で条件分岐をする方法

三項演算子を使って、JSX内部で条件分岐をする方法もシンプルなやり方なので、よく使用します。

import { CSSProperties } from 'react';

/** Propsの型定義 */
interface PropsType {
  style?: CSSProperties;
  color?: string;
}

/**
 * NOTE: ArrowNext
 *  => 右向きの・進む矢印
 */
const ArrowNext = (props: PropsType) => {
  return (
    <svg
      width='13'
      height='20'
      viewBox='0 0 13 20'
      fill='none'
      xmlns='http://www.w3.org/2000/svg'
      style={props.style ? props.style : undefined}
    >
      <path
        d='M2.025 20L0.25 18.225L8.475 10L0.25 1.775L2.025 0L12.025 10L2.025 20Z'
        fill={props.color ? props.color : '#0B192D'}
      />
    </svg>
  );
};

export default ArrowNext;

即時関数を使って、JSX内部で条件分岐をする方法

即時関数を使って、JSX内部で条件分岐をする方法も強力な手段で、if文をJSX内部で使用したい場合によく使用します。

import ProEmblemType1 from "@/components/services/robotama/shared/svg/ProEmblemType1";
import ProEmblemType2 from "@/components/services/robotama/shared/svg/ProEmblemType2";
/** Propsの型定義 */
interface PropsType {
  target: { id: number; value: string; isPro: boolean };
  rank: number;
}

const RobotamaProEmblem = (props: PropsType) => {
  const { target, rank } = props;
  return (
    <div>
      {/* 即時関数を使って、JSX内部で条件分岐をする */}
      {(() => {
        if (target.isPro && rank === 1) {
          return (
            <div>
              <ProEmblemType1 />
            </div>
          );
        } else if (target.isPro) {
          return (
            <div>
              <ProEmblemType2 />
            </div>
          );
        }
      })()}
    </div>
  );
};

export default RobotamaProEmblem;

即時関数に関しては、以前こちらの記事にも掲載しました。

ページ(HTML)の表示・読み込み(load)時に実行されるJavaScriptのイベントまとめ

関数Componentを別に用意してCallすることで、JSX内部で条件分岐をする方法

Switch文や複雑な条件文などを複数使いたい時などは、関数Componentを別に用意して、条件分岐させる方法もおすすめです。

SampleCodeを見ていただくと、MemberList Componentの中に、CurrentListDisplayという関数Componentがあります。

CurrentListDisplayは、displayTypeという引数のnumberによって、3つの表示タイプのどれかのComponentを返却するような関数です。

このように複数の条件が絡む場合は、先述の即時関数を使用するか、

このような条件分岐用の関数Componentを別で用意して、それを JSX内で、Callする方法が最適です。

import ListDisplayCard from "../../shared/card/ListDisplayCard";
import CustomSearchDisplayChangeMenu from "./menu/CustomSearchDisplayChangeMenu";
import ModuleDisplayCard from "@/components/services/robotama/shared/card/ModuleDisplayCard";
import PostPhotoDisplayCard from "@/components/services/robotama/shared/card/PostPhotoDisplayCard";
import { useState } from "react";
import { MemberType } from '~/models/services/robotama/Member';

/** Propsの型定義 */
interface PropsType {
  memberList: MemberType[];
}

/**
 * NOTE: Member一覧・Component
 */
const MemberList = (props: PropsType) => {
  const memberList = props.memberList;
  // console.log('memberList', memberList);

  /** 現在の表示形式の種類 => 初期値: Default表示タイプ */
  const [currentListDisplayType, setListDisplayType] = useState<number>(2);

  /**
   * NOTE: CurrentListDisplay
   * => 選択されている メンバー・リストの表示形式を返す Switch_文
   */
  const CurrentListDisplay = (displayType: number, memberList: MemberType[]) => {
    switch (displayType) {
      case 1: // 1. 投稿写真付き表示
        return memberList.map((member: MemberType, idx: number) => {
          return <PostPhotoDisplayCard member={member} key={idx} />;
        });
      case 2: // 2. モジュール表示
        return memberList.map((member: MemberType, idx: number) => {
          return <ModuleDisplayCard member={member} key={idx} />;
        });
      case 3: // 3. リスト表示
        return memberList.map((member: MemberType, idx: number) => {
          return <ListDisplayCard member={member} key={idx} />;
        });
      default: // Default表示
        return memberList.map((member: MemberType, idx: number) => {
          return <ModuleDisplayCard member={member} key={idx} />;
        });
    }
  };

  return (
    <div>
      {/* メンバー・一覧 Menu Bar */}
      <div>
        <CustomSearchDisplayChangeMenu
          callBack={setListDisplayType}
          currentDisplayType={currentListDisplayType}
        />
      </div>
      {/* メンバー・一覧 を表示する */}
      <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          gap: "12px",
        }}
      >
        {/* 1. CurrentListDisplay の関数内で、条件分岐(Switch文)をしている */}
        {CurrentListDisplay(currentListDisplayType, memberList)}
      </div>
    </div>
  );
};

export default MemberList;