Reactは悪い意味でも現在のjQueryだし、それを受け止めないと前に進めないということ

HTMXのCEOに就任したので^[1]、記念に記事を書きたいと思います。
HTMXサイトのエッセイ^[2]はどれも珠玉の出来で評判ですが、それらを読んでもわかるとおり、HTMXは「Webはこうあるべき」という主義主張のあるライブラリです。その主義主張のかなり初歩的な前提を書きたいと思います。
Reactはなぜだめか、という話です。

jQuery

昔話から始めますが、ぼくが街のホームページ屋さんを生業としてやり始めたおよそ10年ぐらい前、ES6によって”Web標準”への道が開けつつあり、標準化されていないJavaScript仕様を埋めるためものであったjQueryはすでにイケてない存在になりつつありました。
ReactやVueなどのコンポーネントUIライブラリは来つつある未来だったのです。

当時、jQueryは「サイズが大きくてパフォーマンスが悪い」ものとして厄介払いされようとしていました。
bundlephobiaによると^[3]、ミニファイされたjQueryのバンドルサイズは85.1kb、GZIPされたものは29.7kbです。読み込みまで遅い3G回線なら0.59s、4G回線でも34msかかるそうです^[4]。ゲームをやられる方ならわかるでしょうが、人間は10msを超えれば遅延を感じるようになるそうです。ゲームとWebサイトでは違うでしょうが、読み込みまでに体感で感じられる時間はありそうですし、おそらく実際にその時間を経験したこともあるでしょう。
当時のjQueryに対する批判は、まあ、いわれなきものではなかったと思います。

React

現在いちからWebサイトを作ろうとするなら、フロントエンド開発者ならNext.jsなり、RemixなりReactのフレームワークを立ち上げて作るでしょう^[5]。しかし、そうするとなんと、10年前のJQueryをCDNで読み込んだサイトと似たような問題を抱えることになります。
Reactは「サイズが大きくてパフォーマンスが悪い」です。

Reactを使うときはreact-domを一緒に使います。bundlephobiaによると^[6]、ミニファイされたreact-domのサイズは130.2kb、GZIPされたものは42kbです。読み込みまで遅い3G回線なら0.84s、4G回線で48msかかるそうです。
この記事を書くために調べてちょっと驚きましたが、ReactはjQueryよりも重いのです^[7]。

「バンドルサイズだけがパフォーマンスを決定するのではない」と言われる向きもいるでしょう。
また昔の話になりますが、ReactやVueが脚光を浴びはじめたころに「DOM操作なんてイケてない手法に対し、ReactやVueは仮想DOMというやつのおかげでとても早いらしい」なんて話をよく聞きました。
DOM操作は本当にイケてないにしても、現在では「仮想DOMは純粋なオーバーヘッドに過ぎない」という意見すらあります。そこまで言い切れるかどうかはぼくに判断のつく話ではないですが。
これはReactの対抗馬として、SvelteやSolidといった仮想DOMを使わないライブラリが頭角を現してきたからです。これらのライブラリはバンドルサイズがはるかに小さく、パフォーマンスがとても良いです。VueもVaporモードという仮想DOMを使わない実装のリリースを控えています。

実際のところ、Reactコミュニティにおいても、パフォーマンス問題というのはかなり意識されていると思います。Million.jsやReact19での自動メモ化機能など、Reactのパフォーマンスを解決するための手段というのはホットなトピックです。
しかし、パフォーマンス問題を本当に解決できるかという根本的なところも含めて、現在のReactは過度期にあるといってもいいでしょう。

他にもReactに関する問題はいろいろとありますが、フレームワーク(特にNext.JS)やSPAなど純粋にReactだけではない論点が絡んでくるので、ここでは論じきれません。この記事では代表的なところでパフォーマンス問題だけ扱うことにしました。
興味があれば、英語ですが、以下の記事と以下の記事からのリンクを読んでみてください。ぼくごときの言うことが信じられない場合でも、それらの記事を書かれている方たちは超一流の開発者たちなので、論拠としては十分だと思います。

Please don't use React · Já não vou salvar o mundo (borfast.com)

1. The Market for Lemons
2. The Great Gaslighting of the JavaScript Era
3. We tried that, didn’t work
4. Web developers: remarkably untalented and careless?
5. Things you forgot (or never knew) because of React
6. A Historical Reference of React Criticism
7. Rethinking the Modern Web
8. Taylor Otwell: Avoid Separate SPAs consuming Laravel API. Use Livewire/Inertia.
9. The self-fulfilling prophecy of React
10. What Got Me Writing Vanilla JavaScript again
11. The AHA Stack
12. Removing React is just weakness leaving your codebase
13. Kind of annoyed at React
14. React, where are you going?
15. The deciline of React
16. Concatenating text
17. The (extremely) loud minority

「Reactを使うな」とまで言い切る気はないのですし、言い切れるほどのアレもないのですが、これらの問題はWeb開発者であるならば、ちゃんと受け止める必要があると思います。
でないと、我々は自分たちでも問題を抱えているとわかっているものをクライアントに「現在Webサイト(なりWebアプリケーション)を作る唯一の選択肢です」といって提示するしかないということになります。
それは問題です。まったく問題です。

以上を持ちまして、私のHTMX CEO就任記念とかえさせていただきます。
というわけで皆さん、HTMXを使いましょう！^[8]

脚注

1. HTMX CEO's ↩︎

2. </> htmx ~ Essays ↩︎

3. jquery v3.7.1 ❘ Bundlephobia ↩︎

4. 公正を期すために書いておきますと、bundlephobiaの想定は日本の回線事情に比べるとかなり遅いと思われます。しかし、世界の回線事情がどこも日本のように恵まれているわけではありませんし、常に光回線でルーターから直接モデムに繋いでいるのでない限り(繋いでいても)、我々の回線がその速度になることはあり得ます。私は楽天モバイルユーザーです。 ↩︎

5. Reactのドキュメントでそう推奨されています。React プロジェクトを始める – React ↩︎

6. react-dom v18.2.0 ❘ Bundlephobia ↩︎

7. Vueも同じです。 ↩︎

8. ここからさらにHTMXにつなげるには先に挙げたSPAの問題等が絡むので手に余ります…… ↩︎