【入門編】 React PortalsによるDOM階層の分離 – React実践ガイド

こんにちは！Reactの世界へようこそ。
フロントエンドの荒波を渡り歩いてきた身として、今日はお節介な先輩のように、「React Portals（ポータル）」という魔法の道具についてお話ししようと思います。

Reactを触り始めると、誰もが一度は「あれ、なんでこんなところに？」という壁にぶつかります。特にモーダルウィンドウやツールチップを作ろうとしたとき、CSSの「overflow: hidden」や「z-index」の地獄にハマったことはありませんか？

今日はその悩みを、たった一つの魔法の呪文で解決しましょう。

—

Reactのコンポーネントは、「親子関係（ツリー構造）」で構成されていますよね。親の中に子がいて、その中にさらに孫がいる。これはとても整然としていて美しいのですが、実際のブラウザの描画となると、時々「余計なお世話」なことが起きます。

例えば、「画面の中央に浮かぶモーダルウィンドウ」を想像してください。

通常、モーダルはアプリの一番上の階層（``の直下など）に置きたいはずです。でも、Reactのコード上では、モーダルを呼び出しているのは「小さなボタンコンポーネントの中」だったりしますよね。

もし、そのボタンが `overflow: hidden` が設定された狭い箱（親要素）の中に入っていたらどうなるでしょう？
そう、モーダルが表示された瞬間、親の箱の境界線でバサッと切り取られてしまうんです。まるで、大きな荷物を小さな郵便受けに無理やり詰め込もうとしているようなものです。

ここで登場するのが `createPortal` です。
これは、「React上の親子関係はそのままに、DOM（画面上の実際の表示場所）だけを別の場所に切り離す」という、まさにどこでもドアのような機能です。

デパートの「迷子センター」を想像してみてください。
迷子センターは、お店の売場（親コンポーネント）の中に存在しているわけではありませんよね？お店とは別の場所にあって、どの売場で迷子になっても、案内図を通じて「迷子センター」に誘導されます。

`createPortal` は、コンポーネントを「いまいる場所（ボタンの中）」から「指定した場所（bodyの直下など）」へ、ひょいっとワープさせてくれるんです。

まずは、この魔法を使うための準備です。HTML側に、ポータルを受け止めるための「受け皿（コンテナ）」を用意しておきましょう。

そして、React側での実装はこんな感じです。

import React from ‘react’;
import ReactDOM from ‘react-dom’;

const Modal = ({ children, onClose }) => {
// 1. portal-rootというIDを持つ要素を探す
const portalRoot = document.getElementById(‘portal-root’);

// 2. createPortalを使って、中身を別の場所へ転送する
// 第一引数：表示したいもの
// 第二引数：どこに表示したいか
return ReactDOM.createPortal(

{children}

,
portalRoot // ここにワープ！
);
};

export default Modal;

CSS地獄からの解放: モーダルが `body` の直下に配置されるので、親要素の `overflow: hidden` や `z-index` に振り回されることがなくなります。
イベントは親へ伝わる: これが一番の驚きポイントなのですが、Portalで移動しても、React上の論理的な親子関係は維持されます。つまり、モーダル内でクリックしたイベントは、ちゃんとモーダルを呼んだ親コンポーネントに伝わります。これはReactの設計の美しさですね。

最初は「DOMを直接いじるなんて、Reactの流儀に反するのでは？」と不安になるかもしれません。でも、安心してください。`createPortal` はReactの公式が用意してくれた、非常に安全で強力なツールです。

「モーダルがうまく表示されない」「ツールチップが隠れてしまう」という悩みは、あなたがReactを深く理解しようとしている証拠です。そんなときは、この「どこでもドア」を思い出してください。

最初は難しく感じるかもしれませんが、一度使ってみれば「これがない世界には戻れない！」と思うはずです。まずは小さなモーダルから、ポータルを使って外の世界に飛ばしてみてくださいね。

あなたの開発ライフが、少しでも軽やかで楽しいものになりますように！