Railsで自動リロードを導入しよう
NuxtやReactで開発していると、ファイルを保存した瞬間にブラウザが自動で更新されて、すぐ動作確認できますよね。
Railsでも同じことができないか調べてみたので、まとめてみました。
ライブリロードとホットリロードの違い
ファイルを保存した瞬間にブラウザが自動で更新される仕組みのことを、ライブリロードやホットリロードと呼びます。
それぞれ動きが異なります。
- ライブリロード：ファイル変更を検知してページ全体を再読み込み
- ホットリロード（HMR）：変更したファイルだけ差し替え、状態維持
| ライブリロード | ホットリロード（HMR） | |
|---|---|---|
| 仕組み | ページ全体を再読み込み | 変更箇所だけ差し替え |
| 状態維持 | リセットされる | 維持される |
| 速度 | やや遅い | 高速 |
おすすめGem比較
hotwire-spark
- ライブリロード
- importmapのみ対応
- jsbundling/esbuild環境では使えない
- Rails公式に近い立ち位置（37signals製）
hotwire-livereload
- ライブリロード
- jsbundling/esbuild対応
- 設定が最小限で動く
vite_rails
- HMR（Hot Module Replacement）
- CSS/JSをリロードなしで即反映・状態維持
- TailwindやBootstrap中心の構成だとほぼ恩恵なし
- ViewはHMR対象外（ライブリロード系との併用推奨）
- React・Vue・TypeScriptと組み合わせると特に効果的
構成別おすすめ
| 構成 | おすすめ |
|---|---|
| Rails + Hotwire + importmap | hotwire-spark |
| Rails + Hotwire + jsbundling | hotwire-livereload |
| Rails + Vue/React + TypeScript | vite_rails |
| Tailwind中心 | hotwire-livereload（vite_railsの恩恵薄い） |
注意点
Ruby 4.0環境では動作しない可能性あり（2026年6月時点）
Ruby 4.0環境ではhotwire-livereloadを使うことをおすすめします。
hotwire-sparkはimportmapのみサポート
GitHubのissueにて、現時点ではimportmapのみサポートしているとのことです。
参考：https://github.com/hotwired/spark/issues/12
まとめ
- Tailwind + jsbundling構成 → hotwire-livereload一択
- Vue/React使うなら → vite_rails + hotwire-livereloadの併用
実際に使ってみると開発は劇的に快適になりました。
もっと早くに知っていたかった……！
Railsや周辺のGemは日々進化しています。また便利なライブラリがあれば紹介しようと思います。