ReactJSでJSX内に条件分岐を実装：三項演算子、論理演算子、if-else文を徹底比較

2024-05-21

ReactJSにおけるJSX内でのif-else文の使用：詳細解説

三項演算子

最も簡潔でよく使われる方法です。条件式を ? 演算子で記述し、それに続く : で真偽の値に対応する要素を指定します。

const message = isLoggedIn ? 'ログイン済み' : '未ログイン';
return <div>{message}</div>;

論理演算子 &&

条件式を && 演算子で記述し、その後にレンダリングしたい要素を直接記述します。条件が真の場合のみ要素がレンダリングされます。

const isLoggedIn = true;
return <div>{isLoggedIn && <p>ログイン済み</p>}</div>;

if 文

従来的な if 文を使用することもできますが、JSX内では中括弧 {} で囲む必要があります。

const isLoggedIn = true;
return (
  <div>
    {if (isLoggedIn) {
      <p>ログイン済み</p>
    } else {
      <p>未ログイン</p>
    }}
  </div>
);

それぞれの利点と注意点

三項演算子:
- 利点: 簡潔で読みやすい
- 注意点: 複雑な条件分岐には不向き
論理演算子 &&:
- 利点: 簡潔で、条件式が真の場合のみ要素をレンダリングできる
- 注意点: 複数の要素をレンダリングしたい場合は冗長になる
if 文:
- 注意点: 冗長で、コードが読みづらくなる可能性がある

その他、覚えておくべきポイント

JSX内では、変数や関数を直接記述できます。
条件分岐処理は、コンポーネント内で複数回使用できます。
適切な方法を選択することで、コードをわかりやすく、保守しやすいものにすることができます。

サンプルコード：if-else文を用いたJSX内条件分岐

例1：ユーザーのログイン状態に応じてメッセージを表示

import React from 'react';

const App = () => {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? (
        <p>ログイン済みです</p>
      ) : (
        <p>ログインしてください</p>
      )}
    </div>
  );
};

export default App;

例2：ボタンのクリックに応じてCSSスタイルを切り替える

import React, { useState } from 'react';

const App = () => {
  const [isActive, setIsActive] = useState(false);

  const toggleActive = () => {
    setIsActive(!isActive);
  };

  return (
    <div>
      <button onClick={toggleActive}>ボタン</button>
      <p className={isActive ? 'active' : 'inactive'}>ボタンをクリックしました</p>
    </div>
  );
};

export default App;

例3：コンポーネントのレンダリング条件を指定

import React, { useState } from 'react';

const ConditionalComponent = ({ isVisible }) => {
  if (!isVisible) {
    return null;
  }

  return <p>条件を満たしたのでレンダリングされました</p>;
};

const App = () => {
  const [isVisible, setIsVisible] = useState(false);

  const toggleVisibility = () => {
    setIsVisible(!isVisible);
  };

  return (
    <div>
      <button onClick={toggleVisibility}>表示/非表示</button>
      <ConditionalComponent isVisible={isVisible} />
    </div>
  );
};

export default App;

これらのサンプルコードは、if-else文を用いたJSX内条件分岐の基本的な使い方を示しています。

具体的な状況に合わせて、適切な方法を選択してコードを作成してください。

ReactJSにおけるJSX内での条件分岐処理：その他の方法

フショートサーキット評価

論理演算子 && を利用し、条件式が偽の場合に後続の式を評価しないという仕組みを利用する方法です。

const isLoggedIn = true;
const isAdmin = false;
return <div>{isLoggedIn && isAdmin && <p>ログイン済み管理者です</p>}</div>;

Ternary Operator with Nested Components

三項演算子とネストしたコンポーネントを組み合わせる方法です。条件に応じて異なるコンポーネントをレンダリングできます。

const Message = ({ isLoggedIn }) => {
  if (isLoggedIn) {
    return <p>ログイン済み</p>;
  } else {
    return <p>未ログイン</p>;
  }
};

const App = () => {
  const isLoggedIn = true;
  return <Message isLoggedIn={isLoggedIn} />;
};

Custom Component for Conditional Rendering

条件分岐処理を専用のコンポーネントにカプセル化する方法です。再利用性とコードの可読性を向上させることができます。

const ConditionalRender = ({ condition, children }) => {
  if (condition) {
    return children;
  } else {
    return null;
  }
};

const App = () => {
  const isLoggedIn = true;
  return (
    <div>
      <ConditionalRender condition={isLoggedIn}>
        <p>ログイン済みです</p>
      </ConditionalRender>
    </div>
  );
};

React Switch Statement

switch 文を使用して、複数の条件を効率的に処理する方法です。

const UserStatus = ({ isLoggedIn, isAdmin }) => {
  switch (true) {
    case isLoggedIn && isAdmin:
      return <p>ログイン済み管理者です</p>;
    case isLoggedIn:
      return <p>ログイン済み</p>;
    default:
      return <p>未ログイン</p>;
  }
};

const App = () => {
  const isLoggedIn = true;
  const isAdmin = false;
  return <UserStatus isLoggedIn={isLoggedIn} isAdmin={isAdmin} />;
};

フショートサーキット評価:
- 利点: 簡潔で、不要な処理をスキップできる
Ternary Operator with Nested Components:
Custom Component for Conditional Rendering:
- 利点: 再利用性とコードの可読性を向上できる
- 注意点: コンポーネントが増える
React Switch Statement:
- 利点: 複数の条件を効率的に処理できる
- 注意点: case 文の記述が増える