🌱

【Rails + HTMX】Turboに疲れたから話題のHTMXを使い“ちょいラクになった話”

に公開
JavaScript
Rails
Turbo
erb
htmx
tech

はじめに

はじめまして、
まずRails界隈では、非同期UIといえば Hotwire（Turbo + Stimulus） が主流です。

私もTurboを使ってきましたが、次第にこう思うようになりました。
「もっとシンプルに、HTMLだけで済ませたい、、」

そんな中で出会ったのが HTMXです。
HTMLに属性を追加するだけで非同期通信ができるライブラリです。

HTMXとは

HTMXは、HTML属性だけでAJAX的な挙動が実現できるライブラリです。

CDNで1行追加するだけで使い始められます。

<script src="https://unpkg.com/htmx.org@1.9.10"></script>

Turboとの違い（比較表）

機能 Turbo (Hotwire) HTMX
非同期通信 Turbo Frame, Turbo Stream hx-get, hx-post, hx-on="click:..."etc
DOMの差し替え <turbo-frame> で範囲指定 hx-target, hx-swapで柔軟指定
JS連携 Stimulusでイベント処理 JS不要 or hx-onで完結可能
学習コスト HTMXよりは高い（Hotwire全体） 低い（HTMLだけで始められる）
カスタマイズ性 固定的（Turboの思想に沿う必要あり） 柔軟（HTML主体なので自由度が高い）

実際の使用例

Turboでのコード（Stimulus付き）

▪️一覧画面での削除処理

erb
<!-- view -->
<%= button_to '削除', post_path(post), method: :delete,
      data: { turbo_confirm: "本当に削除しますか？" } %>

・Turboだとこの後、turbo_stream.erb を別で書く必要がある

turbo_stream.erb
<%= turbo_stream.remove "post_#{@post.id}" %>

・Stimulusでフラッシュやカスタムアニメーションをつける場合、追加コード多数

HTMXでのコード

▪️投稿の削除ボタン

erb
<button hx-delete="/posts/<%= post.id %>"
        hx-target="#post-<%= post.id %>"
        hx-swap="outerHTML swap:0.3s"
        hx-confirm="本当に削除しますか？">
  削除
</button>

<div id="post-<%= post.id %>">
  <p><%= post.title %></p>
</div>

・JS不要
・Turbo StreamもStimulusも不要で、これだけで削除＆DOM削除が完了します。

RailsでHTMXを扱うときのポイント

・HTMXの判定：request.headers["HX-Request"] で判別可能
・レスポンス出し分け↓

ruby
def destroy
  @post = Post.find(params[:id])
  @post.destroy

  if request.headers["HX-Request"]
    head :ok # もしくは部分HTMLだけ返す
  else
    redirect_to posts_path, notice: "削除しました"
  end
end

HTMXのメリット

  • ✅ JSを書かずに非同期通信ができる
  • ✅ Turbo Streamのような専用構文が不要
  • ✅ デザイナーや初心者でもHTMLを見て理解しやすい
  • ✅ 非SPAアプリとの親和性が高い

HTMXのデメリット

デメリット・注意点

  • ⚠️ 複雑な状態管理には不向き（SPA的には弱い）
  • ⚠️ 外部JSライブラリとの統合はやや工夫が必要
  • ⚠️ SEO対策が必要な場合は注意（JSによる描画のため）

どんな場面でHTMXが向いているか　（推測）

  • 一覧の更新（追加・削除・編集）
  • 投票やリアクションの即時反映
  • モーダル表示やタブ切り替え
  • フォーム送信後に一部だけ更新

結論と今後

  • Turbo/Stimulusの代替ではなく棲み分けが良い
  • フロントを小さく抑えたい場合にはHTMXは極めて有力
  • サーバー中心設計の人間には「昔ながらの手触り」で扱いやすい
  • 今後は Alpine.js や hyperscript と組み合わせても面白そう

おわりに

Turbo + Stimulusは強力ですが、プロジェクトによっては「やりすぎ」に感じることもあります。
一方、HTMXは「必要最低限だけ動的にしたい」という場面にピッタリのライブラリです。
・Turboで疲れているあなたに、HTMXという“もう一つの選択肢”をおすすめします。

Discussion