Rails7でのHotwire/Turboについて調べてみる【JavaScript】

2022年8月31日

Rails7で大きく変わったJavascriptまわり。まじで分かりません。

ちなみに、rails newのときに、

開発環境ではDELETEできるのに、Production環境（Heroku）ではDELETEできない事態が発生 => たぶんJavascriptが原因だけど、POSTのリンクをbutton_toにすることでなんとなく対処

こんなことがおこりました。JavascriptがProduction環境で急に動かなくなってしまったっぽいのです。対策として、

link_to

を

button_to

に変更することで、なんとかDELETEはできるようになりました。理由としては、

link_to　のデフォルトは GET , button_to　のデフォルトは POST

だからだそうです。

Rails7では、Hotwire/Turboという仕組みを使うと、Railsアプリだけで、Ajaxのような画面遷移無しの挙動を作ることができるらしい

猫でもわかるHotwire入門 Turbo編を読んで、Rails7のTurboについて、調べてみたいと思います。

HotwireのWEBで利用する構成要素は以下の通り

• Turbo
  • Turbo Drive
  • Turbo Frames
  • Turbo Streams
• Stimulus

Hotwireを使うと、フォーム・リンクからのリクエストは全てFetch APIを利用した非同期リクエストになる。このfetchに対して、サーバーはHTMLをレスポンスする。（ReactやVueは、fetchに対してサーバーはJSONをレスポンスして、DOMを構築する）

turbo-railsとは、RailsからTurboを便利に使うためのgem

• TurboをRailsから使うためのturbo-railsというgem　がある
• StimulusをRailsから使うためのstimulus-railsというgem がある

rails newのオプションで--css bootstrapを指定すると、その場合は自動的にjsbundling-rails（とcssbundling-rails）を使うことになる。そして、このときは、rails s ではなく、bin/dev で開発環境でサーバを起動する。（Railsのデフォルトではimportmap-rails　を使用する。rails new で、–css　tailwind を指定すると、importmap-rails　になる。）

猫でもわかるHotwire入門 Turbo編では、

$ rails new cat-hotwire --css=bootstrap --skip-jbuilder --skip-action-mailbox --skip-action-mailer --skip-test --skip-active-storage --skip-action-text

のように、rails newのときに、-css=bootstrap をつけているので、自動的にjsbundling-railsが入るが、importmap-railsでも、Turboは利用できるらしい。

Rails7のHotwire、Javascriptまわりのリンク

上記のやや詳しい説明が以下。