Electron（エレクトロン）とは何ですか？

HTML・CSS・JavaScriptなどのWeb技術を使ってデスクトップアプリを構築できるフレームワーク。VS Code、Slack、Discordなどの人気アプリで採用されている。

Electron（エレクトロン）のポイントは？

ChromiumブラウザとNode.jsを内蔵しており、Web技術だけでWindows・macOS・Linuxに対応したデスクトップアプリを作れる。VS Code、Slack、Discord、Notion、Figmaデスクトップ版など、世界的に有名なアプリの多くがElectronで作られている。Webエンジニアが既存のスキルセットでデスクトップアプリ開発に参入できるため、学習コストが低い。Chromiumを丸ごと同梱するためアプリサイズが大きくなりやすく、メモリ使用量も多いのが弱点

【エレクトロン】

Electron（エレクトロン）とは？

💡 Webの技術でデスクトップアプリが作れる魔法の箱

📌 このページのポイント

ChromiumブラウザとNode.jsを内蔵しており、Web技術だけでWindows・macOS・Linuxに対応したデスクトップアプリを作れる
VS Code、Slack、Discord、Notion、Figma デスクトップ版など、世界的に有名なアプリの多くがElectronで作られている
Webエンジニアが既存のスキルセットでデスクトップアプリ開発に参入できるため、学習コストが低い
Chromiumを丸ごと同梱するためアプリサイズが大きくなりやすく、メモリ使用量も多いのが弱点

Electronの構成とマルチOS対応のイメージ

ひよこ

デスクトップアプリって、普通は専用の言語で作るんじゃないの？

ペンギン先生

昔はそうだったんだ。WindowsならC#、macOSならSwiftっていう具合にね。でもElectronが登場してからは、HTML・CSS・JavaScriptだけでどのOSでも動くアプリが作れるようになったんだよ

ひよこ

どうやってWebの技術でデスクトップアプリになるの？

ペンギン先生

Electronの中にはChromiumっていうブラウザエンジンとNode.jsが入っていて、アプリの画面はWebページと同じ仕組みで描画されるんだ。さらにNode.jsでファイル操作やOS機能にもアクセスできるから、普通のブラウザではできないことも可能になるよ

ひよこ

VS CodeもElectronなんだ！すごく軽快に動く気がするけど…

ペンギン先生

そうなんだ。MicrosoftがかなりチューニングしてるからVS Codeは快適だけど、実は裏でChromiumが動いているんだよ。ただ、Chromiumを丸ごと含むからアプリのサイズが100MB超えになりやすいのが弱点だね

ひよこ

メモリもたくさん使うの？

ペンギン先生

うん、Chromiumのプロセスモデルを引き継ぐから、メモリ使用量は多めになるよ。Slackを開いてるだけで数百MBということもある。そこが課題で、最近はTauriのようなより軽量な代替フレームワークも注目されているんだ

ひよこ

じゃあElectronはもうオワコン？

ペンギン先生

いやいや、まだまだ主流だよ。エコシステムが巨大で、プラグインやツールが豊富だし、実績のあるアプリが多いから安心感がある。セキュリティアップデートも活発だし、用途に応じてElectronとTauriを使い分けるのが今のトレンドだね

まとめ：ざっくりこれだけ覚えればOK！

「Electron」って出てきたら「Web技術でデスクトップアプリを作れるフレームワーク」と思えればだいたいOK！

📖 おまけ：英語の意味

「Electron」＝電子

💬 もともとはGitHubがAtomエディタ用に開発した「Atom Shell」が前身で、2015年にElectronに改名されたよ。電子のように軽やかにプラットフォームを飛び回るイメージだね

← 用語集にもどる

Electron（エレクトロン） とは？

Electron（エレクトロン）とは？