2025年8月21日日本語

React Portalの力を解き放ち、アクセシブルで魅力的なモーダルとツールチップを作成し、ユーザー体験とコンポーネント構造を向上させましょう。

React Portal：モーダルとツールチップをマスターしUXを強化する

現代のWeb開発において、直感的で魅力的なユーザーインターフェースを作成することは最も重要です。UI構築のための人気JavaScriptライブラリであるReactは、これを達成するための様々なツールや技術を提供しています。その中でも強力なツールの一つがReact Portalです。このブログ記事では、アクセシブルで視覚的に魅力的なモーダルやツールチップの構築における応用を中心に、React Portalの世界を掘り下げていきます。

React Portalとは？

React Portalは、コンポーネントの子要素を、親コンポーネントのDOM階層の外に存在するDOMノードにレンダリングする方法を提供します。簡単に言えば、標準のReactコンポーネントツリーから抜け出して、HTML構造の別の部分に直接要素を挿入することができます。これは、スタッキングコンテキストを制御したり、親コンテナの境界外に要素を配置したりする必要がある場合に特に便利です。

従来、ReactコンポーネントはDOM内で親コンポーネントの子としてレンダリングされます。これは、他のコンテンツの上に表示させたり、ビューポートに対して配置したりする必要があるモーダルやツールチップのような要素を扱う際に、スタイリングやレイアウト上の課題を引き起こすことがあります。React Portalは、これらの要素をDOMツリーの別の部分に直接レンダリングすることで、これらの制約を回避する解決策を提供します。

なぜReact Portalを使用するのか？

いくつかの重要な利点により、React PortalはあなたのReact開発ツールの中で価値あるものになります：

スタイリングとレイアウトの改善： Portalを使用すると、親コンポーネントのコンテナの外に要素を配置できるため、overflow: hidden、z-indexの制限、または複雑なレイアウト制約によって引き起こされるスタイリングの問題を克服できます。親コンテナにoverflow: hiddenが設定されていても、画面全体を覆う必要があるモーダルを想像してみてください。Portalを使えば、モーダルを直接bodyにレンダリングして、この制限を回避できます。
アクセシビリティの向上： Portalは、特にモーダルを扱う際にアクセシビリティにとって非常に重要です。モーダルのコンテンツを直接bodyにレンダリングすることで、フォーカストラップの管理が容易になり、スクリーンリーダーやキーボードナビゲーションを使用するユーザーがモーダルが開いている間、その中に留まることを保証します。これは、シームレスでアクセシブルなユーザー体験を提供するために不可欠です。
よりクリーンなコンポーネント構造： モーダルやツールチップのコンテンツをメインのコンポーネントツリーの外にレンダリングすることで、コンポーネント構造をよりクリーンで管理しやすく保つことができます。この関心の分離により、コードが読みやすく、理解しやすく、保守しやすくなります。
スタッキングコンテキスト問題の回避： CSSのスタッキングコンテキストは管理が非常に難しいことで知られています。Portalは、要素をDOMのルートに直接レンダリングすることでこれらの問題を回避するのに役立ち、ページ上の他の要素に対して常に正しく配置されることを保証します。

React Portalを使用したモーダルの実装

モーダルは、重要な情報を表示したり、ユーザーに入力を促したりするために使用される一般的なUIパターンです。React Portalを使用してモーダルを作成する方法を見ていきましょう。

1. Portalルートの作成

まず、モーダルがレンダリングされるDOMノードを作成する必要があります。これは通常、HTMLファイル（通常はbody内）に特定のIDを持つdiv要素を追加することで行われます：

            <div id="modal-root"></div>

2. モーダルコンポーネントの作成

次に、モーダルを表すReactコンポーネントを作成します。このコンポーネントには、モーダルのコンテンツとロジックが含まれます。

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  const [mounted, setMounted] = useState(false);
  const modalRoot = useRef(document.getElementById('modal-root'));

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  if (!isOpen) return null;

  const modalContent = (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );

  return mounted && modalRoot.current
    ? ReactDOM.createPortal(modalContent, modalRoot.current)
    : null;
};

export default Modal;

解説：

isOpen prop: モーダルが表示されるかどうかを決定します。
onClose prop: モーダルを閉じるための関数です。
children prop: モーダル内に表示されるコンテンツです。
modalRoot ref: モーダルがレンダリングされるDOMノード（#modal-root）を参照します。
useEffect hook: ポータルルートがすぐに利用できない問題を避けるため、コンポーネントがマウントされた後にのみモーダルがレンダリングされるようにします。
ReactDOM.createPortal: これがReact Portalを使用するための鍵です。これは2つの引数を取ります：レンダリングするReact要素（modalContent）と、それがレンダリングされるべきDOMノード（modalRoot.current）です。
オーバーレイのクリック： モーダルを閉じます。モーダル内でのクリックがモーダルを閉じてしまわないように、modal-contentのdivでe.stopPropagation()を使用します。

