Electronってなんだ？〜君のPCを重くしている真犯人の正体〜

Posted at 2025-12-16

ねらい・対象・ゴール・TL;DR

ねらい: 「Electron」という言葉を聞いたことはあるけど正体がよくわからない人に、その全貌を明らかにする

対象:

「なんでSlackってこんなにメモリ食うの？」と思ったことがある人
デスクトップアプリ開発に興味があるフロントエンドエンジニア
Web技術でネイティブアプリを作りたい人

ゴール: Electronの仕組みを理解し、メリット・デメリットを把握する

TL;DR: ElectronはChromium + Node.jsを同梱してWeb技術でデスクトップアプリを作るフレームワーク。VS Code、Slack、Discordなど有名アプリが採用。クロスプラットフォーム開発が楽だが、アプリが重い（100MB〜、メモリ200-400MB）のが弱点。軽量代替のTauriも台頭中。

はじめに：君のPCが重い理由、実はあいつらのせいかも

朝、PCを起動する。Slackが立ち上がる。Discordも。VS Codeでコードを書き始める。

ふと気づくとメモリ使用量が8GBを超えている。Chrome開いただけなのに。なんで？

答えは簡単。君のPCには実質「Chromeが4つ」動いている。

Slack = Chrome（の中身）
Discord = Chrome（の中身）
VS Code = Chrome（の中身）
そして本物のChrome

これ、全部「Electron」ってやつのせいなんだ。

Electronとは何者か

基本情報

"Electron (formerly known as Atom Shell) is a free and open-source software framework developed and maintained by OpenJS Foundation."

— Wikipedia「Electron (software framework)」より

和訳: ElectronはOpenJS Foundationが開発・メンテナンスするフリーかつオープンソースのソフトウェアフレームワークである。

ElectronはもともとGitHubが2013年に開発したもので、テキストエディタ「Atom」を作るために生まれた。Cheng Zhaoというエンジニアが中心となって開発し、当初は「Atom Shell」と呼ばれていた。

アーキテクチャ：Chromium + Node.js

"It is basically a blend of two incredibly popular technologies: Node.JS and Chromium."

— Brainhub記事より

和訳: 基本的に、2つの非常に人気のあるテクノロジー、Node.jsとChromiumの融合体である。

これがElectronの正体だ。

Chromium: Google Chrome のオープンソース版。HTMLをレンダリングするブラウザエンジン
Node.js: JavaScript をサーバーサイドで動かすランタイム

この2つをくっつけて、1つの実行ファイルにパッケージングする。だからElectronアプリを動かすということは、実質的にChromeブラウザを1つ起動しているのと同じなんだ。

プロセスモデル

"Electron implements a multi-process model composed of the main and renderer processes, which is similar to the Chromium browser."

— LogRocket Blog記事より

和訳: ElectronはChromiumブラウザと同様に、メインプロセスとレンダラープロセスで構成されるマルチプロセスモデルを実装している。

Electronアプリには2種類のプロセスがある：

メインプロセス: アプリ全体を管理。ウィンドウの作成、OSとのやり取りなどを担当（Node.js環境）
レンダラープロセス: ウィンドウごとに1つ。UIを描画する（Chromium環境）

ウィンドウを3つ開けば、レンダラープロセスも3つ。だからメモリがどんどん増える。

Electronで作られた有名アプリたち

Stack Overflowの調査によると、Electronは依然としてデスクトップアプリ開発フレームワークとして最も人気がある。

"Electron has earned over 119K stars on GitHub, proving its massive popularity among developers for building high performance, cross platform desktop applications."

— eSpark Info記事より

和訳: ElectronはGitHubで11万9000以上のスターを獲得しており、高性能なクロスプラットフォームデスクトップアプリケーション構築において開発者の間で圧倒的な人気を証明している。

主要なElectronアプリ一覧

