この記事のポイント
- Ubuntu 24.04 の apt 標準は
Node.js v18.19.1。Electron 33 はこのバージョンで動作する - NodeSource リポジトリを使えば
Node.js v20.20.2を導入でき、より新しいプロジェクトにも対応できる npm install --save-dev electron@33の実測インストール時間は 5.2 秒、ディスク占有は 264 MB- 配布には
electron-builder（v26.15.3）を使い、AppImage・deb・snap 形式でパッケージできる - Docker コンテナはディスプレイライブラリが無いため
libnss3.soエラーが出る。実機または Xvfb 環境で起動すること
Electron は Chromium と Node.js を組み合わせたデスクトップアプリ開発フレームワークで、HTML・CSS・JavaScript でウィンドウ付きアプリを作れます。VS Code や Slack が Electron 製として有名です。
この記事では Ubuntu 24.04 LTS での Electron 開発環境の構築から、簡単なアプリの作成、Linux 向けパッケージング（AppImage・deb）までを実際に動かした結果をもとに解説します。
前提環境
動作確認は以下の環境で行いました。
- OS: Ubuntu 24.04 LTS（docker run –rm ubuntu:24.04 で検証）
- Node.js: v20.20.2（NodeSource 20.x リポジトリ）／ v18.19.1（apt 標準）
- npm: 10.8.2 / 9.2.0
- Electron: v33.4.11
- 検証日: 2026-06-22
注意
Electron 42.x（2026年6月時点の最新）は Node.js >= 22.12.0 を必要とします。Ubuntu 24.04 の apt 標準 Node.js v18 や NodeSource 20 では動きません。本記事では安定板の Electron 33（Node.js >= 12.20.55 対応）を前提にしています。
Node.js をインストールする
Ubuntu 24.04 の apt には Node.js v18.19.1 が入っています。Electron 33 を使うだけならこれで十分ですが、最新の npm エコシステムにも対応させたい場合は NodeSource 経由で v20 系を入れるのが実用的です。
手順1：apt 標準の Node.js を確認する
$ sudo apt install -y nodejs npm
Setting up nodejs (18.19.1+dfsg-6ubuntu5) …
$ node –version
v18.19.1
$ npm –version
9.2.0
実測では Ubuntu 24.04 の apt パッケージは nodejs 18.19.1+dfsg-6ubuntu5 が入りました（2026-06-22 時点）。
手順2：NodeSource 20.x で最新 LTS を入れる（推奨）
より新しい Node.js が必要な場合は NodeSource の公式スクリプトを使います。
## Confirming “noble” is supported…
$ sudo apt-get install -y nodejs
Setting up nodejs (20.20.2-1nodesource1) …
$ node –version
v20.20.2
$ npm –version
10.8.2
Ubuntu のバージョンによって、apt 標準の Node.js は大きく異なります（実測）。
Electron プロジェクトを作成する
Node.js が入ったら、Electron プロジェクトを作成します。ディレクトリを作り、npm init で初期化してから electron をインストールします。
手順3：プロジェクト初期化と Electron のインストール
$ npm init -y
Wrote to /home/user/myapp/package.json
$ npm install –save-dev electron@33
added 80 packages in 5.233s
$ npx electron –version
v33.4.11
$ du -sh ./node_modules/electron/
264M ./node_modules/electron/
実測では npm install --save-dev electron@33 の完了まで 5.2 秒（ネットワーク速度に依存）、ディスク占有は 264 MB でした。Chromium のバイナリが含まれるため、通常の npm パッケージより大きくなります。
最小アプリを書いてみる
Electron アプリの最小構成は 3 ファイルです。main.js（メインプロセス）・index.html（レンダラー）・package.json だけで動きます。
手順4：main.js を作る
main.js がアプリのエントリーポイントです。ウィンドウ生成と HTML の読み込みを担当します。
const { app, BrowserWindow } = require(‘electron’)
const path = require(‘path’)
function createWindow() {
const win = new BrowserWindow({
width: 800, height: 600,
webPreferences: { nodeIntegration: true, contextIsolation: false }
})
win.loadFile(‘index.html’)
}
app.whenReady().then(createWindow)
app.on(‘window-all-closed’, () => { if (process.platform !== ‘darwin’) app.quit() })
EOF
セキュリティに関する注意
上の例は動作確認用のシンプルな設定です。本番アプリでは nodeIntegration: false・contextIsolation: true を使い、preload スクリプト経由で Node.js API を公開するのが推奨されます（公式ドキュメント参照）。
手順5：index.html と package.json を整える
<!DOCTYPE html><html><body>
<h1>Hello, Electron!</h1>
<p id=”ver”></p>
<script>
document.getElementById(‘ver’).textContent =
‘Electron: ‘ + process.versions.electron +
‘ / Node: ‘ + process.versions.node
</script></body></html>
EOF
$ npm pkg set main=main.js scripts.start=”electron .”
$ npm start
[Electron ウィンドウが開きます]
GUI 環境（GNOME・KDE など）では npm start で Electron ウィンドウが起動します。SSH のみのヘッドレスサーバーでは後述の Xvfb を使います。
ヘッドレスサーバーで起動する（Xvfb）
VPS や Docker コンテナなど、ディスプレイが無い環境では Electron の起動時に libnss3.so などのエラーが出ます。これは Chromium が必要とする GUI ライブラリが不足しているためです。
./node_modules/electron/dist/electron: error while loading shared libraries: libnss3.so: cannot open shared object file: No such such file or directory
# 必要な依存ライブラリを追加
$ sudo apt install -y libnss3 libatk1.0-0 libatk-bridge2.0-0 libcups2 \
libxkbcommon0 libxcomposite1 libxdamage1 libxfixes3 libxrandr2 \
libgbm1 libasound2t64 libpango-1.0-0 libpangocairo-1.0-0
# 仮想ディスプレイ（Xvfb）をインストール
$ sudo apt install -y xvfb
$ Xvfb :99 -screen 0 1280x720x24 &
$ DISPLAY=:99 npm start
[アプリが仮想ディスプレイ上で起動します]
この libnss3.so エラーは実際に Docker コンテナ内で npx electron --version を実行した際に確認しました。ヘッドレスサーバーで CI/CD や自動テストを行う際は、Xvfb か --headless オプション（Electron 22 以降）が必要です。
Linux 向けにパッケージングする
アプリが動いたら、他のマシンでも使えるように配布パッケージを作ります。electron-builder が最も広く使われています。
手順6：electron-builder をインストールする
$ npx electron-builder –version
26.15.3
手順7：package.json にビルド設定を追加する
package.json の build セクションに必要な情報を書きます。
“name”: “myapp”,
“version”: “1.0.0”,
“main”: “main.js”,
“scripts”: {
“start”: “electron .”,
“dist”: “electron-builder –linux”
},
“build”: {
“appId”: “com.example.myapp”,
“productName”: “MyApp”,
“linux”: {
“target”: [“AppImage”, “deb”]
}
}
}
手順8：AppImage と deb をビルドする
• electron-builder version=26.15.3
• description is missed in the package.json appPackageFile=…
• packaging platform=linux arch=x64 electron=33.4.11
• building target=AppImage arch=x64 file=dist/MyApp-1.0.0.AppImage
• building target=deb arch=x64 file=dist/myapp_1.0.0_amd64.deb
• build success
$ ls dist/
MyApp-1.0.0.AppImage myapp_1.0.0_amd64.deb
よくあるエラーと解決策
①libnss3.so が見つからない
ヘッドレス環境や最小構成の Ubuntu で Electron を起動しようとすると発生します。
$ sudo apt install -y libnss3 libgbm1 libasound2t64
Setting up libnss3 …
正直なところ、どのライブラリが足りないかは実行時エラーを見ながら順に追加する形になります。上記のセットを一括で入れておくと大抵解決します。
②npm install が遅い・タイムアウトする
electron パッケージは Chromium バイナリ（約 250MB）を含むため、ダウンロードに時間がかかります。タイムアウトが発生する場合は --prefer-offline オプションでキャッシュを活用するか、ELECTRON_MIRROR 環境変数でミラーサーバーを指定します。
$ npm install –save-dev electron@33 –network-timeout=600000
③electron-builder で “ENOENT: no such file” が出る
build.files の指定が合っていない場合に起きます。main.js と index.html がルートにあることを確認し、package.json の "main": "main.js" を明示してください。
まとめ
- Ubuntu 24.04 の apt 標準は
Node.js v18.19.1。Electron 33 はこのまま動く - NodeSource 20.x で
v20.20.2に上げると最新の npm ツールチェーンも使える npm install --save-dev electron@33は 5.2 秒・264 MB（実測）。Chromium バイナリが含まれるため大きい- ヘッドレスサーバーでは
libnss3.soエラーが必ず出る。apt install libnss3 libgbm1 libasound2t64で解決できる electron-builder（v26.15.3）で AppImage・deb にパッケージできる。一般ユーザーへの配布なら AppImage が最も手軽
Electron はとにかくエラーが多いフレームワークです。依存ライブラリ問題・ビルド設定の罠・バージョン互換と、詰まりどころは満載ですが、乗り越えると Web の知識だけでデスクトップアプリが作れる強みがあります。VPS でのビルドを試してみたい方は、以下の VPS 比較記事も参考にしてください。
コメント