Rails7にHotwireを使ってみた

この前のプロジェクトを作る機会があって、小さいプロジェクトなので、ruby on railsを使いました。せっかくなので、最新バージョンのRails7を使いました。
Rails7はデフォルトでHotwire(Turbo, Stimulus)を使うことになっています。迷いながら、この組み合わせを試してみました。

なぜHotwireを使っているのかを深く考えずに、Turboをあまり触らずに、フロントはJSを書く感覚で、Stimulusだけを使っていました。それで直のJSを使わないで済むと、妙に達成感を感じでコードを書いていました。

しかし、それはRails7 + Hotwireが望む本来の姿ではなかったです。

Hotwireについて、すごくわかりやすく紹介するオンラインの本を見つけて、読んで勉強になりました。
猫でもわかるHotwire入門 Turbo編
詳しい説明は本にわかりやすく書いているので、興味がある方、ぜひご参考ください。

ここでは具体的な話をせず、自分が開発の時に、ハマったことと感想を書かせていただきます。

ハマったこと：

link_to、Formを使うときに、今までの書き方で、method, confirmが使えませんでした。
confirmがdata-turbo-confirmに、methodがdata-turbo-methodになっています。
submitのconfirmは、data-turbo-confirmになっています。
検索結果のページャで移動する時に、自動的にページのTOPへスクロールして鬱陶しいです。
解決するため、Stimulusを使って、ページャで移動の時に、強制的に検索結果の場所までスクロールするようにしています。
しかし、Turbo Framesを使えば、ページで移動する時、自動スクロールしなくなります。
検索結果とページャーをturbo_frame_tagで囲んでいれば、ページの一部だけ入れ替えを行う為、解決です。
turbo_frame_tagの中に、link_toを使って別のページへ遷移はうまく行かない。
linkにdata-turbo-frame=”_top”を追加する必要があります。
或いは、target=”_blank”で、新たしいタグでリンクを開くといいです。
一覧画面で追加、編集、削除を実現しようと、Stimulusで書いてしまいました。
その結果、JSの量が増えました。
しかし、実はTurbo Frames, Turbo Steamsを使えば、簡単に実現できます。