高度なUI/UXこそHotwireで作ろう

簡単な画面ならHotwireで十分だけど、UI/UXが複雑なユーザ向け画面はReactが必要だと思っていませんか?

これは勘違いだと私は確信しています。

Hotwireは37signalsのBasecampやHeyで使われている他、日本の有名どころだとCookpadでも使用されています。ユーザ向けの複雑な画面において、Hotwireが十分に使えることはすでに立証済みです。

本セッションでは2つの角度からHotwireを深掘りします。

まずはEJSを使ってNext.js上でHotwireを動かし、同一UIを同一サーバ上でそれぞれ作成した上で、HotwireとNext.jsを直接比較します。意外かもしれませんが、実はHotwireの方が優れたUI/UXを作りやすいことをお見せし、その解説をします。

もう一つはHotwireの考え方の詳説です。
Hotwireを使えばJavaScriptを減らせると考えがちですが、高度なUI/UXを作るにはHotwire流のJavaScriptを理解する必要があります。本セッションではTurbo, Stimulusの責務を解説し、組み合わせ方を紹介します。加えて複雑なUI/UXを実現するために単一データフローやステートを活用したStimulus Controllerの設計方法をお見せします。最後にはステート管理ツール Zustandとの組み合わせ事例も紹介します。

Speaker

Naofumi Kagami

Naofumi Kagami

自称「フロントエンドRuby on Railsエンジニア」。モダンフロントエンドが嫌いだから弱点を懸命に勉強し、職場でモダンフロントエンドを書いている自己矛盾的存在。

「Hotwire よもやま話」とか「フロントエンドエンジニアのためのHotwire入門」のサイトを作ってHotwireの普及に努めています