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を使って開発の時にハマったところと感想です。
ご参考にしていただければ大変嬉しく思います。

関連記事

最近の記事 おすすめ記事
  1. 新人さん向けの品質についての読書会

  1. 自由であたらしい働き方

  2. フロントエンドエンジニア 入社10か月目 / チームの取り組み

  3. 一番嫌われているプログラミング言語は?

カテゴリー

アーカイブ

検索


TOP
TOP