Zenn
Open9

Hotwire tutorial やってみる

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 が付与されていることを確認

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

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

kazumeatkazumeat
kazumeatkazumeat

  • Turbo Drive｜猫でもわかるHotwire入門 Turbo編

  • Turbolinks -> Turbo Drive って名前が変わった

  • リクエストをTurbo Driveがインターセプトして、fetchによる非同期リクエストに差し替える

  • レスポンスされたHTMLの<body>要素だけを抜き出して、現在のページの<body>要素を置換

  • CSS, js の再読み込みが不要になり、画面遷移が早くなったように感じられる

    • （というか遷移してるようには見えない）

  • history.pushState()を使いURLを更新する

  • （Turbo Drive の Drive って Turbo をもっとドライブさせる（高速化）ってことなのかなぁ？）

  • ページキャッシュ

    • キャッシュされてるから、ブラウザの戻る・進むではキャッシュが表示される

    • これで戻る・進む時に毎回リクエストする必要がなくなり、高速化できる。

    • キャプチャ見ると、data chache が使われていることがわかる
    • プレビュー
      • キャッシュされてるページを再び訪れたとき、まずはキャッシュを表示→ページの読み込みが完了したらそれを表示
        • 後から内容が変わるのが鬱陶しいと感じるデメリットもある
      • プレビュー中はXXの処理する〜みたいな処理も書ける

  • プログレスバー

    • Turbo Driveが用意したやつがある

  • その他いろいろTurboでできることの解説

    • 読めばわかるので割愛

  • Turbo Driveのイベントの流れ（ライフサイクル）