zenet_logo

-株式会社ゼネット技術ブログ-

トップ > Ruby > Kaigi on Rails 2025で話題のHotwire Turboを試してみました

Kaigi on Rails 2025で話題のHotwire Turboを試してみました

Ruby RubyKaigi Rails

 

株式会社ゼネットシステム事業部 原です。

 

背景

Kaigi on Rails 2025 Day1 にオンライン参加いたしました。

Hotwireに関する発表が2つあり、聴講しました。

- 高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025 - Speaker Deck

- Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components - Speaker Deck

内容を理解したく、Hotwireを試してみました。

 

今回はこちらを参考にRailsアプリケーションにHotwireの一部であるTurboを試してみました。

猫でもわかるHotwire入門 Turbo編

http://7zenn.dev/shita1112/books/cat-hotwire-turbo

 

試したときの環境は以下となります

・Rails 8.0.4

・Ruby 3.4.7

検索機能の実装でransack 4.4.1を使用する際にmodelにransackable_attributesメソッドの実装を行いました。それ以外は問題なく動作しました。

 

Hotwireとは

HTMLをサーバーでやり取りすることにより、画面更新に必要なHTMLをサーバー側で生成して送り返すことで、大量のJavaScriptを書かずともモダンなWebアプリケーションを実現できる仕組みです。

以下3つの要素で構成されています。

  • Turbo
    • JavaScriptを書かずにアプリケーションを高速で描画する
  • Stimulus
    • 最小限のJavascriptでUIの振る舞いを追加できる
  • Strada
    • Webとネイティブアプリ(Android,ios)をつなぐ

今回、参考にしたサイトの中でTurboを触れました。

触れた内容と感想を述べていきます。

 

Turbo

TurboとはJavascriptを書かずにアプリケーションを高速で描画できる機能です。

Turbo Drive、Turbo Frames、Turbo Streamsに分かれています。

 

Turbo Drive

Turbo Driveを使用すると、HTMLのbody要素のみを置き換えます。head要素はそのままです。CSSやJavascriptも現在のページの状態で読み込まれるため、ページ遷移のたびに発生していたCSS、Javascriptの初期化がなくなるため、読み込みは速くなります。

 

Turbo Driveを無効・有効にした時と画面遷移を比較しました。

有効にしたときの画面遷移の実行時間が速くなっています。

 

Turbo Drive無効時

遷移のたびにcats、dogsの一覧表示に必要なcss,jsファイルなどが読み込まれていることが分かります

画面1に遷移

画面2に遷移

Turbo Drive有効時

一覧表示に必要なcss,jsを保持したまま、画面遷移が行われます。

画面1に遷移

画面2に遷移

 

Turbo Frames

Turbo Framesとは画面の一部分を高速に描画できるようにする機能です。

実際に一覧部分、ページネーションやソート、検索機能に対してTurbo Framesを適用しました。

適用したい画面要素に対して、<turbo_frame_tag "{任意の名前}">で囲むことでHTMLの<turbo-frame>要素とid属性を付与されます。一覧部分に対してidを付与し、検索対象に指定することでturbo-frameの実現が可能となります。

一覧(ページネーション、ソート含む)のHTML要素

 

 

また編集機能においてもTurbo Framesを実装しました。

データを表示している_cat.html.erbに対して、turbo_frame_tagを適用すると以下のようになります。

一覧の中の1データを表示するcat.html

編集ボタンを押下すると編集画面を描画する_edit.html.erb、入力フォームを描画する_form.html.erbの順で置換されます

編集ボタンを押したデータのみedit.htmlとform.htmlに置き換わる

更新ボタンを押下すると_cat.html..erbに置き換わります。

他のデータ表示部分、一覧部分に大きな影響を与えることなく更新ができました。

 

Turbo Streams

「データの登録完了、更新完了、削除完了と同時に画面上部にメッセージを出力するようにする」を実現するためにTurbo Streamsを利用しました。

Turbo Framesはturbo-frameタグで囲った部分のみをHTMLで置き換えできるのに対して、Turbo Streamsは複数箇所をHTMLで置き換えできます。

①{アクション名}.turbo_stream.erbを用意

②turbo_stream.prependメソッドで登録された_cat.html.erbを追加

③turbo_stream.updateメソッドで_form.html.erbの入力内容をリセット

④turbo_stream.updateメソッドでflash.html.erbの内容を表示

これにより実現しました。

登録を例に置き換えの様子を記載します。

名前と年齢を入力

フォーム入力時のHTML

登録ボタンを押下すると

登録ボタン押下後のHTML

flashタグの内容が変化していること、catのturbo-frameタグが増えていることが分かります。

また、ログを確認するとデータ形式はTURBO_STREAMでやり取りしていることが分かります。Turbo streamから各HTMLに対して操作ができると理解しました。


    Started POST "/cats" for ::1 at 2025-10-31 15:03:27 +0900
 Processing by CatsController#create as TURBO_STREAM
   Parameters: {"authenticity_token" => "[FILTERED]", "cat" => {"name" => "cat1", "age" => "1"}, "commit" => "登録する"}
   TRANSACTION (0.9ms)  BEGIN
   ↳ app/controllers/cats_controller.rb:35:in 'CatsController#create'
   Cat Create (6.9ms)  INSERT INTO "cats" ("name", "age", "created_at", "updated_at") VALUES ($1, $2, $3, $4) RETURNING "id"  [["name", "cat1"], ["age", 1], ["created_at", "2025-10-31 06:03:27.265139"], ["updated_at", "2025-10-31 06:03:27.265139"]]
   ↳ app/controllers/cats_controller.rb:35:in 'CatsController#create'
   TRANSACTION (2.0ms)  COMMIT
   ↳ app/controllers/cats_controller.rb:35:in 'CatsController#create'
   Rendering cats/create.turbo_stream.erb
   Rendered cats/_cat.html.erb (Duration: 2.3ms | GC: 0.0ms)
   Rendered application/_flash.html.erb (Duration: 0.2ms | GC: 0.0ms)
   Rendered cats/create.turbo_stream.erb (Duration: 5.4ms | GC: 0.0ms)
Completed 200 OK in 35ms (Views: 7.4ms | ActiveRecord: 9.6ms (1 query, 0 cached) | GC: 0.0ms)

Turbo Streamsにより、

メッセージを出力する部分のFlashとデータを表示する部分のturbo-frameタグそれぞれを同時に変更することができました。

まとめ

Hotwireに関して以下の内容で理解することができました。

・Turboにより、Javascriptを書かずにHTMLのみで動的なWebアプリを実現できる

・Turbo Driveにより、画面全体の高速描画が可能である

・Turbo Framesにより、画面一部の要素を置き換えての描画が可能である

・Turbo Streamsにより、画面複数の要素を置き換えての描画が可能である

課題

Hotwire Turboを試してみて思ったこと・時間を作って行いたいことは以下になります。

・参考にしたサイトの中でStimulusも紹介されていたため、取り組んで理解を深めたい

・gem turbo-rails のgithubを確認し、どのような実装になっているか確認したい

・Kaigi on Railsの講義内容の理解を深めたい

・業務の中でどの描画部分が置き換え可能なのか検討したい

 

所見

Turboを使ってHTMLのみの置き換えを行うことにより、画面描画が速くなるため、アプリ全体のパフォーマンス向上も期待できそうです。

ここまでご覧いただきありがとうございました。