```
```erb
<%= yield %>
```
> **Turboのデバッグ**
>
> 開発環境で、JavaScriptコンソールを開いて`Turbo.setProgressBarDelay(0)`と入力すると、プログレスバーがすぐに表示されます。`Turbo.session.drive = false`でTurbo Driveを一時的に無効にできます。
## エラーハンドリングとローディング状態
良いUXにはローディング状態とネットワークエラーの処理が必要です。
```erb
<%= form_with model: @model,
data: {
controller: "form-loading",
action: "turbo:submit-start->form-loading#disable turbo:submit-end->form-loading#enable"
} do |f| %>
<%= yield f %>
<% end %>
```
```javascript
// app/javascript/controllers/form_loading_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["submit", "text", "spinner"]
disable() {
this.submitTarget.disabled = true
this.textTarget.classList.add("hidden")
this.spinnerTarget.classList.remove("hidden")
}
enable() {
this.submitTarget.disabled = false
this.textTarget.classList.remove("hidden")
this.spinnerTarget.classList.add("hidden")
}
}
```
### サーバーエラーの処理
```ruby
# app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
rescue_from ActiveRecord::RecordNotFound do |exception|
respond_to do |format|
format.turbo_stream do
render turbo_stream: turbo_stream.replace(
"main_content",
partial: "shared/not_found"
)
end
format.html { render "errors/not_found", status: :not_found }
end
end
end
```
## パフォーマンス最適化
いくつかのテクニックにより、パフォーマンスの高いTurboアプリケーションを確保できます。
```ruby
# app/controllers/messages_controller.rb
class MessagesController < ApplicationController
# Avoid N+1 queries with eager loading
def index
@messages = Message.includes(:author, :room)
.order(created_at: :desc)
.page(params[:page])
end
# Fragment caching for static elements
def show
@message = Message.find(params[:id])
fresh_when @message
end
end
```
```erb
<% cache message do %>
<%= message.content %>
By <%= message.author.name %>
<% end %>
```
## まとめ
HotwireとTurboは、従来のJavaScriptフレームワークの複雑さを排除することでRails開発を変革します。Turbo Driveはナビゲーションを高速化し、Turbo Framesはターゲットを絞った更新を可能にし、Turbo Streamsは強力なリアルタイム機能を提供します。
### Hotwire入門チェックリスト
- Hotwireの組み込み統合のためにRails 7以上を使用する
- 3つのコンポーネントを理解する：Drive、Frames、Streams
- Turbo Framesの恩恵を受けるページゾーンを特定する
- コントローラーで`respond_to`と`format.turbo_stream`を使用する
- リアルタイム機能のためにブロードキャスティングを実装する
- シンプルなJavaScriptインタラクションのためにStimulusと組み合わせる
この「HTML over the wire」アプローチにより、Ruby on Railsを強力にするシンプルさと生産性を維持しながら、モダンでリアクティブなアプリケーションを構築できます。結果として、メンテナンスするコードが少なく、優れたパフォーマンス、そして最適な開発者体験が得られます。
---
Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ja/blog/ruby-on-rails/ruby-on-rails-7-hotwire-turbo