Rails7でのHotwire/Turboについて調べてみる【JavaScript】
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 になる。）
$ 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まわりのリンク
上記のやや詳しい説明が以下。