Electronは、WebブラウザのレンダリングエンジンChromiumとサーバーサイドJavaScript実行環境Node.jsをひとつにまとめ、Windows・macOS・Linuxで動くデスクトップアプリをHTML/CSS/JavaScriptで作れるようにしたフレームワークです。2013年4月にGitHub社が自社のテキストエディタ「Atom」のために「Atom Shell」として開発を開始し、2015年4月にElectronへ改称しました。Visual Studio Code、Slack、Discord、Notion、Microsoft Teamsなど、現代の主要デスクトップアプリの多くがElectron上で動いており、Web開発者がそのままデスクトップへ展開できる定番経路になっています。
この記事の目次
- Chromium + Node.js の二段構え
- Atom Shell から Electron へ
- 現場での使われ方
- Tauri・ネイティブとの違い
- まとめ
Chromium + Node.js の二段構え
Electronのアーキテクチャは大きく「メインプロセス」と「レンダラープロセス」の二層に分かれます。メインプロセスはNode.jsランタイムを抱え、ウィンドウ作成・ファイルI/O・OSメニュー・ダイアログなど、OS資源へのアクセス権を持ちます。レンダラープロセスはChromiumをそのまま動かす環境で、HTMLとCSSで画面を描き、JavaScriptでDOMを操作します。この二つはIPC（プロセス間通信）でやり取りし、安全性のためにcontextIsolationやsandboxといった隔離機構が既定化されてきました。
Chromiumが組み込まれているおかげで、Web標準のCSS・WebGL・Web Audio・WebRTCなどがそのまま使えます。Node.jsが居ることで、fsモジュールでローカルファイルを扱ったり、子プロセスを起動したり、ネイティブアドオン（N-API）でC++コードを呼び出したりできます。「Webの開発体験」と「デスクトップの能力」を一本のJavaScriptコードベースに同居させたのがElectron最大の発明で、現代の多くの生産性アプリがこの設計思想に乗っています。
Atom Shell から Electron へ
プロジェクトの起源は2013年4月、GitHubの開発者チェン・チェンユー（Cheng Zhao）らによる「Atom Shell」です。GitHubが社内で開発していたテキストエディタAtomを動かすための基盤として書き起こされ、Atomのオープンソース化（2014年）と同時に注目が高まりました。Atom以外のアプリにも応用したいという需要に応える形で、2015年4月に名称を「Electron」へ改め、独立したプロダクトとして配布されるようになります。
その後はMicrosoftがElectronを土台にVisual Studio Code（2015年プレビュー、2016年正式版）を公開し一気に普及。Slack、Discord、WhatsApp Desktop、Figmaのデスクトップ版など採用が広がりました。AtomそのものはGitHubのMicrosoft買収を経て、2022年12月に開発・サポート終了となりましたが、Electronはその後も独立した活発な開発を続けています。現在はOpenJS Foundationの管理下にあり、ChromiumとNode.jsの最新版に追従する形で年に何度かメジャーバージョンを更新しています。
現場での使われ方
Electronが選ばれる代表的なシナリオは「すでにあるWebアプリをデスクトップ化したい」「Web開発者だけでデスクトップまで作りたい」「OS通知・常駐アイコン・ファイルアクセスが必要」の三つです。Webと同じReact/Vueのコードベースを共有しつつ、OS固有の操作だけメインプロセス側で書き足す、というのが典型構成になります。Squirrel.Macやelectron-builderといった配布ツール群が成熟しており、署名・自動アップデート・MSI/dmg/pkgパッケージング・コード署名証明書の扱いまでひと通り揃っています。
一方で批判も多い技術で、最大の理由は1アプリごとにChromiumをまるごと抱えるためメモリ使用量とディスクサイズが膨らむことです。シンプルなチャットアプリでも数百MBのRAMを使うのは珍しくありません。この負担を嫌うチームが、後述のTauriやネイティブWebViewを使うMicrosoftのWebView2ベースの構成へ移行する例も増えています。それでも「巨大なWeb資産・複雑なエディタ体験・確実なクロスプラットフォーム動作」が必要な領域ではElectronの優位性は揺らいでいません。
Tauri・ネイティブとの違い
比較対象として最も名前が挙がるTauriは、各OSのシステムWebViewを使い、ネイティブ層をRustで書くことでアプリサイズとメモリ消費を大幅に抑えました。代わりに、OSごとにWebView実装（macOS=WebKit、Linux=WebKitGTK、Windows=WebView2）が異なるため、レンダリングの差異への配慮が必要です。Electronは全OSで同じChromiumを抱える「重い代わりに均質」、Tauriは「軽い代わりにOSごとの差異あり」という分かりやすい対比になっています。
ネイティブ開発（Swift/SwiftUI、WinUI 3、GTK/Qt）と比べると、Electronは開発速度と人材確保で圧倒的優位ですが、ネイティブUXの細部（macOSのトラックパッド挙動、Windowsのタスクバー統合、Linuxの各DEとの親和性）では一段劣ります。「Webの作法でデスクトップ全体を再現する」プロダクトはElectron、「OS固有のUXを最大限活かす」プロダクトはネイティブ、「軽量配布が重要」ならTauriやWebView2、という棲み分けがデスクトップ開発の現状です。
まとめ
ElectronはChromiumとNode.jsを抱える代償と引き換えに、Web開発者へデスクトップ全領域を開放したフレームワークです。メモリ消費の重さは弱点ですが、VS CodeやSlackのような複雑な生産性アプリで第一候補の地位を保っています。軽量化を最優先するならTauri、巨大なWeb資産と均質性を取るならElectン、という選択の天秤を理解しておくことが重要です。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント