Reactで条件レンダリング

AngularJSのng-ifディレクティブは、条件に基づいてHTML要素の表示・非表示を切り替える機能を提供します。React.jsでは、条件付きレンダリングを実現するためにいくつかの手法が利用できます。

主な手法

1. 条件演算子（Ternary Operator）
   

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

2. 論理演算子 &&
   

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

3. if...else ステートメント（JSX内では直接使用できないため、関数内で条件分岐を行い、その結果をJSXに返す）
   

   function renderContent() {
       if (isLoggedIn) {
           return <p>ログイン済みです。</p>;
       } else {
           return <p>ログインしてください。</p>;
       }
   }
   
   return (
       <div>
           {renderContent()}
       </div>
   );
   

選択のポイント

• 複雑な条件や複数の要素の表示・非表示
  if...else ステートメントやカスタムフック（React Hooks）が有効です。
• シンプルな条件
  条件演算子や論理演算子が適しています。

注意

• React.jsでは、直接HTMLに条件ロジックを埋め込むことはできません。JSXの構文を使って、条件に基づいて要素を動的に生成する必要があります。

const isLoggedIn = true;

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

解説

• isLoggedIn が false の場合、ログインしてください と表示されます。

論理演算子 &&

const isLoggedIn = true;

return (
  <div>
    {isLoggedIn && <p>ログイン済みです。</p>}
  </div>
);

• isLoggedIn が false の場合、何も表示されません。

if...else ステートメント（関数内で条件分岐）

function renderContent() {
  if (isLoggedIn) {
    return <p>ログイン済みです。</p>;
  } else {
    return <p>ログインしてください。</p>;
  }
}

return (
  <div>
    {renderContent()}
  </div>
);

• renderContent 関数内で条件分岐を行い、その結果を JSX に返します。

複雑な条件や複数の要素の表示・非表示を管理する場合、カスタムフックを利用することでコードの再利用性と可読性を向上させることができます。

import { useState, useEffect } from 'react';

function useConditionalRendering(condition) {
  const [shouldRender, setShouldRender] = useState(condition);

  useEffect(() => {
    setShouldRender(condition);
  }, [condition]);

  return shouldRender;
}

function MyComponent() {
  const isLoggedIn = true;
  const shouldRenderContent = useConditionalRendering(isLoggedIn);

  return (
    <div>
      {shouldRenderContent && <p>ログイン済みです。</p>}
    </div>
  );
}

Portals

特定の要素をDOMの別の場所にレンダリングしたい場合、Portalsを使用できます。

import { createPortal } from 'react-dom';

function MyComponent() {
  const isModalOpen = true;

  return (
    <div>
      {isModalOpen && createPortal(
        <div className="modal">
          <p>モーダルコンテンツ</p>
        </div>,
        document.getElementById('modal-root')
      )}
    </div>
  );
}

• Portals
  特定の要素をDOMの別の場所にレンダリングしたい場合に有効です。
• カスタムフック
  複雑な条件や複数の要素の表示・非表示を管理する場合に有効です。