3. モーダルコンポーネントの使用

これで、アプリケーションでModalコンポーネントを使用できます：

            import React, { useState } from 'react';
import Modal from './Modal';

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>

      <Modal isOpen={isModalOpen} onClose={closeModal}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
      </Modal>
    </div>
  );
};

export default App;

この例は、isOpen propとopenModal、closeModal関数を使用してモーダルの表示/非表示を制御する方法を示しています。<Modal>タグ内のコンテンツがモーダル内にレンダリングされます。

4. モーダルのスタイリング

モーダルを配置し、スタイルを設定するためのCSSを追加します。以下に基本的な例を示します：

            .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure it's on top of other content */
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

CSSの解説：

position: fixed: スクロールに関係なく、モーダルがビューポート全体を覆うようにします。
background-color: rgba(0, 0, 0, 0.5): モーダルの背後に半透明のオーバーレイを作成します。
display: flex, justify-content: center, align-items: center: モーダルを水平・垂直方向の中央に配置します。
z-index: 1000: モーダルがページ上の他のすべての要素の上にレンダリングされるようにします。

5. モーダルのアクセシビリティに関する考慮事項

モーダルを実装する際には、アクセシビリティが非常に重要です。以下にいくつかの重要な考慮事項を示します：

フォーカス管理： モーダルが開くと、フォーカスは自動的にモーダル内の要素（例：最初の入力フィールドや閉じるボタン）に移動する必要があります。モーダルが閉じるときは、フォーカスはモーダルを開くきっかけとなった要素に戻るべきです。これは、ReactのuseRefフックを使用して以前にフォーカスされていた要素を保存することで実現されることが多いです。
キーボードナビゲーション： ユーザーがキーボード（Tabキー）を使用してモーダル内をナビゲートできるようにします。フォーカスはモーダル内にトラップされ、ユーザーが誤ってモーダルからタブで移動してしまうのを防ぎます。react-focus-lockのようなライブラリがこれを支援します。
ARIA属性： ARIA属性を使用して、スクリーンリーダーにモーダルに関する意味的な情報を提供します。例えば、モーダルコンテナにaria-modal="true"を使用し、aria-labelやaria-labelledbyを使用してモーダルに説明的なラベルを提供します。
閉じる仕組み： 閉じるボタン、オーバーレイのクリック、Escapeキーの押下など、モーダルを閉じるための複数の方法を提供します。

フォーカス管理の例（useRefを使用）：

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  const [mounted, setMounted] = useState(false);
  const modalRoot = useRef(document.getElementById('modal-root'));
  const firstFocusableElement = useRef(null);
  const previouslyFocusedElement = useRef(null);

  useEffect(() => {
    setMounted(true);
    if (isOpen) {
      previouslyFocusedElement.current = document.activeElement;
      if (firstFocusableElement.current) {
        firstFocusableElement.current.focus();
      }

      const handleKeyDown = (event) => {
        if (event.key === 'Escape') {
          onClose();
        }
      };

      document.addEventListener('keydown', handleKeyDown);

      return () => {
        document.removeEventListener('keydown', handleKeyDown);
        if (previouslyFocusedElement.current) {
          previouslyFocusedElement.current.focus();
        }
      };
    }

    return () => setMounted(false);
  }, [isOpen, onClose]);


  if (!isOpen) return null;

  const modalContent = (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
        <input type="text" ref={firstFocusableElement} /> <!-- First focusable element -->
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );

  return mounted && modalRoot.current
    ? ReactDOM.createPortal(modalContent, modalRoot.current)
    : null;
};

export default Modal;

フォーカス管理コードの解説：

previouslyFocusedElement.current: モーダルが開かれる前にフォーカスがあった要素を保存します。
firstFocusableElement.current: モーダル*内*の最初のフォーカス可能な要素（この例ではテキスト入力）を参照します。
モーダルが開くと（isOpenがtrueの場合）：
- 現在フォーカスされている要素が保存されます。
- フォーカスがfirstFocusableElement.currentに移動します。
- Escapeキーをリッスンし、モーダルを閉じるためのイベントリスナーが追加されます。
モーダルが閉じるとき（クリーンアップ関数）：
- Escapeキーのイベントリスナーが削除されます。
- 以前にフォーカスされていた要素にフォーカスが戻されます。

