created: 2024-07-09T02:20:43.708Z

Electron のプロセスと IPC 入門

リリースされて 10 年くらい経ってだいぶ枯れてそうなので入門する気になった。

プロセスモデル

Electron アプリケーションは 3 種類プロセスを立てて実行される。(プリロードスクリプトは Chromium のプロセスの一部かも)

  • メインプロセス
    • nodejs のプロセスなので OS の機能にひととおりアクセスできる
  • レンダラープロセス
    • chromium のプロセスなので、OS の機能にはアクセスできない
    • html/css/js で UI を表示するのはこのプロセス
  • プリロードスクリプト
    • レンダラープロセスとメインプロセスの橋渡しをするためのプロセス
    • nodejs の機能の一部分だけ使えるようになっている
    • Chrome 拡張の content_scripts あたりに雰囲気が近い

「基本的にはクラサバで、Chromium を表で動かして、その裏で Nodejs を動かすんだよね」と思ってたが、セキュリティのためのアレでもう 1 つ緩衝材になるプロセス(プリロードスクリプト)があるんですって。

IPC

プロセス間通信(Inter-Process Communication)で情報やイベントをやりとりする。

やりとりの実装は最小構成だとこんな感じ。

mainProcess.ts

import { ipcMain } from "electron";
ipcMain.on("drop-file", (event, fileinfo) => {
  console.log(JSON.stringify(fileinfo));
});

preload.ts

import { contextBridge, ipcRenderer } from "electron";
contextBridge.exposeInMainWorld("electron", {
  dropFile: (filename: string) => ipcRenderer.send("drop-file", filename),
});

renderer.ts

IPC だが、文字列でなくとも(js のオブジェクトでも) send することができた。

window.electron.dropFile({ filename });

参考

人物表現辞典
[ad] 人物表現辞典
中村 明 (単行本)