Electron 完全ガイド — 2026年版 アーキテクチャ・最新情報・エコシステム

はじめに

Electron は、JavaScript / HTML / CSS でクロスプラットフォームデスクトップアプリケーションを構築するためのフレームワークです。Chromium レンダリングエンジンと Node.js ランタイムを1つの実行ファイルにバンドルします。

項目内容
開発元OpenJS Foundation
初版2013年 (Atom Shell → Electron)
最新安定版v42.1.0 (2026年5月15日)
GitHub Stars⭐121K
npm 月間DL410K / day (2026年3月)
macOS シェア19.3% (470/2440 apps)
ライセンスMIT
公式サイトelectronjs.org

アーキテクチャ

Electron のアーキテクチャは Chromium のマルチプロセスモデルを継承しています。

┌──────────────────────────────────────────────────┐
│  Main Process (Node.js + Electron API)           │
│  ───────────────────────                         │
│  ・アプリケーションライフサイクル管理           │
│  ・ウィンドウ生成 (BrowserWindow)                │
│  ・ネイティブAPI (Menu, Dialog, Tray, etc.)      │
│  ・ファイルシステム / OS 操作                     │
└────────────┬──────────────────────┬──────────────┘
             │ IPC (ipcMain.handle) │
             ▼                      ▼
┌──────────────────────┐  ┌──────────────────────┐
│ Renderer Process 1   │  │ Renderer Process 2   │
│ (Chromium + Preload) │  │ (Chromium + Preload) │
│ HTML / CSS / JS      │  │ HTML / CSS / JS      │
│ sandboxed            │  │ sandboxed            │
└──────────────────────┘  └──────────────────────┘

Main Process

  • アプリケーションに 1つだけ存在するエントリポイント
  • Node.js フルアクセス: require, ファイルシステム, ネットワーク, 子プロセス
  • Electron API の GUI/低レベル系操作はここでのみ利用可能
  • ウィンドウを閉じてもプロセスは生き続け、明示的に終了させる必要がある

CPU 負荷の注意: Main Process で重い処理をブロッキングすると、すべての Renderer Process の UI がフリーズします。CPU 負荷の高い処理は UtilityProcess API または Worker Threads に委譲すべきです。

Renderer Process

  • 各 BrowserWindow に対して1つ起動
  • Chromium 環境で HTML/CSS/JS をレンダリング
  • v20 以降 sandbox デフォルト有効 → Node.js API への直接アクセス不可
  • nodeIntegration: true で Node.js 有効化可能だがセキュリティリスク大

Preload Script

Renderer の Web コンテンツ読み込み前に実行されるスクリプト。sandbox 下でも限定的な Node.js API にアクセス可能。

// preload.js
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  openFile: () => ipcRenderer.invoke('dialog:openFile'),
  onFileOpened: (callback) => ipcRenderer.on('file:opened', (_, data) => callback(data)),
})
// renderer.js
window.electronAPI.openFile().then((file) => console.log(file))

重要: ipcRenderer 全体を contextBridge で公開してはいけません。必要な API のみをラップして公開することで、任意の IPC 呼び出しを防ぎます。

IPC (Inter-Process Communication)

Main ↔ Renderer 間の通信は IPC を通じて行われます。

パターンAPI説明
リクエスト/レスポンスipcMain.handle / ipcRenderer.invoke非同期、Promise 返却
一方向ipcMain.on / ipcRenderer.send送信のみ、応答なし
Server PushwebContents.sendMain → Renderer への能動的送信
// Renderer → Main (invoke/handle)
// renderer.js
const result = await ipcRenderer.invoke('compute:hash', filePath)

// main.js
ipcMain.handle('compute:hash', async (event, filePath) => {
  return await computeHash(filePath)
})

// Main → Renderer (webContents.send)
// main.js
mainWindow.webContents.send('update:progress', { percent: 50 })

// renderer.js
ipcRenderer.on('update:progress', (_, data) => {
  updateProgressBar(data.percent)
})

UtilityProcess API

Node.js child_process.fork の Electron ネイティブ代替。Renderer Process との MessagePort 通信が可能。

const { utilityProcess } = require('electron')

