Hotwire（Turbo & Stimulus）

Hotwire（Rails 7 以降の標準フロントエンド）

Hotwire（HTML Over The Wire）は、Rails 7 で標準採用された「JavaScript を最小限に抑えながら SPA のような操作感を実現する仕組み」です。Rails に深く統合されており、特に以下の構成要素が中心になります。

• Turbo（Turbo Drive / Turbo Frames / Turbo Streams）
• Stimulus（軽量 JavaScript フレームワーク）

Rails 5〜6 時代と比較すると、フロントエンド構成やページ遷移の仕組みが大幅に変化しました。

---

Hotwire を構成する技術

1. Turbo Drive

通常のリンクやフォーム送信を Ajax 化し、ページ全体を再描画せず高速な遷移を実現します。

特徴

• ページ遷移が高速
• 履歴管理も自動
• Rails 4〜5 時代の Turbolinks の後継

---

2. Turbo Frames

ページの一部分だけをロード・更新できる仕組みです。

例：部分更新

＜turbo-frame id="post_1">
  ＜%= render @post %>
＜/turbo-frame>

用途

• 一部のみ切り替える UI（タブ、部分更新フォーム）
• ネストしたコンテンツの更新
• 編集フォームのインライン切り替え

---

3. Turbo Streams

サーバー側から DOM 操作（append, remove, replace など）を指示できます。

例：投稿を追加

＜%= turbo_stream.append "posts" do %>
  ＜%= render @post %>
＜% end %>

特徴

• サーバー側の ERB だけで DOM 操作が書ける
• ActionCable と組み合わせればリアルタイム更新も簡単
• クライアント側の JS が基本不要

---

4. Stimulus

最小限の JavaScript を HTML アノテーションで扱う仕組み。

例

HTML側

＜div data-controller="hello">
  ＜button data-action="click->hello#greet">Click＜/button>
＜/div>

JS側

export default class extends Controller {
  greet() {
    alert("Hello!");
  }
}

特徴

• HTML ベースで直感的
• jQuery 的な “小さな JS” を置き換える
• Rails と相性がいい

---

Hotwire の強み（Rails 3〜6 時代との差分）

1. JavaScript の量が大幅減

React/Vue を使わず、ERB 中心で UI を組める。

2. 高速なページ遷移

Turbo Drive が SPA に近い体験を実現。

3. Rails との統合が強力

• scaffold が Turbo 対応
• Turbo Streams がサーバー側 ERB で書ける
• ActionCable と自然に統合できる

4. SEO に強い

HTML を返す仕組みのため、検索エンジンと相性がよい。

---

Hotwire の弱み・向かないケース

1. 複雑な SPA

状態管理が多い場合は React や Vue が有利。

2. UI 状態が多いアプリ

ゲーム、エディタ、地図アプリなどは JS フレームワークが向く。

3. Turbo の独特な挙動を理解する必要

• Turbo Drive のキャッシュ
• Frames の入れ子
• Streams の ActionCable 連携

---

導入方法（Rails 7 以降）

Rails 7 以降ではデフォルトで Hotwire がセットアップされています。

rails new myapp

Rails 6.1 以前でも Hotwire gem + JavaScript パッケージを追加すれば導入可能。

---

使い方チュートリアル

1. Turbo Drive

リンク・フォームが自動で高速化される。

2. Turbo Frames

部分的な UI 更新を簡単に実装できる。

例：インライン編集画面など

＜turbo-frame id="edit_post_1">
  ＜%= render "form", post: @post %>
＜/turbo-frame>

3. Turbo Streams

リアルタイム更新や DOM 操作をサーバー側から指示。

＜%= turbo_stream.replace @post do %>
  ＜%= render @post %>
＜% end %>

---

他フレームワークとの比較（簡易）

分類	Hotwire	React / Vue
規模	小〜中	中〜大
状態管理	弱い	強力
SEO	強い	場合による
リアルタイム	標準で簡単	追加ライブラリ必要
学習コスト	低い	中〜高
Rails 統合	最強	API 化が必要