2024.08.09 Electron

Electronとは？Web技術でデスクトップアプリを作る入門解説【2026年最新】

Electron（エレクトロン）とは、HTML・CSS・JavaScriptというWeb技術だけで、Windows・macOS・Linux向けのデスクトップアプリを作れるオープンソースのフレームワークです。この記事で扱うのはソフトウェア開発のためのElectronであり、物理学の素粒子（電子）やヤマハの電子楽器「エレクトーン」とは別物です。本記事では、Electronの仕組みから始め方（Hello World）、ReactやNext.jsとの組み合わせ、セキュリティの基本、そして「オワコンなのか」「代替はあるのか」という疑問まで、2026年時点の最新情報で初心者向けに整理します。

1 Electronとは？まずは要点を整理
2 Electronのメリットとデメリット
- 2.1 メリット
- 2.2 デメリットと対策
3 Electronの始め方：Hello Worldを動かす
4 ReactやNext.jsと組み合わせる
5 セキュリティの基本：最新の安全な構成
6 Electronの代替と「オワコン」論
- 6.1 主な代替フレームワーク
- 6.2 Electronはオワコン？
7 まとめ
8 よくある質問（FAQ）
9 関連記事

Electronとは？まずは要点を整理

ひと言でいうと「Web技術製のデスクトップアプリ基盤」

Electronは、ブラウザの中身であるChromiumと、サーバーサイドJavaScript実行環境のNode.jsを1つにまとめたランタイムです。これにより、ふだんWebサイトを作っている技術（HTML/CSS/JavaScript）をそのまま使って、OSにインストールして使う「ネイティブアプリのように見えるアプリ」を開発できます。もともとはGitHubがコードエディタAtomのために開発し、現在はOpenJS Foundationが管理しています。最大の利点は、1つのコードベースで3つのOSに対応できること。OSごとに別々の言語・別々のコードを書く必要がありません。

身近な採用例：VS Code・Slack・Discord

「Web技術で作って実用に耐えるの？」という疑問への答えは、日常的に使われている有名アプリそのものです。MicrosoftのVisual Studio Code、Slack、Discord、Figmaのデスクトップ版、NotionなどがElectron製として知られています。世界中で使われる大規模アプリの土台になっている点が、Electronの信頼性を物語っています。

仕組み：メインプロセスとレンダラープロセス

Electronアプリは大きく2種類のプロセスで動きます。アプリ全体を管理しウィンドウを生成するメインプロセス（Node.js環境）と、各ウィンドウの画面を描画するレンダラープロセス（Chromium環境）です。両者はIPC（プロセス間通信）でデータをやり取りします。「画面の見た目はレンダラー、ファイル保存やOS操作などの強い権限が必要な処理はメイン」と役割を分けるのが基本設計です。Node.jsの知識があると理解が早いので、Node.jsの最新リリースと現行スケジュールもあわせて押さえておくとよいでしょう。

Electronのメリットとデメリット

メリット

第一に、Web開発の資産（既存のフロントエンドコード、ライブラリ、知見）をそのまま流用でき、学習コストが低いこと。第二に、単一コードベースでクロスプラットフォーム対応できること。第三に、Node.jsとnpmの巨大なエコシステムをそのまま使えること。さらに、自動アップデート（electron-updater）やコード署名・インストーラ作成といった配布まわりのツールが成熟しており、本番運用の実績が豊富な点も大きな強みです。

デメリットと対策

弱点は、各アプリがChromiumとNode.jsを丸ごと同梱するため、アプリサイズが大きく（インストーラで150〜200MB前後が目安）、メモリ使用量も多くなりがちな点です。完全ネイティブのアプリに比べると軽快さでは劣ります。対策としては、レンダラーの画面（ルート）を遅延読み込みする、使わない画面をこまめに破棄する、ウィンドウを乱立させず1つのウィンドウ内で画面遷移する、といった設計上の工夫が有効です。これらの数値は構成によって変わるため、要件に対して許容できるかを早い段階で見積もっておくことをおすすめします。

Electronの始め方：Hello Worldを動かす

前提：Node.jsを用意する

ElectronはNode.js上で動くため、まずNode.jsをインストールします。Electronは約8週間ごとにメジャーバージョンが更新される速いサイクルで開発されており、2026年時点では40番台が最新系です（公式は最新3メジャーをサポート）。内蔵するChromiumとNode.js（24系）も随時更新されます。バージョンは頻繁に変わるため、正確な最新版は公式のリリースページで確認してください。

プロジェクトを作る（推奨：Electron Forge）

実務では、公式が用意する雛形ツールElectron Forgeを使うのが近道です。次のコマンドで、ビルドや配布設定まで含んだプロジェクトが一括生成されます。

npm init electron-app@latest my-app
cd my-app
npm start

仕組みを理解するために手動で最小構成を作る場合は、以下のようにプロジェクトローカルにインストールします。なお、かつてよく紹介された npm install -g electron のようなグローバル導入は現在は推奨されません。プロジェクトごとにバージョンを固定するほうが安全です。

mkdir my-app && cd my-app
npm init -y
npm install --save-dev electron

最小コードでウィンドウを表示する

最小限のHello Worldは、package.json・main.js・index.html・preload.jsの4ファイルで構成します。まず package.json で起動スクリプトとエントリポイントを指定します。

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "latest"
  }
}

メインプロセス（main.js）でウィンドウを生成します。

const { app, BrowserWindow } = require('electron')
const path = require('node:path')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
      // contextIsolation は既定で true、nodeIntegration は既定で false
    }
  })
  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

画面（index.html）と、安全に値を橋渡しする preload.js を用意します。

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
  <head><meta charset="UTF-8" /><title>Hello Electron</title></head>
  <body>
    <h1>Hello World!</h1>
    <p>Node <span id="node"></span> / Electron <span id="el"></span></p>
    <script>
      document.getElementById('node').textContent = window.versions.node()
      document.getElementById('el').textContent = window.versions.electron()
    </script>
  </body>
</html>

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

contextBridge.exposeInMainWorld('versions', {
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron
})

あとは npm start を実行すれば、「Hello World!」と表示されたウィンドウが立ち上がります。これがElectron開発の出発点です。

ReactやNext.jsと組み合わせる

レンダラープロセスは中身がChromiumなので、ReactやVue、Next.jsといったWebフロントエンドの技術をそのまま画面に使えます。実務では、Viteなどのビルドツールでフロントエンドをバンドルし、それをElectronのウィンドウに読み込む構成が一般的です。Electron Forgeにも Vite 用のテンプレートが用意されています。

UIをReactで作り込む流れは通常のWeb開発と同じため、ViteによるReactプロジェクトのセットアップの知識がそのまま活きます。ルーティングやSSR的な構成を取り入れたい場合はNext.jsを組み合わせるケースもあります（「next js electron」で検索されるテーマです）。ただしデスクトップアプリでは、サーバーを前提とするNext.jsの一部機能はそのままでは使えないため、静的書き出しやレンダラー単体で動く構成に寄せるのがコツです。なおOS操作やファイルアクセスなどの強い処理は、レンダラーから直接行わず、後述のpreload経由でメインプロセスに依頼するのが安全な作法です。型安全に開発したい場合はTypeScriptとの併用も定番です。

セキュリティの基本：最新の安全な構成

ElectronはWeb技術ベースゆえに、XSSなどWebと同じリスクを抱えます。さらにNode.jsのネイティブAPIに触れられるぶん、設定を誤ると影響が大きくなります。そこで現在のElectronは、レンダラーからNode.jsを直接触れないようにする安全な既定値が標準になっています。具体的には contextIsolation: true（v12以降デフォルト）と nodeIntegration: false を維持し、画面とメインの橋渡しはpreloadスクリプトとcontextBridgeに限定します。

レンダラーからメインの機能を呼ぶときは、ipcRenderer.invoke と ipcMain.handle の組み合わせで、必要な操作だけを公開します。

// preload.js（必要な操作だけを公開）
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('api', {
  saveFile: (text) => ipcRenderer.invoke('save-file', text)
})

// main.js（受け側の処理）
const { ipcMain } = require('electron')

ipcMain.handle('save-file', async (_event, text) => {
  // ここでファイル保存などの強い処理を行う
  return 'ok'
})