アプリ	カテゴリ	特徴
Visual Studio Code	コードエディタ	Microsoft製。世界で最も使われているエディタ
Slack	ビジネスチャット	フレームレスアーキテクチャ採用
Discord	ゲーマー向けチャット	2024年時点で月間アクティブユーザー1億9620万人
WhatsApp Desktop	メッセンジャー	モバイル版の成功をデスクトップへ
Notion	生産性ツール	ドキュメント・データベース統合
Figma Desktop	デザインツール	本体はWebだがデスクトップ版も
GitHub Desktop	Git GUI	GitHubの公式クライアント
Obsidian	ノートアプリ	Markdownベースのナレッジベース
Streamlabs OBS	配信ソフト	ストリーマー向け
Twitch	配信プラットフォーム	デスクトップアプリ版

錚々たる顔ぶれ。普段使っているアプリの半分以上がElectronかもしれない。

Electronのメリット：なぜこんなに普及したのか

メリット1：クロスプラットフォーム

"Write your code once and deploy it across multiple platforms without modification."

— Medium記事（Swabhab Swarup Panigrahi）より

和訳: 一度コードを書けば、修正なしで複数のプラットフォームにデプロイできる。

Windows、macOS、Linux。3つのOSに対応したアプリを作ろうと思ったら、普通は3種類のコードを書く必要がある。SwiftでmacOS版、C#でWindows版、GTKでLinux版...。

Electronなら1つのコードベースで済む。これは開発コストの面で革命的だった。

メリット2：Web技術がそのまま使える

"Your HTML handles structure, CSS manages styling and animations, and JavaScript powers interactivity — just like on the web."

— DEV Community記事より

和訳: HTMLが構造を担当し、CSSがスタイリングとアニメーションを管理し、JavaScriptがインタラクティブ性を実現する。Webと全く同じだ。

フロントエンドエンジニアの持つスキルセットがそのまま活きる。React、Vue、Angularで書いたWebアプリを、ちょっとした修正でデスクトップアプリにできる。

新しい言語を学ばなくていい。これが参入障壁を劇的に下げた。

メリット3：豊富なエコシステム

"Use any package from the rich npm ecosystem, or write your own native add-on code to extend Electron."

— Electron公式サイトより

和訳: 豊富なnpmエコシステムの任意のパッケージを使用するか、独自のネイティブアドオンコードを書いてElectronを拡張できる。

npmには200万以上のパッケージがある。その全てがElectronアプリで使える。車輪の再発明をする必要がない。

メリット4：配布が簡単

"Developers can package their applications into executable files for Windows (.exe), macOS (.dmg), and Linux (.deb, .rpm) with minimal setup."

— Flatirons記事より

和訳: 開発者は最小限のセットアップで、アプリケーションをWindows用.exe、macOS用.dmg、Linux用.deb/.rpm形式の実行ファイルにパッケージングできる。

electron-builderやelectron-forgeといったツールを使えば、各OS向けのインストーラーが簡単に作れる。

Electronのデメリット：なぜ嫌われるのか

光あれば影あり。Electronには明確な弱点がある。

デメリット1：アプリサイズがデカすぎる

Chromiumをまるごと同梱するので、最小でも80-120MBになる。「Hello World」を表示するだけのアプリでもこのサイズ。

比較対象として、Rust製のTauriなら同じことが2.5-3MBでできる。30-40倍の差だ。

デメリット2：メモリ消費が激しい

"Electron apps often consume 200-400MB RAM on startup."

— SoftwareLogic記事より

和訳: Electronアプリは起動時に200-400MBのRAMを消費することが多い。

アイドル状態でもこの消費量。複数のElectronアプリを同時に起動すると、メモリ8GBのPCでは厳しくなる。

デメリット3：起動が遅い

Chromiumの初期化に時間がかかるため、起動に1-2秒かかることが多い。ネイティブアプリなら0.5秒以下で起動するものも珍しくない。

デメリット4：バッテリー消費

常にChromiumエンジンが動いているので、バックグラウンドプロセスがCPUを使い続ける。ノートPCのバッテリーには優しくない。

デメリット5：セキュリティ上の懸念

"With Electron you have full access to Node APIs, so a hacker could easily exploit the very powerful Node APIs."

— Levminer記事より

和訳: Electronでは Node APIにフルアクセスできるため、ハッカーがその強力なNode APIを簡単に悪用できる可能性がある。

レンダラープロセスからNode.jsのAPIにアクセスできる設定にしていると、悪意あるスクリプトがファイルシステムを操作できてしまう。適切な設定（contextIsolation、nodeIntegration無効化など）が必須。