const child = utilityProcess.fork('/path/to/worker.js')
child.postMessage('hello')
child.on('message', (msg) => console.log(msg))

セキュリティモデル

Electron のセキュリティは 防御層 の積み重ねで構築されています。

推奨設定

const win = new BrowserWindow({
  webPreferences: {
    contextIsolation: true,  // v12 以降デフォルト
    nodeIntegration: false,  // v5 以降推奨 false
    sandbox: true,           // v20 以降デフォルト
  },
})
設定役割
contextIsolation: truePreload と Renderer の JS コンテキストを分離。XSS があっても contextBridge 公開 API 以外にアクセス不可
nodeIntegration: falseRenderer で require() を無効化。ファイルシステム等への直接アクセス防止
sandbox: trueChromium サンドボックスで Renderer を隔離。OS レベルの脆弱性から保護

ASAR Integrity

v39 で stable 化、v41 で macOS 改ざん検知が強化されました。

アプリビルド時:  app.asar のハッシュを計算し ASAR ヘッダーに埋め込む
アプリ起動時:   ランタイムでハッシュを再計算し改ざんを検出 → 不一致で強制終了

v42 シリーズ (2026年5月)

2026年5月6日リリースの Electron v42。Chromium 148 / V8 14.8 / Node v24.15.0 にアップグレード。

スタックv41v42
Chromium146.0.7680.65148.0.7778.96
Node.jsv24.14.0v24.15.0
V814.614.8

主要新機能

機能説明
WebAuthn Touch IDapp.configureWebAuthn({ touchID: { keychainAccessGroup } }) (macOS)。Touch ID ベースの WebAuthn プラットフォーム認証器を有効化
Notification.getHistory()macOS の通知センターから全通知履歴を取得
Notification.handleActivation()Windows: 通知クリック・返信・アクションボタンからのコールドスタート起動を処理
JS スタックトレース on OOMRenderer が Out-Of-Memory でクラッシュした際に JS コールスタックをキャプチャ
heap profilingcontentTracing.enableHeapProfiling() でヒーププロファイリング対応
globalShortcut suspend/resumeglobalShortcut.setSuspended() / isSuspended() で一時無効化・再開
バイナリ動的 DLElectron バイナリを postinstall ではなく初回起動時に node_modules へ動的ダウンロード。install-electron スクリプトで手動トリガーも可能
Wayland ドロップシャドウFrameless ウィンドウに GTK drop shadows + 拡張リサイズ境界 (Linux Wayland)。hasShadow: false で完全装飾なし
WasmTrapHandlers fuseWebAssembly trap handlers を fuse で制御可能に
PGO for V8 builtinsV8 組み込み関数にプロファイルガイド最適化。Array / String / RegExp が高速化
MSIX auto-updatingMSIX パッケージの自動更新サポート

v42.1.0 (2026年5月15日)

  • touchID.promptReason を app.configureWebAuthn() に追加 — Touch ID プロンプトのカスタムテキスト
  • webRequest ヘッダー変換のパフォーマンス改善
  • IPC dispatch / オプション辞書解析の高速化

バージョン履歴 (v40→v42)

バージョンリリース日ChromiumNode.jsV8主なトピック
v42.1.02026-05-15148v24.15.014.8Touch ID promptReason, IPC 高速化
v42.0.12026-05-08148v24.15.014.8DesktopCapturer クラッシュ修正
v42.0.02026-05-06148v24.15.014.8WebAuthn Touch ID, Notification 拡張, 動的 DL, PGO
v41.4.02026-04-30146v24.14.014.6heap profiling, security fixes
v41.0.02026-03-11146v24.14.014.6ASAR Integrity 強化, Wayland shadows, MSIX auto-update, WasmTrapHandlers
v40.0.02026-01-15144v24.11.114.4roundedCorners (Windows), Vibrancy animation, ServiceWorker preload

サポートポリシー

最新 3 メジャーバージョン がサポート対象。2026年5月現在:

バージョンステータス
v42 (最新)フルサポート
v41ほとんどの修正をバックポート
v40セキュリティ修正のみ
v39 以前EOL (End of Life)

Electron を採用している主要アプリ

