Turbo Driveを無効にしながら段階的にTurbo Frames, Turbo Streamsを利用する

先日に投稿した記事にあるように、VueとRailsから、Rails, Turbo、あとは必要に応じてisland Architectureを使ったフロントエンドスタックに置き換えていくことを決断して現在進めています。

Rails, WebComponentsとTurboで挑むislands Architectureへの道

Turbolinksはオフにしていたので、Turbo Driveも無効にしてスタート

プロダクトを開発し始めた2015年当時はまだTurbolinksで、 Turbolinksは扱いづらかったのというのと、TurbolinksとVueをどう組み合わせればちゃんと動くのかは当時の私は知る由もなかったので、Turbolinksは無効にしていました。なので、いきなり全部の画面を対象にTurboを有効にするのは危険だったので、いったん下記の設定を行って、Turboは無効にしました。

Turbo.session.drive = false

Turbo Reference

A reference of everything you can do with Turbo Drive.

turbo.hotwired.dev

部分的にTurboを有効にするのは簡単

部分的に有効にする場合も簡単でした。data-turbo="true"とdata属性を設定するだけで、部分的にTurboを動かせるようにできました。そんな感じなんでそこまで苦労なくできるかなというのが取り組む前の感想でした。特にハマったりということはほぼなく順調に進んでいましたが、一つだけハマってしまいました。

button_toでTurbo Streamsが動かない

button_toでのpostメソッドでリンクでTubro Streamsを使おうとしても動かないケースがありました。同じURLに対してform_with で送信するケースではうまく動くのでバックエンドのではなく、タグの設定に問題があることがわかりました。色々調べていって、Turbo Driveを無効にしているときに、button_toの「formタグに対して」data-turbo="true" がなくてはTurboが動かないことがわかりました。

button_toでpostメソッドを使う場合は、下記のようにHTMLが生成され、formタグやCSRFトークン用のinput type hiddenが埋め込まれます。

<form class="button_to" method="post" action="/follow/1">
    <button class="btnFill--small" data-turbo="true" data-turbo-stream="true" type="submit">
        <span>フォロー</span>
    </button>
    <input type="hidden" name="authenticity_token" value="**** autocomplete="off">
</form>

これでPOSTメソッドでリクエストしているという動きです。

Turbo Streamsを使うには、この button_to のformタグに対して設定がなければなりません。 button_to のオプションでformタグに対しても属性設定が可能で、下記のように対応したところ改善されました。

<%= button_to event_join_path(event_id: event.uid), form: { data: { turbo: true, turbo_stream: true } } %>

また、button_toの親要素をTurbo Framesで囲んでいると、 formタグにdata属性を設定しなくともTurbo Streamsは動いてくれるという挙動の違いもあったので、少しだけ対応に手間取ったのでした。

まとめ

そんなこんなでフロントエンドスタックをTurbo Frames, Turbo Streamsを使ったものに少しずつ切り替え始めています。早速、利用しなくても良い箇所のVueのロジックがなくなったりでメリットが出てきました。そんな感じで他の画面もどしどし進めていければいいかなと思っています。