React Portalを使用したツールチップの実装

ツールチップは、ユーザーが要素にカーソルを合わせたときに表示される小さな情報ポップアップです。React Portalを使用すると、親要素のスタイリングやレイアウトに関係なく、正しく配置されたツールチップを作成できます。

1. Portalルートの作成（まだ作成していない場合）

まだモーダル用のポータルルートを作成していない場合は、HTMLファイル（通常はbody内）に特定のIDを持つdiv要素を追加します：

            <div id="tooltip-root"></div>

2. ツールチップコンポーネントの作成

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Tooltip = ({ text, children, position = 'top' }) => {
  const [isVisible, setIsVisible] = useState(false);
  const [positionStyle, setPositionStyle] = useState({});
  const [mounted, setMounted] = useState(false);

  const tooltipRoot = useRef(document.getElementById('tooltip-root'));
  const tooltipRef = useRef(null);
  const triggerRef = useRef(null);

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  const handleMouseEnter = () => {
    setIsVisible(true);
    updatePosition();
  };

  const handleMouseLeave = () => {
    setIsVisible(false);
  };

  const updatePosition = () => {
    if (!triggerRef.current || !tooltipRef.current) return;

    const triggerRect = triggerRef.current.getBoundingClientRect();
    const tooltipRect = tooltipRef.current.getBoundingClientRect();

    let top = 0;
    let left = 0;

    switch (position) {
      case 'top':
        top = triggerRect.top - tooltipRect.height - 5; // 5px spacing
        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
        break;
      case 'bottom':
        top = triggerRect.bottom + 5;
        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
        break;
      case 'left':
        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
        left = triggerRect.left - tooltipRect.width - 5;
        break;
      case 'right':
        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
        left = triggerRect.right + 5;
        break;
      default:
        break;
    }

    setPositionStyle({
      top: `${top}px`,
      left: `${left}px`,
    });
  };

  const tooltipContent = isVisible && (
    <div className="tooltip" style={positionStyle} ref={tooltipRef}>
      {text}
    </div>
  );

  return (
    <span
      ref={triggerRef}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {children}
      {mounted && tooltipRoot.current ? ReactDOM.createPortal(tooltipContent, tooltipRoot.current) : null}
    </span>
  );
};

export default Tooltip;

解説：

text prop: ツールチップに表示するテキストです。
children prop: ツールチップをトリガーする要素（ユーザーがカーソルを合わせる要素）です。
position prop: トリガー要素に対するツールチップの位置（'top', 'bottom', 'left', 'right'）です。デフォルトは'top'です。
isVisible state: ツールチップの表示/非表示を制御します。
tooltipRoot ref: ツールチップがレンダリングされるDOMノード（#tooltip-root）を参照します。
tooltipRef ref: ツールチップ要素自体を参照し、その寸法を計算するために使用されます。
triggerRef ref: ツールチップをトリガーする要素（children）を参照します。
handleMouseEnter と handleMouseLeave: トリガー要素にカーソルを合わせたり離したりするためのイベントハンドラです。
updatePosition: position propとトリガーおよびツールチップ要素の寸法に基づいて、ツールチップの正しい位置を計算します。getBoundingClientRect()を使用して、ビューポートに対する要素の位置と寸法を取得します。
ReactDOM.createPortal: ツールチップのコンテンツをtooltipRootにレンダリングします。

3. ツールチップコンポーネントの使用

            import React from 'react';
import Tooltip from './Tooltip';

const App = () => {
  return (
    <div>
      <p>
        Hover over this <Tooltip text="This is a tooltip!\nWith multiple lines."\nposition="bottom">text</Tooltip> to see a tooltip.
      </p>

      <button>
        Hover <Tooltip text="Button tooltip" position="top">here</Tooltip> for tooltip.
      </button>
    </div>
  );
};

export default App;

この例は、Tooltipコンポーネントを使用してテキストやボタンにツールチップを追加する方法を示しています。textとposition propを使用して、ツールチップのテキストと位置をカスタマイズできます。

4. ツールチップのスタイリング

ツールチップを配置し、スタイルを設定するためのCSSを追加します。以下に基本的な例を示します：

            .tooltip {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8); /* Dark background */
  color: white;
  padding: 5px;
  border-radius: 3px;
  font-size: 12px;
  z-index: 1000; /* Ensure it's on top of other content */
  white-space: pre-line; /* Respect line breaks in the text prop */
}