Reactの「複雑なUI/UX」？

ここでは「複雑なUI/UX」を定義し、Reactがなぜ「複雑なUI/UX」に適しているのかを確認しながら、Stimulusで同様の問題を解決する方法について考えます。

Reactが解決した「複雑なUI/UX」

ReactはFacebook社が直面していた「複雑なUI/UX」の課題を解決するために生まれました。そこで生まれたコンセプトが「単方向データフロー」です。

単方向データフローの何が優れていたかはmizchiさんによるZennの本が参考になると思います。またReactの誕生秘話については、英語ですが、このReact.js ドキュメンタリーが参考になります。

このようにReactでいう「複雑なUI/UX」とは、ステートを中心とした単方向データフローに適したUIを指していると言えます。そしてそれがどのようなケースかというと、Reduxの公式ドキュメントに記述されています。

Redux is most useful in cases when:

• You have large amounts of application state that are needed in many places in the app
• The app state is updated frequently
• The logic to update that state may be complex
• The app has a medium or large-sized codebase, and might be worked on by many people
• You need to see how that state is being updated over time

Stimulusで「複雑なUI/UX」は作れるか？

上述より、Stimulusでも単一データフローを実装できれば、Reactが解決した課題はStimulusでも解決可能と結論できます。そしてStimulusにはそのためのツールが実は用意されています。Stimulusでステートを管理するためのValuesおよび*ValueChangedコールバックです。

「Stimulus Controllerの構造」の項で紹介している通り、これを使用するとステート(Values)を中心とした単一データフローのStimulus controllerが作れます。単一データフローが実装できるということは、 Reactがいう複雑なUI/UXはStimulusでも十分に作成できるということです。

多少のDXの差はあるものの、「Hotwireで複雑なUI/UXは作れない？」というのは、単なる誤解ではないか と考えています。

Reactで作られていない「複雑なUI/UX」

React == 「複雑なUI/UX」ではないことを示すために、以下の事実をリストアップします。他にも多数の例がありますが、Reactは「複雑なUI/UX」といっても課題の一部を解決しているにすぎないことがわかります。

• FigmaはReactを使っていますが、メニューやボタンなどで使っているのみです。実際に図を並べでデザインするところはCanvasです。Figmaの「複雑なUI/UX」は主にCanvasです（下図参照）。
• Reactでグラフを描くためによく使用されているreact-chartjs-2はvanilla JSのChart.jsのラッパーです。複雑な動きはvanilla JSで実装されています。
• リッチテキストエディタのTipTapTipTapはReact版もありますが、vanilla JS版もあり、ベース技術はvanilla JSです。React版はラッパーになります。