フロントエンドカンファレンス名古屋 2026
セッション（30分）
SPAにしないReact移行：Shadow DOMでCSS地獄を隔離した実装パターン
murasuke
tkyk20928788
10年以上の運用で15,000行に膨れ上がった「CSS地獄」。
"!important" が飛び交うレガシー環境で、既存システムを止めずに「Vite + React + Tailwind」の開発体験を手に入れることは可能でしょうか？
本セッションでは、フルリプレースや完全SPA化ではなく「画面のコンテンツ領域だけReactを後付けする」段階移行の事例を紹介します。
最大の壁となるレガシーCSSの侵入防止は、iframeではなく「Shadow DOM」を採用して解決。
Reactを「Shadow DOM」でラップする実装パターンを中心に、実運用で遭遇した落とし穴と対策も共有します。
「レガシー環境を捨てられないが、開発体験は諦めたくない」というエンジニアへ、新旧UI共存の現実解をお届けします。