【えいちえむあーる】
HMR（ホットモジュールリプレースメント） とは？
最終更新:
💡 ページをリロードせずに変更点だけを即座に反映する開発者の魔法
フロントエンド開発中に、変更したモジュールをページ全体のリロードなしに差し替える仕組み。ViteやwebpackがHMRの仕組みとAPIを提供し、差し替えられる変更なら画面の状態を保ったまま反映できる。
📌 このページのポイント
ひよこ HMRってよく見るけど、ホットリロードと何が違うの？
ペンギン先生 ひよこ ページリロードなしってどういう仕組みで動いてるの？
ペンギン先生 ひよこ Reactで開発するとき感じる「ファイル保存したら即更新される」ってHMRのおかげ？
ペンギン先生 ひよこ HMRが効かないケースってあるの？
もっと詳しく知りたい人へ
保存したのに画面の状態がリセットされるのはなぜ？
変更がHMRで受け入れられずフルリロードになったか、フレームワークがその変更では状態を捨てて作り直す決まりになっているためだよ。webpackでは、どのモジュールも更新を受け入れなかった場合、受け入れられなかったファイル名を示してページ全体をリロードする。ReactのFast Refreshでは、クラスコンポーネントや、ファイルに「// @refresh reset」がある場合などは状態がリセットされる。Reactコンポーネントと定数などを別ファイルに分けると、状態を保ったまま更新されやすくなるよ。
まとめ：ざっくりこれだけ覚えればOK！
「HMR」って出てきたら「コードの変更を、できるだけページを再読み込みせずに反映する開発中の仕組み」と思えればだいたいOK！
📖 おまけ：英語の意味
「Hot Module Replacement」 ＝ ホットモジュールリプレースメント
💬 「ホット（Hot）」は「稼働中のまま」、「モジュールリプレースメント（Module Replacement）」は「モジュールの差し替え」という意味だよ