Hotwire
リソース
メモ
Hotwire
JSONではなくHTMLをレスポンスすることでレンダリングはサーバーサイドでのみ行うようにできる。
レンダリングをサーバーサイドでのみ行うことで今までのRailsアプリケーションの開発の延長線上でモダンなWebアプリケーションを作ることができる
主要ライブラリ
Turbo Drive: 画面遷移を高速にしてくれるやつ。旧Turbolinks。
Turbo Frames: Turbolinksの部分適用版。
Turbo Streams: 複数箇所のHTML要素を同時に更新するできるやつ
Turbo Native: ネイティブのやつ
Stimulus: JSライブラリ。Turboで賄えないJSを書かざるを得ない場所で使うやつ。 ライブラリの使い分け
Turbo Drive > Turbo Frames > Turbo Streams > Stimulus の順に検討していく。
右に行くに従って自由度が上がりメンテナンスが大変になるので。
サポートブラウザ問題はないのか？
requestSubmitは使えないブラウザがまだありそう？
rails newする
code:bash
$ bundle install
$ bundle exec rails new . --force --database=postgresql --css bootstrap --skip-jbuilder --skip-action-mailbox --skip-mailer --skip-test --skip-active-storage --skip-action-text
webpackerが不要になるからnodejsとかも要らんのかな〜と思ってDockerfileから依存を消したらrails newでpackage.jsonのinstallで死んだ。yarnとnodejsは要る。
Procfile.devをコンテナからアクセスできるように修正する
code:Procfile.dev
web: bundle exec rails server -b 0.0.0.0 -p 3000
js: yarn build --watch
css: yarn build:css --watch
jsbundling-railsを使う。webpackではなくESBuildを使っとるらしい。
Turobo無しでとりあえず管理画面までガッと作る。
Turbo導入。application.jsでTurbo.session.drive = trueにするだけなので楽。
次にTurbo Framesを使う
Turbo Framesはフロント側では<turbo-frame />というcustom elementらしい。
Turbo Framesタグの外の要素のリクエストに応じてTurbo Framesを更新させたい場合はdata-turbo-frame属性を使う。例) 検索フォームと一覧の関係のところ。
Turbo Framesだとタグで囲った一箇所しか更新できない。Turbo Streamsを使うと複数箇所変更できる。
Turobo Streams
<turbo_stream/>というタグ。パーシャルをrenderする。
パーシャルのファイルはXXX.turbo_stream.erb
turbo_stream.replaceのようなactionが幾つかある。
code:action
# 追加
- append: targetの末尾に追加
- prepend: targetの先頭に追加
- before: targetの前に追加
- after: targetの後に追加
# 更新
- replace: targetを更新（target要素も含めて更新）
- update: targetを更新（target要素のコンテンツだけ更新）
# 削除
- remove: targetを削除
index/show/edit/newの4つはGETなのでTurbo Streamsは使えなくて、update/create/destroyはGETではないのでTurbo Streamsが使える
Stimulus
StimulusはTurboと相性が良いJavaScriptのライブラリ。カオスになりがちなJavaScriptにレールを敷く役割を担っている。
SafariではrequestSubmit()がサポートされていないようだけど、Turboにpolyfillが入っているので問題なく使える
Turbo Framesの遅延読み込み
<%= turbo_frame_tag "new_cat", src: new_cat_path %>
初回レンダリングではnew部分は読み込まずに、ページロード後にTurbo Frameリクエストで読み込むように遅延させられる。
<%= turbo_frame_tag "new_cat", src: new_cat_path, loading: :lazy %>
loadingオプションにlazyを指定すると、ページロード後ではなく、スクロールなどにより<turbo-frame>が画面に表示された時にTurbo Frameリクエストするようになる
便利じゃん...
リンク
サンプル集
stimulusレシピ
stimulus強化ライブラリ