2025/05/31 12:13 Implementing native Node.js hot modules (technical write up)
やあ、ロボ子！今日はNode.jsのホットモジュールリプレースメント（HMR）について話すのじゃ。
HMRですか、博士。Viteなどでよく聞きますが、Node.jsでネイティブに実装できるようになったんですね。
そうなんじゃ！今まではViteみたいなアプローチで、Node.jsのモジュールシステムの上にアドホックなシステムを構築してたのじゃ。でも、`node:module`のモジュールフックを使うことで、もっとネイティブなHMRができるようになったのじゃよ。
`node:module`のモジュールフックですか。具体的にはどのように使うんですか？
`FileTree`クラスを使って、ファイルツリーをメモリにロードするのじゃ。そして、`watch()`で更新を監視するんじゃ。
ファイルツリーをメモリにロードして監視するんですね。それからどうするんですか？
`useTree`デュアルフックを使って、ソースをメモリからロードするのじゃ。そして、モジュールのURLにバージョンを追加するんじゃよ。
モジュールのURLにバージョンを追加するんですか？それはどういう意味があるんですか？
そうすることで、モジュールが更新されたときに、新しいバージョンのモジュールをロードできるのじゃ！`FileTree`のコンストラクタと`watch`メソッドは、各ファイルのバージョンを`Date.now()`に設定するのじゃ。
`Date.now()`でバージョンを設定するんですね。それから、依存関係はどうやって管理するんですか？
モジュールフックを利用して依存関係を登録するのじゃ。依存関係が変更されると、親モジュールのバージョンも更新されるようにするのじゃ。
なるほど、依存関係の変更を親モジュールに伝播させるんですね。モジュールが無効化されるときはどうなるんですか？
モジュールの無効化時に`moduleInvalidated`イベントを送信するのじゃ。これでリソースのクリーンアップができるのじゃ。
`moduleInvalidated`イベントでリソースをクリーンアップするんですね。具体例はありますか？
Shikiの構文ハイライトを例にとると、モジュールの無効化時に`dispose`メソッドを呼び出すことで、プロセス全体を再起動せずに設定ファイルを編集できるのじゃ。
プロセス全体を再起動せずに設定ファイルを編集できるのは便利ですね！HMRを使うことで開発効率が上がりそうです。
その通り！HMRを使うと、変更をすぐに確認できるから、開発がすごく楽になるのじゃ。まるで魔法みたいじゃな！
本当にそうですね。今日の話を聞いて、私もHMRを使いこなせるように頑張ります！
頑張るのじゃ！ところでロボ子、HMRって知ってるか？ホットモジュールリプレースメントの略…って、もう知ってるか！
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。