Electronで「モジュールを再読み込みしたのに反映されない」

Electronアプリの保存処理にフィールドを1つ追加し、いつものように画面をリロードしました。新しい入力欄は表示され、操作もできます。ところが保存されたJSONを開くと、そのフィールドだけが入っていませんでした。

画面は新しく、保存処理は古いまま。この食い違いは、Electronのレンダラーとメインプロセスで、リロードされる範囲が違うために起きます。ブラウザの感覚で確認していると、意外と長く気づけません。

メインプロセスは画面リロードで更新されない

レンダラープロセス（HTML、CSS、クライアントJS）
  → リロードで反映される

メインプロセス（Node側モジュール）
  → 起動時に読み込まれたまま

保存ロジックの store.mjs がメインプロセス側なら、画面だけをリロードしても古いモジュールが使われ続けます。新しいUIと古い保存スキーマが同時に動くため、見た目だけでは気づけません。

HTML、CSS、レンダラー側JavaScriptはリロードで反映できます。一方、保存処理、スキーマ、IPCやAPIハンドラ、メインプロセス設定を変えた場合はアプリ自体を再起動します。

保存されたデータを確認する

保存系を変更したときは次の順で確認します。

1. アプリまたは管理サーバーを再起動する

2. 実際に新しいデータを保存する

3. 保存されたファイルを開き、新しいフィールドを確認する

画面表示だけでは、古い保存処理が動いていることを検出できません。

開発時はメイン側だけ監視する

{
  "scripts": {
    "dev": "electron .",
    "dev:watch": "nodemon --watch src/main --exec 'electron .'"
  }
}

いまはメインプロセス側の変更だけでアプリ全体を再起動し、レンダラー側は通常のリロードで確認しています。何でも再起動するより待ち時間が少なく、古い保存処理だけが残る状態も避けられました。

「リロードしたのに変わらない」と感じたら、変更したファイル名より先に、どちらのプロセスがそれを読み込んでいるかを見る。保存されたJSONを確認するところまでを動作確認に含めると、この食い違いに振り回されにくくなります。

今回は以上です。