【ほっとりろーど】

Hot Reload(ホットリロード) とは?

最終更新:
💡 書いたコードがすぐ画面に反映される「魔法のミラー」

開発中にコードを保存すると、アプリを再起動せずに変更を実行中の画面へ反映する仕組み。対応している変更なら画面の状態を保てるが、反映できない変更では再読み込みや再起動が必要になる。

📌 このページのポイント
ホットリロードの流れ コード編集 ファイルを保存 変更検知 監視ツールが検知 自動反映 差分だけ更新 ブラウザ更新 即座に表示変更 繰り返し(自動サイクル) 再起動不要! 対応する変更ならすぐ反映 従来: 停止→修正 →再起動→確認 変更の種類によっては、ページの再読み込みや再起動が必要です。
ホットリロードのイメージ
ひよこ ひよこ
Hot Reloadって何?
ペンギン先生 ペンギン先生
開発中にコードを書き換えて保存すると、動いているアプリの画面に変更が自動で反映される仕組みだよ。いちいちアプリを止めて起動し直さなくていいんだ。
ひよこ ひよこ
普通のリロード(ページ更新)と何が違うの?
ペンギン先生 ペンギン先生
普通のリロードはページ全体を読み込み直すから、フォームの入力内容などがリセットされちゃう。webpackやViteのHMRは変更したモジュールまわりだけを更新するから、対応しているフレームワークなら画面の状態を保ったまま更新できるんだよ。
ひよこ ひよこ
どうやって使うの?
ペンギン先生 ペンギン先生
Viteやwebpackの開発サーバー、Flutterなどの開発ツールに組み込まれていることが多いよ。開発サーバーを起動しておけば、保存するだけで反映される設定になっていることが多いんだ。
ひよこ ひよこ
どんな変更でも状態が残るの?
ペンギン先生 ペンギン先生
そうとは限らないよ。たとえばNext.jsのFast Refreshでは、関数コンポーネントの状態は保たれるけど、クラスコンポーネントの状態はリセットされる。React以外の場所からも読み込まれているファイルを編集すると、ページ全体の再読み込みに切り替わるんだ。
ひよこ ひよこ
Flutterにもホットリロードがあるって聞いたけど?
ペンギン先生 ペンギン先生
あるよ。FlutterのHot Reloadは状態を保ったままコードを差し替えるけど、main()やinitState()は再実行しない。状態を捨てて最初から実行し直すのはHot Restartと呼んで区別しているんだ。反映されないと感じたら、どちらを使うべきかを確認しよう。
もっと詳しく知りたい人へ

Hot Reloadで変更が反映されないときはどうすればいい?

反映できない種類の変更かもしれないよ。Flutterでは、main()やinitState()の中身、グローバル変数の初期値、enumをクラスに変える変更などはHot Reloadで反映されず、Hot Restart(状態を捨てて再実行)が必要になる。KotlinやSwiftなどのネイティブコードの変更は、アプリの完全な再起動が必要だよ。Webのwebpackでは、変更を受け付けるモジュールがないと更新が中止され、開発サーバーがページ全体の再読み込みに切り替えるんだ。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「Hot Reload」って出てきたら「保存したコードを、アプリを再起動せずに実行中の画面へ反映する仕組み」と思えればだいたいOK!
📖 おまけ:英語の意味
「Hot Reload」 = 動かしたままの再読み込み
💬 「Hot」は「システムを止めずに動かしたまま」という意味で、「Reload」は「再読み込み」。つまり動いているまま新しいコードを読み込むということだよ

参考資料

← 用語集にもどる