加えて、コンテンツセキュリティポリシー（CSP）で読み込めるリソースを制限し、外部コンテンツは信頼できるものだけに絞ります。Electron本体は脆弱性修正が頻繁に出るため、定期的なバージョン更新と自動アップデートの実装もセキュリティ施策の一部です。

Electronの代替と「オワコン」論

主な代替フレームワーク

「electron 代替」でよく比較されるのがTauriです。TauriはフロントエンドをWeb技術で書き、バックエンドをRustで実装し、画面描画にはChromiumを同梱せずOS標準のWebViewを使います。その結果、アプリサイズが数MB〜十数MBと非常に小さく、メモリも軽いのが特徴です。2024年10月のTauri 2.0でiOS/Androidにも対応し、選択肢として急速に存在感を増しています。詳しくはTauriの特徴と実装を参照してください。このほか、WebViewを薄くラップするNeutralino、Dartで独自描画するFlutter（モバイル併用に強い）なども候補になります。

項目	Electron	Tauri	Flutter
言語・構成	JS/TS＋Node.js＋同梱Chromium	JS/TS＋Rust＋OS WebView	Dart＋独自描画
描画	同梱Chromium（全OS同一）	OS標準WebView（OS差あり）	独自エンジン
アプリサイズ目安	約150〜200MB〜	数MB〜十数MB	数十MB〜
メモリ	多め	少なめ	中
モバイル対応	非対応	対応（2.0〜）	得意
強み	成熟・実績・全OS同一描画	軽量・省メモリ・最小権限	モバイル含む統一UI

Electronはオワコン？

結論として、Electronはオワコンではありません。前述のVS CodeやSlack、Discord、Figmaなど主要アプリの土台であり続けており、開発も活発です。一方で、新規に「とにかく軽いアプリ」を作るならTauriが第一候補になりつつあるのも事実です。使い分けの目安は次のとおりです。成熟したエコシステム・全OSで完全に同じ描画・JavaScript／TypeScriptで一気通貫したい場合はElectron。アプリサイズやメモリを最優先し、Rustを扱える、あるいはモバイルも視野に入れるならTauri。要件に合わせて選ぶのが正解です。

まとめ

Electronは、Web技術の知識を活かして本格的なクロスプラットフォームのデスクトップアプリを作れる、実績豊富なフレームワークです。Chromium＋Node.jsという構成ゆえにアプリは重くなりがちですが、成熟したエコシステムと配布ツール、全OSで一貫した描画は大きな強みです。まずはElectron Forgeか最小構成でHello Worldを動かし、contextIsolationとpreloadを使った安全な作法を押さえるところから始めてみてください。軽量さを最優先するならTauriとの比較検討もおすすめします。デスクトップアプリ開発のご相談は株式会社一創までお気軽にどうぞ。

よくある質問（FAQ）

Q. Electronは物理の「電子」やヤマハの「エレクトーン」と関係ありますか？

いいえ、無関係です。本記事のElectronは、デスクトップアプリを開発するためのソフトウェアフレームワークの名称です。素粒子の電子（electron）や電子オルガンのエレクトーンとは別物です。

Q. Electronはオワコンですか？

オワコンではありません。VS Code・Slack・Discord・Figmaなど広く使われるアプリの基盤として現役で、開発も継続しています。ただし新規の軽量アプリではTauriなどの選択肢も有力になっています。

Q. Electronの代替には何がありますか？

最有力はRustとOS WebViewを使うTauriです。ほかにNeutralino、モバイルに強いFlutterなどがあります。アプリサイズ・メモリを重視するならTauri、実績とエコシステムを重視するならElectronが目安です。

Q. アプリのサイズが大きく重いのですが対策は？

同梱するChromium／Node.jsのぶん、どうしても大きくなります。画面の遅延読み込み、不要な画面の破棄、ウィンドウの使い回しなどで軽量化できます。サイズや軽快さが最優先ならTauriの検討も有効です。

Q. 商用利用はできますか？

ElectronはMITライセンスのオープンソースで、商用利用が可能です（同梱されるChromium等の各コンポーネントのライセンス条件もあわせて確認してください）。

Q. ReactやNext.jsは使えますか？

使えます。レンダラーはChromiumなので、Reactなどのフロントエンド技術をそのまま画面に利用できます。OS操作などの強い処理はpreload経由でメインプロセスに任せるのが安全です。

資料請求