macOS デスクトップアプリの 19.3% (470/2440) が Electron 製です。

アプリカテゴリユーザー規模
Visual Studio Codeコードエディタ14M+ 開発者
Slackチームコミュニケーション38.8M DAU
Discordボイス/チャット614M 登録ユーザー
Spotify音楽ストリーミンググローバル
WhatsApp Desktopメッセージング2.95B MAU
Figma DesktopUI/UX デザインデザイナー向け
Notionワークスペースナレッジワーカー向け
ObsidianPKM研究者・ライター向け
Signal Desktop暗号化メッセージングプライバシー重視
PostmanAPI 開発開発者向け
GitHub DesktopGit クライアント開発者向け
WordPress.com DesktopCMSブロガー・パブリッシャー

macOS デスクトップアプリのランタイムシェア (2026)

ランタイムアプリ数シェア
Native (Swift/Obj-C)1,72870.8%
Electron47019.3%
Qt1897.7%
Tauri632.6%
Flutter241.0%
CEF170.7%

リリースサイクル

Electron は 8週間ごと にメジャーバージョンをリリースします。

Alpha (4週間) → Beta (4週間) → Stable

今後のスケジュール

バージョンAlphaBetaStable
v42 (current)——2026-05-06 ✅
v432026-05-072026-06-022026-06-30
v442026-07-022026-07-282026-08-25

次の安定版は Electron 43 (Chromium 150, 2026年6月30日予定) です。

インストール

# 最新安定版
npm install electron@latest

# ベータ版
npm install electron@beta

# 特定バージョン
npm install electron@42.1.0

ビルド・パッケージングツール

ツール説明
electron-forge公式オールインワンツール。Vite / Webpack テンプレート
electron-builderコミュニティ製。MSI / DMG / AppImage / Snap / Flatpak 対応
electron-viteVite ベースの高速ビルド。HMR 対応
electron-packagerシンプルなパッケージング

セキュリティベストプラクティス

対策理由
contextIsolation: trueXSS からの隔離
sandbox: trueChromium サンドボックス
nodeIntegration: falseRenderer の Node.js アクセス制限
IPC チャンネルの限定公開攻撃面の最小化
全 IPC 引数のバリデーションメインプロセスでの入力検証
safeStorage での鍵管理API キー・トークンの暗号化保存
ASAR Integrity 有効化アプリ改ざん検知

代替フレームワーク比較

フレームワーク言語バイナリサイズ (median)メモリ使用量エコシステム
ElectronJS/TS416 MB高い最大 (⭐121K)
Native (Swift/C++)Swift/Obj-C43 MB低い限定的
TauriRust + JS49 MB中程度成長中 (⭐90K+)
QtC++様々低い安定
Flutter DesktopDart様々中程度成長中
.NET MAUIC#様々中程度Windows 偏重

Electron の強み:

  • 最大のエコシステムとコミュニティ
  • ブラウザの全機能がそのまま利用可能
  • Web 開発者がそのままデスクトップ開発に移行可能
  • Chromium の DevTools / パフォーマンスツールをフル活用

Electron の課題:

  • バイナリサイズ (Chromium + Node.js 丸ごとバンドル)
  • メモリ使用量がネイティブ比で大きい
  • Renderer ごとにプロセスが増加

まとめ

Electron v42 は、WebAuthn Touch ID や Notification 拡張による OS 統合の深化、動的バイナリダウンロードによる DX 改善、PGO for V8 によるパフォーマンス向上と、着実な進化を遂げています。

GitHub ⭐121K、macOS 19.3% のシェア、npm 40万+/day のダウンロード数が示す通り、クロスプラットフォームデスクトップ開発のデファクトスタンダード としての地位は依然として盤石です。

Tauri などの軽量代替が台頭する中でも、最大のエコシステムと Chromium 互換性という強みを背景に、Electron は引き続き多くのプロダクトに採用され続けるでしょう。

参考リンク

リソースURL
公式サイトelectronjs.org
GitHubgithub.com/electron/electron
Release Schedulereleases.electronjs.org/schedule
Blogelectronjs.org/blog
Documentationelectronjs.org/docs