Tech Racho エンジニアの「?」を「!」に。
  • Ruby / Rails関連

Rails: 開発中のライブリロード機能をrails_live_reload gemに替えました

Rails 7: guard-livereload gemで開発中にライブリロードする

以前は上のguard-livereloadというgemを使っていましたが、Rails 7.2をきっかけに、以下のrails_live_reloadを使ってみたところ具合が良かったので、こちらに乗り換えました。

railsjazz/rails_live_reload - GitHub

rails_live_reloadの特徴

ライブリロード機能とは、Webアプリを開発中にファイルを更新したらその場でブラウザを自動リロードして結果を確かめられる機能です。これがあるとないとでは、開発のテンポが大きく変わります。

この種のツールは昔からいろいろありますが、rails_live_reloadは、とにかくセットアップが非常に楽な点がありがたいです↓。

  • Guard gemなどを追加インストールする必要がない
  • Rackミドルウェアの追加や設定も不要
  • Proc.devファイルなどのカスタマイズも不要
  • ブラウザにLiveReload拡張をインストールする必要もない

rails_live_reloadは、何よりもDockerコンテナやdevcontainerで問題なく動く点が大助かりです。ライブリロードのためにDockerでポートを開けたりする必要もありません。devcontainerは近年のRailsでサポートが手厚くなっていて、VS CodeやJetBrains IDEなどで利用可能です。

参考: Dev Containerでの開発ガイド - Railsガイド

参考: Developing inside a Container using Visual Studio Code Remote Development
参考: Dev Container | IntelliJ IDEA ドキュメント

インストールと利用法

Gemfileのdevelopmentグループに追加してbundle installし、bin/rails generate rails_live_reload:installを実行するだけでセットアップが完了します。

# Gemfileより
group :development do
  # 省略
  gem "rails_live_reload"
end

上のジェネレータによって、以下のコンフィグファイルが生成されます。見ての通り、ほとんどはデフォルト設定でそのままいけると思います。

# config/initializers/rails_live_reload.rb

# frozen_string_literal: true

RailsLiveReload.configure do |config|
  # config.url = "/rails/live/reload"

  # Default watched folders & files
  # config.watch %r{app/views/.+\.(erb|haml|slim)$}
  # config.watch %r{(app|vendor)/(assets|javascript)/\w+/(.+\.(css|js|html|png|jpg|ts|jsx)).*}, reload: :always

  # More examples:
  # config.watch %r{app/helpers/.+\.rb}, reload: :always
  # config.watch %r{config/locales/.+\.yml}, reload: :always

  # config.enabled = Rails.env.development?
end if defined?(RailsLiveReload)

VS Code内でRailsが生成したdevcontainerセットアップが動いていれば、この他に何も設定しなくても、VS Codeのdevcontainerのターミナルで普通にbin/rails sを実行するだけで、コードを変更するたびにライブリロードされるようになりました。

たまにライブリロードが動かなくなっても、VS Codeをdevcontainerごと再起動すれば復旧します。

ViewComponentを使っているなら、コンポーネントのディレクトリもパスに追加するとよいでしょう。

そういうわけで、もう他に記事に書くことがないほどです。rails_live_reloadがRails 8のdevcontainerでデフォルトで使えるようになればいいとすら思います。

関連記事

Rails: Evil Martiansが使って選び抜いた夢のgem -- 2024年度版(翻訳)

実践ViewComponent(1): 現代的なRailsフロントエンド構築の心得(翻訳)


関連記事

該当する記事がありません。

CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。