女性向けエンジニアスクール
3秒でわかる
ソースを保存した瞬間、アプリを再起動せず変更部分だけを差し替える開発機能。画面の状態を保ったまま結果を確認できるので、試行錯誤の待ち時間がほぼ消えます。
もう少し詳しく
どういうものか
ホットリロードは、開発中にファイルを保存すると、変更されたモジュールだけを動いているアプリへ差し替えて反映する仕組みです。Vite や webpack では HMR（Hot Module Replacement）と呼ばれ、開発サーバーとブラウザが WebSocket でつながっていて、更新されたモジュールだけを送り込みます。
肝は「アプリを止めない」ことです。ページを読み込み直すのではなく、動いているアプリの一部を入れ替えます。
なぜ必要か
価値の中心は速さそのものより、画面の状態が消えないことにあります。
たとえば入力フォームを 3 ページ分進めた先にあるモーダルの、ボタンの余白を 4px 詰めたいとします。全体を再読み込みする方式だと、保存のたびに状態が初期化され、ログインからやり直して同じ場所まで戻る作業が発生します。1 回 40 秒だとしても、微調整を 30 回繰り返せば 20 分が消えます。ホットリロードならモーダルは開いたまま、余白だけが変わります。
具体例
// Vite の HMR <a href="/glossary/api" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">API</a>。モジュールが差し替わる直前に後始末をする
let timer = setInterval(() => console.log('tick'), 1000);
if (import.meta.hot) {
import.meta.hot.dispose(() => {
clearInterval(timer); // これを書かないと差し替えのたびに timer が増える
});
import.meta.hot.accept((newModule) => {
console.log('このモジュールだけ差し替わりました', newModule);
});
}// <a href="/glossary/docker" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">Docker</a> やネットワーク越しのマウントで変更が検知されない場合
export default {
server: {
watch: { usePolling: true, interval: 300 },
},
};つまずきやすいところ
保存しても反映されないときは、原因がだいたい三つに絞れます。編集したファイルがどこからも import されていない、変更内容が差し替えでは処理できずページ全体の再読み込みへ落ちている、コンテナのファイル共有でファイル変更の通知が届いていない、のいずれかです。三つ目はポーリング監視に切り替えると直ります。
React の Fast Refresh には固有の落とし穴があります。コンポーネントを無名のアロー関数のまま default export していると差し替え対象として認識されないことがあります。また useState の初期値を書き換えても、すでに保持されている state は残るため「コードを変えたのに変わらない」と見えます。これは不具合ではなく、状態を保つという仕様どおりの動きです。
似た用語との違い
| 用語 | 動き | 状態 |
|---|---|---|
| ホットリロード | 変わったモジュールだけ差し替え | 保たれる |
| ライブリロード | ページ全体を再読み込み | 消える |
| ホットデプロイ | 本番サーバーを止めずに新版へ入れ替え | 利用者の接続を保つ |
覚え方
ホットは「熱いまま」、つまり動かしたまま。電源を切らずに部品だけ交換するイメージです。
