⚡
Turbo & Hotwire
JavaScriptなしでSPAのようなUX実現
HotwireはRails 7のデフォルトフロントエンドフレームワークで、3つの構成要素があります。
1. Turbo Drive: 全リンククリックとフォーム送信を傍受し、ページ全体のリロードの代わりに<body>だけを差し替えます。設定不要で自動動作。
2. Turbo Frames: ページの特定領域だけを独立して更新します。
turbo_frame_tag "post_123" do ... end でフレームを定義すると、フレーム内のリンクをクリック時フレーム内でのみ内容が差し替わります。
3. Turbo Streams: サーバーから8種類のDOM操作を指示します。
turbo_stream.append、prepend、replace、update、remove、before、after、morph等のアクションで特定DOM要素をサーバーから直接操作します。
Action Cableと結合すればリアルタイム更新も可能です。
構造ダイアグラム
🚗
Turbo Drive
全リンク/フォームを自動AJAX化
<body>のみ置換
設定不要!
🖼️
Turbo Frames
特定領域のみ独立更新
turbo_frame_tag
インライン編集
🌊
Turbo Streams
サーバー→クライアントDOM操作
append, remove ...
リアルタイム更新
Turbo Stream 8つのアクション:
append
prepend
replace
update
remove
before
after
morph
従来 (React/Vue)
Server → JSON → Clientレンダリング
Hotwire
Server → HTML → Clientに挿入
ポイント: <strong>HTML Over The Wire</strong> — サーバーがHTMLを送信し、Turboがページを部分更新
キーポイント
1
Turbo Drive: リンク/フォームを自動AJAX化（設定不要）
2
turbo_frame_tagで独立更新領域を定義
3
フレーム内のリンクはフレーム内でのみ応答を差替え
4
Turbo StreamでサーバーからDOM操作を指示（append, remove等）
5
respond_to { |format| format.turbo_stream { ... } } で応答
6
Action Cable + Turbo Stream = リアルタイム更新
メリット
- ✓ JavaScript最小化 — サーバーレンダリング維持
- ✓ SPAレベルのUX（ちらつきのないページ遷移）
- ✓ Rails 7標準搭載 — 追加インストール不要
- ✓ SEOフレンドリー（サーバーレンダリング）
デメリット
- ✗ 既存JavaScriptライブラリとの衝突の可能性
- ✗ Turbo Driveが予期しない動作を引き起こす
- ✗ デバッグ時ネットワークタブの確認が必要
- ✗ React/Vueに比べコミュニティ規模が小さい
ユースケース
コメントのリアルタイム追加（turbo_stream.append）
インライン編集（turbo_frame）
無限スクロール
フラッシュメッセージの自動追加/削除
リアルタイム通知