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を使えば、簡単に実現できます。

感想：

• Turboを優先的にに考えて使い、Turboだけで実現できない機能は、Stimulusを使います。
• ページの一箇所を変更を考える時は、Turbo Framesを使います。
• ページの一箇所或いは複数箇所に、追加、変更、削除を考える時は、Turbo Steamsを使います。
• Rail7 + Hotwireは、フロントエンドとバックエンドを分離しない書き方です。小さくて一人で開発するプロジェクトが向いていると思います。

自分がRails7でHotwireを使って開発の時にハマったところと感想です。
ご参考にしていただければ大変嬉しく思います。

エンジニア 周瑜

中国貴州省出身、京都オフィス勤務のエンジニア。前職は大手コンビニ運営部スーパーバイザー。超多趣味。