Zenn
Open5

Hotwireことはじめ

Rails
Hotwire
Stimulus
Turbo
kazumeatkazumeat

Hotwireとは？｜猫でもわかるHotwire入門 Turbo編

  • Turbo
    • レスポンスするHTMLをいい感じに組み立ててくれるくん

      • JavaScriptを書かずにサーバーサイドレンダリング + fetchでHTML要素を更新できるようになる

    • 画面生成をRails側で行える
    • 全体を書き換えたり一部を書き換えたり、追加したり削除したり
    • Turbo Drive, Turbo Frames, Turbo Streams を直接扱う必要はなくて、それは turbo-rails gem がやってくれる
    • 以下のようなカスタム要素を、Turboがクライアント側で処理してくれる
<turbo-stream action="replace" target="cat_1">
  <template>
    コンテンツ
  </template>
</turbo-stream>
  • Stimulus（刺激）
    • 軽量なjsフレームワーク
    • rails以外からも使える
    • HTMLに直接カスタムデータ属性を付与（コントローラーやアクションを指定）することで、特定のDOMに対してJavaScriptの機能を追加することができる
    • TurboのSSRで賄えない部分のjsを書く
    • Railsから扱いやすくするために stimulus-rails gem がある
  • Hotwire
    • TurboとStimulusを合わせた総称、パッケージの名前でこれ自体がなにかの機能なわけではない
    • jsをあまり書かずにモダンなWebアプリケーションを構築するためのアプローチ
kazumeatkazumeat

下記はそんなことなかったので訂正。devtool の Network で確認

チュートリアルは以下のバージョンでやってしまったんだけど、

  • ruby 3.3.5
  • Rails 7.2.1.2
    もしかしたら初期にちゃんとTurbo外せなかったかも
    下記を追記しても/しなくても、動作が変わらなかった。
app/javascript/application.js
Turbo.session.drive = false

動き的には、Turboが常に効いてて、画面再読み込みは走ってなかった。
チュートリアルやるなら、下記とバージョン合わせたほうが良い。
https://zenn.dev/shita1112/books/cat-hotwire-turbo/viewer/intro#環境

kazumeatkazumeat

Turbo Driveを有効化して画面遷移を高速化

Turboを有効化すると、サイドバーのメニューにカーソルを合わせるだけで、fetch が走ってた。
その後、サイドバーのメニューをクリックすると、画面遷移なしに表示だけが切り替わった。

ページネーションは、ページが変わる事にリクエストが発生している状態
確かに、ページ全体が返ってきていた

ページネーションのTurbo Frames化

「リクエストからレスポンスまでの流れ」で、

クライアント側: ページネーションのリンクをクリックした時に、Turboが通常のリクエストをインターセプトして、fetchを行う（Turbo Driveと同じ）。

と記載があるんだけど、実際にはリンクを hoverしたときにはfetchが行われていた。
（サイドバーメニューの時と同じ）
クリックしなくてもfetchが行われるから、もしクリックせずにマウスがリンクを通過しただけでもfetchが走っちゃう。これは無駄な感じがしなくもない。

リクエストヘッダーに、Turbo-Frame: cats-list が付与されていることを確認

レスポンスも画面全体ではなく、右側だけになってることを確認

ただ実際このレスポンスで表示を切り替えるのは、クリックした時になる。