このHTML、どのコンポーネント？ by yuta-ike

普段の開発で、「このUIってどのコンポーネントで定義されているんだっけ？」と思ったことはありませんか？

フロントエンドではビルドやminifyによってコードが大きく変換されるため、ブラウザ上に表示されている要素が、どのファイルのどのコンポーネントに由来するものかを知ることは簡単ではありません。
このセッションでは、これを解決する2つの方法をピックアップし、その仕組みについて解説します。

1つはreact-grab等で利用されている、React FiberにアクセスしてFiber Nodeを特定する方法です。ReactのFiberTreeは通常は公開されていないのですが、Developer Tools向けのAPIをフックして実装されています。

もう1つは、Tanstack Devtools等で利用されている、ビルド時にデバッグ情報をJSX Propsに埋め込む方法です。Vite pluginの形式で配布されており、JSXを変換しデバッグ情報を埋め込みます。こちらはフレームワークに依存しないアプローチです。

どちらも最近話題になったライブラリですが、その内部実装について取り扱います。