Rails: スムーズなライブリロードを実現するHotwire Sparkをリリースしました（翻訳）
本日、私たちはHotwire SparkというRailsアプリケーション開発用のライブリロードシステムをリリースしました。
開発中のソースコード変更をブラウザで自動的に再読み込みするという問題そのものについては、もう随分前から解決済みです。
このHotwire Sparkでは、このページ再読み込みをできるだけスムーズに行うことに注力したいと思いました。「変更/リロード」というフィードバックループを回すたびにページ全体をがっつり再読み込みするのであれば、開発者がブラウザのページを手動で再読み込みするのと大差ありません。
このページ再読み込みを十分スムーズに行えるようになれば、つまりソースコードで変更を意図した部分だけがきれいに再読み込みされるようになれば、「変更/リロード」のフィードバックループは快適なものになります。
使い方は簡単で、development環境でhotwire-spark gemをインストールすれば完了です。
group :development do
gem "hotwire-spark"
end
これによって、「HTMLコンテンツ」「CSS」「Stimulusコントローラ」の3種類の変更が行われると、現在のページでその部分が更新されます。この3つをスムーズに更新するにはどうすればよいでしょうか？
- HTMLコンテンツ
- ページの
<body>を新しい<body>にモーフィングします。同時に、そのページにあるすべてのStimulusコントローラを切断および再接続します。 - CSS
- 変更されたスタイルシートを再読み込みします。
- Stimulusコントローラ
- 変更されたStimulusコントローラをフェッチして、そのモジュールをStimulus内で置き換え、Stimulusコントローラに再接続します。
Hotwire Sparkの設計は、以下の記事で私たちが推奨している「nobuild」アプローチを輝かせることを意図しています。
変更した部分だけをフェッチして更新するためには、CSSやJavaScriptのアセットを単独のファイルとして配信するのが理想です。アセットのバンドルやツールなどは不要です。Stimulusコントローラでそうしたフロントエンド用のビルドツールを一切使わずにHot Module Replacement（HMR）を実現できたらとてもクールですよね！
2024年はRailsにとって特別な1年でした。今年を締めくくる前にHotwire Sparkを皆さんにお届けできることを心から嬉しく思います。
この冬が皆さんにとって素晴らしいホリデーシーズンとなり、皆さんが2025年を幸先よくスタートできますように。
概要
元サイトの許諾を得て翻訳・公開いたします。
日本語タイトルは内容に即したものにしました。