Reactを爆速化！仮想DOMを捨てて直接DOM操作へ変換する魔法のコンパイラ「Vidact」

Vidactは、Reactのコードを仮想DOMを使わない純粋なDOM操作にコンパイルすることで、フレームワークのオーバーヘッドを劇的に削減する革新的なツールです。Reactライクな開発体験を維持しつつ、Vanilla JSに近いパフォーマンスを実現したいエンジニアには必見のプロジェクトです。

これってマジなの？

ランディングページにLLMを使うのはやめたほうがいい。どれだけ長く開発していたとしても、ドキュメントやWebサイトがちゃんと人の手で作り込まれているかどうかで、第一印象が決まってしまうことは多いから。もし手抜きだと思われたら、コードの中身すら見てもらえないかもしれないよ。

LLMが書いた文章って、読むたびに余計に混乱するんだよね。どう動くのか？何ができるのか？って。技術を見るときは、それが「何ができないのか」を知りたいんだ。例えばRustでWeb開発はできるけど、もっとシンプルな言語が選べるならRustは使わないしね。

理解が正しければ、SvelteっぽいことをReactの構文でやろうとしている感じかな？

面白いプロジェクトだね。Tanstackと直接統合できるなら使ってみようかなと思うけど、わざわざ独自のルーティングAPIに乗り換えるユーザーなんていないと思うよ。

このプロジェクトの目的がよくわからないな…。JSXを直接DOM操作に静的コンパイルする唯一の方法は、Reactの動的なランタイムの柔軟性とクロージャモデルを殺すか、SolidJSみたいにセマンティクスを壊すかのどちらかしかない。今回の場合は後者で、テンプレートや構文の制約がないせいでコンパイラの負担が開発者に押し付けられているだけだし、さらに状況が悪そう。

「Rawact」という名前にするチャンスを逃したね。

自分にとってReactのコードは見ていて美しくないんだよね。「use state zero」って読んでも意味がわからないし、そもそも「const」で値を宣言しているのになぜ値が変わるのか？（コード省略）コンパイラがどう動いているのかまでは完全に理解していないけど、コンパイル時に依存関係を解決しようとしている（ノードYは変数xに依存している、みたいに）んだと思う。このアプローチは、ランタイムでプロキシを使って依存関係を見つけるVueのアプローチよりは、新しいツリーをレンダリングしてDOMとの差分を適用するReactのアプローチに近い。だから、なぜVueじゃなくてReactをインプットに選んだのかがよくわからない。それに、記憶が正しければVueはHTMLとして実装されたテンプレート（条件分岐やループの属性を含む）を持っているから、Reactの生JSコードより解析しやすいはずだよ。もう一つの問題は、依存関係がコンパイル段階では不明なケースが多いこと。例えば、サーバーから送られてきたリストに基づいて動的に生成されるフォームがあって、無効な値が入力されたらエラーを表示する場合を考えてみて。コンパイラは実行時にどのDOMノードが存在するかを知らないから、依存関係を事前に計算できないよね。変数と「form」DOMノードの依存関係は解決できても、入力データとエラーボックスの可視性まで解決するのは無理だと思う。残念ながらサイトには生成コードの例がないから推測しかできないけど。とにかく、面白いアイデアだと思う。自分もたまにリアクティブフレームワークの設計を紙に書くことがあるから、その難しさは少しわかるつもり。あと、今のリアクティブフレームワークに共通する、コードの書き方を強制される「侵襲性」があまり好きじゃない。例えば、独自のオブジェクトモデル（ノードがたくさんあるTextDocumentクラスとか）があって、それを表示する「View」さえあればいいのに、Reactだとデータをpropsやstateに詰め替えて、ユーザー操作のたびに巨大なイミュータブルオブジェクトを再構築したりしないといけない。Vueもプロキシでラップして変な挙動（元のオブジェクトじゃなくてプロキシをSetに入れるとバグるとか）に悩まされる。それにReactはNodeのインストールやコンパイルが必要で、1ページだけの簡単なプロジェクトには重すぎる。自分が欲しいのは、モデルを渡せば勝手に表示してくれる、アーキテクチャへの適応を強要されないツールなんだ。イミュータブルもプロキシも、巨大なswitch文（Reduxとかいうやつね）もいらない。80年代の古典的なMVCが欲しいだけで、現代の怪しいアイデアは不要。モデル(M)とコントローラ(C)はあるんだから、ビュー(V)さえあればいいんだ。

JSXを使いたいけどReactの複雑さは避けたいっていうのが目的なら、これを見てみるといいかも。https://github.com/wisercoder/uibuilder サンプルアプリ：https://github.com/wisercoder/eureka/tree/master/webapp/Clie...

Reactを直接DOM操作にコンパイルするのは、オーバーヘッドを減らすためにエコシステムがまさに進むべき方向だね。Svelteの哲学に近いものを感じる。このプロジェクトは絶対追ってみるよ！