HMR (Hot Module Replacement)

定義

HMR (Hot Module Replacement) は、アプリケーションを実行したまま、変更のあったモジュールだけを追加・置換・削除する開発時の仕組みです。
ページ全体をリロードしないため、入力途中のフォームや開いているモーダルといった実行中の状態が保たれたまま、変更が画面に反映されます。

詳細

開発サーバーはファイルの変更を監視し、差分を WebSocket などでブラウザへ送ります。
ブラウザ側のランタイムは受け取ったモジュールを差し替え、そのモジュールが用意した更新ハンドラを呼びます。Vite では import.meta.hot、webpack では module.hot がその API にあたります。

CSS はローダー側が HMR に対応しているため、ほとんど設定なしで差し替わります。
一方 JavaScript は、更新を受け入れる側のコードが必要です。
React や Vue では各フレームワークのプラグインがこれを肩代わりするので、利用者が直接書く機会は多くありません。

よくある誤解

• 「HMR とホットリロードは同じ」：ページ全体を再読み込みするライブリロードは状態が消えます。
  HMR は差し替えなので状態が残る点が違います。
• 「HMR が効けば常に最新設定が反映される」：vite.config.ts や .env のように読み込みが起動時に限られるファイルは対象外で、開発サーバーの再起動が必要です。

関連

反映されないときの原因は Vite で HMR (Hot Module Replacement) が反映されない、モジュール形式の前提は ESM を参照してください。