Electron

Electronとは

Electronは、[[JavaScript]]・HTML・CSSといったWeb技術でデスクトップアプリ(Windows / macOS / Linux)を作るためのフレームワークです。Chromium(ブラウザのエンジン)と [[Node.js]] を1つのアプリに同梱するため、Webアプリのコードをほぼそのまま流用しながら、ファイル操作やネイティブ通知などOSの機能も使えます。VS Code・Slack・Discord・Figmaのデスクトップ版など、身近なアプリの多くがElectron製です。

メインプロセスとレンダラープロセス

Electronアプリは役割の異なる2種類のプロセスで動きます。[[ブラウザのマルチプロセスアーキテクチャ]] をアプリごと持ち込んだ構造です。

プロセス実行環境役割
メインプロセスNode.jsウィンドウの生成、メニュー、ファイルアクセスなどOS側の処理
レンダラープロセスChromium画面の描画。中身は通常のWebアプリ([[React]] などのSPAが多い)

レンダラーは「ただのブラウザ画面」なので、そこで動くコードは [[SPAとMPA]] のSPAとしてWeb版と共通化できます。デスクトップ固有の処理だけをメインプロセスへ寄せるのが基本の設計です。

IPCとpreload — 2つの世界をつなぐ

レンダラーからOSの機能を直接呼べると、表示したWebコンテンツに乗っ取られたときの被害がOS全体へ及びます。そこでElectronは両者を分離し、IPC(プロセス間通信)でメッセージをやり取りします。

  • contextIsolation — レンダラーのJSとElectron内部のAPIを隔離する設定。現在は有効が既定
  • preloadスクリプト — レンダラーの読み込み前に実行され、contextBridge で「許可した関数だけ」を window に公開する。レンダラーは公開された窓口(例: window.electron.saveFile())経由でしかメインプロセスを呼べない

「レンダラーには最小限の窓口しか渡さない」という発想は、Webセキュリティの最小権限の考え方と同じです。

知っておきたい特性

  • 配布サイズが大きい — Chromium+Node.jsを同梱するため、小さなアプリでも数十MB〜になる
  • localStorageはオリジン単位 — [[WebストレージとCookie]] の保存先はオリジンに紐付くため、Web版とElectron版でデータは共有されない。配信方式(ポート)が変わるだけでも別オリジン扱いになる
  • ビルドは2系統 — レンダラー(Web資産)は [[Vite]] など、メインプロセスは [[esbuild]] などで別々にバンドルし、electron-builderのようなツールでインストーラへパッケージングする

初学者向けポイント

  • 「ElectronアプリはブラウザとWebアプリのセット」と捉えると、DevToolsが開けることも、Web版とコードを共有できることも自然に理解できます
  • レンダラーで require('fs') が使えないのは不具合ではなく、分離が正しく効いている状態です。ファイル操作はIPC経由でメインプロセスに依頼します
  • 似た仕組みに [Tauri]があり、配布サイズを抑えたい場合の代替として比較されます

関連技術とのつながり

  • [[ブラウザのマルチプロセスアーキテクチャ]] — メイン/レンダラー分離の下敷きになっている構造
  • [[Node.js]] — メインプロセスの実行環境。OSアクセスの入口
  • [[SPAとMPA]] / [[React]] — レンダラーに載せるWebアプリ本体
  • [[esbuild]] — メインプロセス側のバンドルによく使われる高速ビルドツール
  • [[Tauri]] — 同じ目的でエンジンを同梱しない対案。配布サイズと表示の一貫性がトレードオフになる
Q: Electronのメインプロセスの役割はどれ?
- [x] ウィンドウ生成やファイルアクセスなど、OS側の処理を担当する
- [ ] HTML/CSSを解釈して画面を描画する
- [ ] Webサーバーとして外部にページを公開する
解説: OS寄りの処理はNode.jsで動くメインプロセスが担当し、画面の描画はChromiumで動くレンダラープロセスが担当します。

Q: preloadスクリプトとcontextBridgeを使う目的はどれ?
- [ ] アプリの起動を高速化するため
- [x] レンダラーに許可した窓口だけを公開し、OS機能への直接アクセスを防ぐため
- [ ] レンダラーのバンドルサイズを減らすため
解説: contextIsolationで隔離した上で、preloadが必要最小限の関数だけをwindowに公開します。最小権限の考え方です。

Q: Web版とElectron版でlocalStorageのデータが共有されない理由はどれ?
- [ ] Electronは独自のストレージ形式を使っているため
- [x] localStorageはオリジン単位で保存され、両者は別オリジンになるため
- [ ] Electronではセキュリティ上localStorageが使えないため
解説: localStorageの保存先はオリジン(スキーム・ホスト・ポート)に紐付くため、配信元が違うWeb版とElectron版ではデータが別々になります。