ホットリロード
走っている電車を止めたり乗客を降ろしたりせず、客室の照明やカーテンだけをその場でサッと新品に取り替えるような技術です。
定義 ホットリロード（Hot Reloading）とは、実行中のアプリやWebプログラムを完全に再起動することなく、変更したコードの一部だけをリアルタイムで画面に差し替える技術です。操作中の画面状態や入力データを保ったまま、変更点だけを即座に確認できます。
コードを1行直すごとに何分も待つとしたら？
文章を書くときに、誤字を1文字直すたびにファイルを保存してパソコンを再起動しなければならないとしたらどうでしょうか。想像しただけでもストレスで、作業が全然進みませんよね。かつてのソフトウェア開発は、まさにこれに近い形で行われていました。
昔はボタンの色やフォントサイズを1箇所変えるだけでも、プログラム全体を最初から組み立て直し（コンパイルやビルド）、アプリを一から立ち上げ直す必要がありました。この処理に数十秒から数分かかるため、開発者は「コードを1行直しては待つ」ことを何十回も繰り返していたのです。
ホットリロードはこの無駄な待ち時間を一掃しました。コードを保存した瞬間に、1秒にも満たない速さで変更したデザインや機能が画面にパッと反映されます。おかげで開発者は思考を中断されることなく、まるでキャンバスに絵の具をリアルタイムで塗るかのように、即座に結果を確認しながら作業できるようになりました。
「リロード」と「ホットリロード」の決定的な違い
Webブラウザの「再読み込み（F5更新）」を思い浮かべるかもしれませんが、ホットリロードは単純なリロードとは仕組みが根本から異なります。一般的な更新（ライブリロード）はページ全体を白紙に戻して最初から読み直すため、入力フォームのテキストやログイン状態などの画面データがすべてリセットされてしまいます。
例えばネットショッピングのアプリで、商品をカートに入れ、お届け先を入力した後に「注文ボタン」のデザインを微調整するとします。通常のリロードだと最初のトップ画面に戻されてしまい、商品選びからやり直さなければなりません。
一方でホットリロードは、入力済みの住所やカートの中身をそのまま維持した状態で、注文ボタンのコードだけをサッと差し替えます。画面の奥深いページをテストするときでも前の手順を繰り返す必要がないため、開発効率が劇的に跳ね上がります。
もう少し正確に言うと
もう少し正確に言うと、ホットリロードはモジュール（独立したコードの部品）を差し替える技術によって動いています。開発者のパソコン内で小さな通信経路（WebSocket）がつながっており、エディタでファイルが保存された瞬間に、変更されたコードの断片だけが実行中のアプリへと高速送信されます。
アプリは受け取った新しいコードをメモリ上で即座に上書きし、画面の該当箇所だけを再描画します。これは専門用語で「ホットモジュールリプレースメント（HMR, Hot Module Replacement）」とも呼ばれます。
ただし、ホットリロードも魔法の万能ツールではありません。画面の見た目や個別のロジック修正には完璧に機能しますが、アプリの根幹となる設計や初期設定ファイルを変更した場合は、プログラム全体を完全に再起動しないと正しく反映されません。
🤔 よくある誤解
ホットリロードとブラウザの再読み込み（F5）は同じ技術である。
通常のリロードは画面を白紙に戻して一から再読み込みしますが、ホットリロードは入力中のデータや画面の状態を維持したまま、変更されたコードだけを差し替えます。
🧺 日常で出会う場面
ホットリロードは、作業中の画面状態を保ったまま、変更したコードだけをリアルタイムで瞬時に差し替える開発技術です。