2025年のElectron：バージョン32.0.0の現在地

"The latest version (32.0.0 as of 2025) includes Chromium 128, V8 12.8, and Node.js 20.16.0, representing years of refinement and optimization."

— DEV Community記事より

和訳: 2025年時点の最新バージョン32.0.0にはChromium 128、V8 12.8、Node.js 20.16.0が含まれており、長年の改良と最適化の結果を反映している。

Electronは成熟したフレームワークになった。セキュリティベストプラクティスも確立され、Context IsolationやContent Security Policyの適用が標準になっている。

現在のベストプラクティス

// main.js - セキュアな設定例
const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: false,      // レンダラーからNode.js無効化
    contextIsolation: true,      // コンテキスト分離
    sandbox: true,               // サンドボックス化
    preload: path.join(__dirname, 'preload.js')  // プリロードスクリプト経由
  }
});

Electronの代替：Tauriという選択肢

Electronの重さに不満を持つ開発者は多い。そこで台頭してきたのがTauriだ。

項目	Electron	Tauri
バイナリサイズ	80-120MB	2.5-10MB
メモリ使用量	200-400MB	30-40MB
起動時間	1-2秒	0.5秒未満
バックエンド言語	JavaScript (Node.js)	Rust
ブラウザエンジン	Chromium同梱	OSのWebView使用

Tauriの詳細は別記事「Tauri(Rust)ってなんだ？〜Apple Silicon勢の救世主なのか？〜」を参照してほしい。

ただし、TauriにはRust学習のハードルがある。チームにRustを書ける人がいない場合、Electronの方が生産性は高い。

実践：最小構成のElectronアプリを作る

理論ばかりじゃ面白くない。手を動かしてみよう。

前提条件

# Node.jsがインストールされていること
node --version  # v18以上推奨

プロジェクト作成

# Electron Forgeを使うのが最も簡単
npm init electron-app@latest my-app

# 対話形式でテンプレート選択
# "base" を選択（最小構成）

ディレクトリ構造

my-app/
├── package.json
├── src/
│   ├── main.js        # メインプロセス
│   ├── preload.js     # プリロードスクリプト
│   └── index.html     # UI
└── forge.config.js    # ビルド設定

起動

cd my-app
npm start

ウィンドウが立ち上がれば成功。これがElectronアプリの基本形だ。

ビルド

npm run make

out/make/フォルダに、現在のOS向けのインストーラーが生成される。

Electronを使うべきか？判断のフローチャート

Q1: クロスプラットフォーム（Windows/macOS/Linux）対応が必要？
    → No → ネイティブ開発（Swift/WinUI等）を検討
    → Yes → Q2へ

Q2: チームにWeb開発経験者がいる？
    → No → Flutter/Qt等を検討
    → Yes → Q3へ

Q3: アプリのサイズ・メモリ効率が最優先？
    → Yes → Tauriを検討
    → No → Q4へ

Q4: Node.jsのnpmエコシステムを活用したい？
    → Yes → Electron採用
    → No → Tauri/Flutter等を検討

まとめ：Electronは「必要悪」か「万能薬」か

正直に言おう。Electronは重い。メモリを食う。バッテリーにも優しくない。

でも、それでも使われ続けている理由がある。

Web開発のスキルがそのまま使える
クロスプラットフォーム開発が劇的に楽になる
エコシステムが圧倒的に充実している
VS Code、Slack、Discordが証明したプロダクションクオリティ

"Electron in 2025 is a mature, powerful platform for desktop application development."

— DEV Community記事より

和訳: 2025年のElectronは、デスクトップアプリケーション開発のための成熟した強力なプラットフォームである。

Tauriのような軽量代替も台頭してきているけど、「今すぐデスクトップアプリを作りたい」なら、Electronは依然として最も現実的な選択肢の一つだ。

君のPCが重いのはElectronのせいかもしれない。でも、そのおかげで便利なアプリがたくさん生まれたのも事実。

愛憎入り混じる関係。それがElectronなのだ。

参考リンク

この記事が役に立ったら、ぜひフォローといいねをお願いします。Electron開発で困ったことがあればコメント欄でどうぞ。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up