Contents
開発環境のセットアップ
このセクションでは、Node.js と npm のインストールから、Electron アプリの雛形を作成できる開発ツール（Electron Forge・electron‑builder）まで の一連の手順を解説します。正しく環境構築できれば、以降のコーディングやビルドがスムーズに進む基盤が整います。
Node.js と npm のインストール
Node.js は公式サイトから LTS 版（2024‑06 時点では v20 系列）を取得します。npm は同梱されているので別途インストールは不要です。
|
1 2 3 4 5 6 7 8 9 |
# 1. 公式ページ (https://nodejs.org/ja) から LTS をダウンロードし、指示に従ってインストール # 2. バージョン確認 node -v # => v20.x.x（例: v20.12.0） npm -v # => 10.x.x（例: 10.5.0） # 3. 作業ディレクトリ作成 & package.json 初期化 mkdir my-electron-app && cd my-electron-app npm init -y |
※ バージョンは執筆時点の最新 LTS を想定しています。 将来的に Node.js の LTS が変更された場合は、公式サイトで最新版を取得してください。
Electron Forge と electron‑builder の導入
Electron Forge は開発サーバー・パッケージングまでを一本化した CLI、electron‑builder は Windows・macOS・Linux 向けインストーラ生成に特化しています。両者を併用すると 開発フローと配布フローの双方が最適化 されます。
開発支援ツールとして Electron Forge を導入
|
1 2 3 |
npm i -D @electron-forge/cli npx electron-forge import # package.json に Forge 用設定を自動追記 |
importコマンドは既存プロジェクトに対しても安全に実行でき、デフォルトのテンプレートが生成されます。
ビルド・コード署名用に electron‑builder を追加
|
1 2 |
npm i -D electron-builder |
動作確認
npm run start でデフォルトウィンドウが起動すれば、セットアップは完了です。
|
1 2 3 |
npm run start # → 「Hello Electron!」と表示されたウィンドウが立ち上がります |
プロジェクト構成と基本コード
この章では メインプロセス／レンダラープロセスの役割 と、最小構成で動くサンプルコードを紹介します。実際に手元で動かしながら、各ファイルが何を担うか感覚的に掴んでください。
メインプロセスとレンダラープロセスの役割
- メインプロセスは Node.js のフル API が利用でき、ウィンドウ管理・OS 連携・バックエンド処理を担当します。
- レンダラープロセスは Chromium 上で動くブラウザ環境で、UI 描画やユーザー操作のハンドリングを行います。
ポイント：
contextIsolationがデフォルトtrueになることが Electron 30（2026 年予定）以降で正式化されるため、安全な API ブリッジは必ずpreload.js経由で提供 してください。
ファイル構成例
以下は 推奨ディレクトリレイアウト と各ファイルの概要です。パスやアイコン参照はプロジェクト固有になるため、実装時に自分の環境に合わせて修正してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
my-electron-app/ ├─ src/ # JavaScript／TypeScript のソース │ ├─ main.js # メインプロセスエントリ │ ├─ preload.js # コンテキスト分離用ブリッジ │ └─ renderer.js # レンダラ側ロジック ├─ public/ # 静的ファイル（HTML/CSS） │ └─ index.html ├─ assets/ # アイコン・画像等のリソース │ ├─ icon.png │ └─ tray.png └─ package.json |
src/main.js ― ウィンドウ生成と IPC 設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
// main.js – メインプロセスのエントリポイント const { app, BrowserWindow, ipcMain } = require('electron'); const path = require('path'); // 開発環境かどうかは NODE_ENV で判定 const isDev = process.env.NODE_ENV === 'development'; function createWindow() { const win = new BrowserWindow({ width: 1024, height: 640, // アイコンパスはプロジェクトルートからの相対パスです。環境に合わせて調整してください。 icon: path.join(__dirname, '..', 'assets', 'icon.png'), webPreferences: { preload: path.join(__dirname, 'preload.js'), // 必ず preload を指定 contextIsolation: true, // 推奨設定（2026 年以降はデフォルト） nodeIntegration: false // セキュリティ上必須 } }); win.loadFile(path.join('..', 'public', 'index.html')); if (isDev) { win.webContents.openDevTools({ mode: 'detach' }); } } // アプリ起動時のライフサイクル管理 app.whenReady().then(createWindow); app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow(); }); app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit(); }); // IPC ハンドラ例：レンダラからアプリパス取得要求を受け付ける ipcMain.handle('get-app-path', async () => app.getAppPath()); |
src/preload.js ― 安全な API ブリッジ
|
1 2 3 4 5 6 7 8 |
// preload.js – メインとレンダラの橋渡し（contextBridge 必須） const { contextBridge, ipcRenderer } = require('electron'); contextBridge.exposeInMainWorld('electronAPI', { // 非同期 IPC 呼び出しを Promise 化して提供 getAppPath: () => ipcRenderer.invoke('get-app-path') }); |
src/renderer.js ― UI ロジック
|
1 2 3 4 5 6 |
// renderer.js – ブラウザ側のスクリプト document.getElementById('showPath').addEventListener('click', async () => { const appPath = await window.electronAPI.getAppPath(); document.getElementById('pathDisplay').innerText = `App Path: ${appPath}`; }); |
public/index.html ― 最小 UI
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Electron 入門アプリ</title> <!-- Content Security Policy の例（必要に応じて調整） --> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> <style> body { font-family: sans-serif; padding: 2rem; } button { margin-top: 1rem; } </style> </head> <body> <h1>Hello Electron!</h1> <button id="showPath">アプリのパスを表示</button> <p id="pathDisplay"></p> <!-- 相対パスはプロジェクト構造に合わせて変更してください --> <script src="../src/renderer.js"></script> </body> </html> |
環境依存の注意
-iconやtray.pngのパスは 開発マシンのディレクトリ構成 に合わせて修正してください。
- Windows と macOS ではアイコン形式が異なる（.icovs.icns）ため、ビルド設定でそれぞれ指定する必要があります。
開発効率向上とデバッグ手法
本節では ライブリロード と DevTools の活用方法 を中心に、開発サイクルを高速化するテクニックを紹介します。コードの変更が即座にウィンドウに反映されれば、フィードバックループが短縮され生産性が向上します。
ライブリロード（electron-reload）の設定
electron-reload を導入すると、ソースファイル保存時に自動でウィンドウが再読み込みされます。開発環境だけで有効化 することを推奨します。
|
1 2 |
npm i -D electron-reload |
続いて src/main.js の冒頭に以下コードを追加してください（インデントはそのままで構いません）。
|
1 2 3 4 5 6 7 |
if (process.env.NODE_ENV === 'development') { // __dirname は src ディレクトリを指すため、プロジェクトルートの監視対象を指定 require('electron-reload')(path.join(__dirname, '..'), { electron: path.join(__dirname, '..', 'node_modules', '.bin', 'electron') }); } |
ポイント：
process.env.NODE_ENVが未設定の場合はnpm run start実行時に自動でdevelopmentが付与されますが、明示的に.envファイルで管理すると安心です。
DevTools の活用とコンソールデバッグ
- 自動起動：開発モードでは
win.webContents.openDevTools({ mode: 'detach' })により、ウィンドウとは別タブで DevTools が表示されます。 - ソースマップ：TypeScript や Babel を使用する場合は
webpack/esbuildのdevtool: 'source-map'設定を忘れずに。これにより、トランスパイル後でも元コードがデバッグ可能です。 - メインプロセスのログ：
preload.js内でconsole.logした内容は DevTools の「Main」タブに出力されます。レンダラ側と混同しないよう、適切なタグ付け（例:[PRELOAD] message）を推奨します。
プラットフォーム固有機能とセキュリティベストプラクティス
デスクトップアプリは OS のネイティブ API を活用できる一方で、Web 技術由来の脆弱性対策が不可欠です。この章では ファイル操作・通知・Tray といった代表的な機能実装例と、コンテキスト分離・CSP・サンドボックス の設定方法を解説します。
ファイルシステム・通知・Tray の使用例
以下のコードは Windows/macOS/Linux 全てで動作することを想定しています。パスやアイコンはプロジェクトに合わせて変更してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
// src/main.js（続き） // -------------------------------------------------- // 1️⃣ ファイル保存ダイアログと非同期書き込み const { dialog } = require('electron'); const fs = require('fs').promises; ipcMain.handle('save-text', async (event, content) => { const { filePath } = await dialog.showSaveDialog({ title: 'テキストを保存', defaultPath: 'note.txt' }); if (!filePath) return null; await fs.writeFile(filePath, content, 'utf8'); return filePath; }); // 2️⃣ 通知 API（macOS の通知センター / Windows のトースト） // - Notification はメインプロセスでも呼び出せます ipcMain.on('show-notification', (_, { title, body }) => { new Notification({ title, body }).show(); }); // 3️⃣ Tray アイコンの作成（macOS・Linux・Windows 共通） const { Tray, Menu } = require('electron'); let tray = null; app.whenReady().then(() => { const iconPath = path.join(__dirname, '..', 'assets', 'tray.png'); // 環境依存 tray = new Tray(iconPath); const contextMenu = Menu.buildFromTemplate([ { label: '表示', click: () => BrowserWindow.getAllWindows()[0].show() }, { type: 'separator' }, { label: '終了', click: () => app.quit() } ]); tray.setToolTip('My Electron App'); tray.setContextMenu(contextMenu); }); |
コンテキスト分離・CSP・サンドボックスの設定
| 設定項目 | 推奨コード例 | 効果 |
|---|---|---|
| コンテキスト分離 | webPreferences: { contextIsolation: true, preload: … } |
メインとレンダラを完全に切り離し、XSS 被害を局所化 |
| Content Security Policy (CSP) | <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> |
外部スクリプトやインラインコードの実行を防止 |
| サンドボックス（Electron 30 以降推奨） | webPreferences: { sandbox: true } |
Chromium のサンドボックスでプロセスを隔離し、権限昇格リスク低減 |
注意点：ネイティブモジュールがサンドボックスに非対応の場合は
nodeIntegrationInWorkerなど代替手段を検討してください。2026 年版ではsandbox: trueがデフォルトになる可能性があります。
ビルド・配布・自動アップデート
アプリ完成後は electron‑builder を用いて各 OS 向けインストーラを生成し、さらに GitHub Releases と連携した 自動更新機構（electron-updater） を組み込みます。以下の手順で CI/CD パイプラインまで構築できます。
electron‑builder でインストーラー作成
package.json にビルド設定を追記し、npm run dist で出力します。バージョン番号やアプリ ID はプロジェクト固有に変更してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
{ "name": "my-electron-app", "version": "1.0.0", "main": "./src/main.js", "scripts": { "start": "electron-forge start", "dist": "electron-builder" }, "build": { "appId": "com.example.myapp", "productName": "MyElectronApp", "files": [ "src/**/*", "public/**/*", "package.json" ], "directories": { "output": "dist" }, "mac": { "target": ["dmg"] }, "win": { "target": ["nsis"] }, "linux": { "target": ["AppImage"] } }, "devDependencies": { "@electron-forge/cli": "^6.0.0", "electron-builder": "^24.0.0" } } |
|
1 2 |
npm run dist # => dist/ ディレクトリに各プラットフォームのインストーラーが生成される |
パス・アイコン注意：
build/icon.*（.ico,.icns）をプロジェクトルートに置くか、build.iconオプションで明示的に指定してください。
コード署名とパッケージング
コード署名は Windows の SmartScreen と macOS の Gatekeeper を回避するために必須です。以下は一般的な手順です。
- 証明書取得（例: DigiCert、Apple Developer）
- 環境変数設定（CI 環境でも安全に使用できるように
CSC_LINK・APPLE_CERTIFICATEなどを設定）
|
1 2 3 4 5 |
export CSC_LINK=/path/to/windows.pfx export CSC_KEY_PASSWORD=yourPassword export APPLE_ID=you@example.com export APPLE_APP_SPECIFIC_PASSWORD=xxxx-xxxx-xxxx-xxxx |
package.jsonに署名情報を書き込む（環境変数置換を活用）
|
1 2 3 4 5 6 7 8 |
"win": { "certificateFile": "./certs/windows.pfx", "certificatePassword": "${CSC_KEY_PASSWORD}" }, "mac": { "identity": "Developer ID Application: Your Name (TEAMID)" } |
- 再度
npm run dist→ 署名済みインストーラーが生成されます。
GitHub Releases と electron‑updater による自動更新
依存パッケージの追加
|
1 2 |
npm i -D electron-updater |
重要：2026 年版で API が
autoUpdater.checkForUpdatesAndNotify()のみになる可能性があります。最新ドキュメントを必ず確認してください。
メインプロセスに更新ロジックを組み込む
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// src/main.js（続き） const { autoUpdater } = require('electron-updater'); app.whenReady().then(() => { // 起動時に自動チェック＆通知 autoUpdater.checkForUpdatesAndNotify(); }); // イベントハンドラ例（UI に反映させるため renderer に送信） autoUpdater.on('update-available', () => console.log('Update available')); autoUpdater.on('update-downloaded', (info) => { const win = BrowserWindow.getAllWindows()[0]; win.webContents.send('update-ready', info); }); |
GitHub Actions で自動リリース
.github/workflows/release.yml の抜粋です。GH_TOKEN は repo 権限を持つ Personal Access Token をシークレットに登録してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
name: Release on: push: tags: - 'v*.*.*' # バージョンタグが付いたときだけ実行 jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Setup Node uses: actions/setup-node@v3 with: node-version: '20' cache: npm - run: npm ci - run: npm run dist -- -p always # electron-builder が GitHub Release を自動作成 env: GH_TOKEN: ${{ secrets.GH_TOKEN }} CSC_LINK: ${{ secrets.WIN_CERT_PFX }} # Windows 証明書（必要なら） CSC_KEY_PASSWORD: ${{ secrets.CERT_PASSWORD }} APPLE_ID: ${{ secrets.APPLE_ID }} APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_PASS }} |
自動更新の前提条件
-publishセクションがgithubに設定されていること（package.jsonのbuild.publish）
- GitHub Release のアセット名がlatest.yml形式で生成されること（electron‑builder が自動で行います）
2026 年版 Electron の主要変更点と互換性チェック
本章では 予測情報に基づく将来の変更点 をまとめ、既存コードをスムーズに移行させるための チェックリスト を提示します。実際に 2026 年版がリリースされたら、公式リリースノートと比較しながら各項目を検証してください。
※ この記事執筆時点では「Electron v28（2026 年リリース予定）」はベータ段階です。正式リリース前に API が変更される可能性があります。
| 変更点 | 概要 | 移行時の注意点 |
|---|---|---|
| Node.js 20 の標準搭載 | ランタイムが Node 20 系列へ更新。fs/promises がデフォルトで有効化。 |
古い require('fs') はそのままで動作しますが、非推奨 API（例: fs.existsSync の代替）を見直すと将来の互換性が向上します。 |
| Chromium 124 へのアップグレード | 新しい Web 標準（CSS Grid Level 2、WebGPU デフォルト有効化）を利用可能に。 | WebGPU を使わない場合は特別な設定不要です。旧ブラウザ向けポリフィルは削除してコードサイズを削減できます。 |
contextIsolation がデフォルト true |
セキュリティ強化のため、デフォルトでコンテキスト分離が有効になる予定（Electron 30 以降）。 | 既存プロジェクトは preload.js 経由で提供する API を必ず contextBridge.exposeInMainWorld に置き換えてください。 |
| サンドボックスモードの標準化（macOS・Linux） | webPreferences.sandbox: true が推奨設定に。 |
ネイティブモジュールがサンドボックス非対応の場合は、ビルド時に nodeIntegrationInWorker で代替できるか検証してください。 |
| electron‑updater の API 統一 | autoUpdater.checkForUpdates() が Promise を返す形へ統一され、コールバック方式が廃止予定。 |
既存のコールバック実装は await autoUpdater.checkForUpdatesAndNotify(); に書き換えるだけで対応可能です。 |
互換性チェックリスト（2026 年版移行前に必ず実施）
- Node/Electron バージョン確認
bash
npm list electron # 推奨: ^28.0.0 以降
node -v # 推奨: >=20.x - コンテキスト分離の明示的設定
webPreferences.contextIsolationがtrueであることを確認。falseのままだと起動エラーになる可能性があります。 - 非推奨 API 探索
- 公式リリースノート「Deprecated APIs」セクションから対象関数を抽出し、代替コードに置き換える。
- ビルドツールのバージョン更新
electron-builderと@electron-forge/cliが v24 以上（2026 年版は最低でも v28 系列が必要になる可能性）であることを確認。 - テストと CI の実行
npm test（Jest / Mocha 等）で単体テストを走らせ、プラットフォームごとの GitHub Actions でビルド・テストが成功するか検証。
まとめ：上記チェックリストを自動化スクリプトに組み込むと、将来のメジャーアップデートでも手作業が最小限で済みます。
まとめ
- 開発環境は Node.js LTS（v20 系列）＋ Electron Forge + electron‑builder の組み合わせで構築。
- プロジェクト構成は
src/とpublic/に分離し、preload.jsで安全なブリッジを提供することがベストプラクティス。 - 開発効率向上のために
electron-reloadと DevTools の活用を推奨。 - セキュリティ対策はコンテキスト分離、CSP、サンドボックス設定を必ず行う。
- ビルド・配布は electron‑builder でマルチプラットフォームインストーラを生成し、コード署名と GitHub Releases を組み合わせて自動更新機構（electron-updater）を実装。
- 2026 年版への移行は公式リリースノートを確認しつつ、上記チェックリストで互換性を検証すればスムーズに対応可能です。
次のステップ：本記事のサンプルコードをローカルで動かしたら、独自機能（例: データベース連携、WebGPU 描画）を追加し、CI/CD パイプラインまで整備してみてください。実践的に経験すれば、プロダクションレベルの Electron アプリ開発が身につきます。
本稿は 2024‑06 時点の情報に基づいています。最新バージョンや API の変更は公式ドキュメントで随時確認してください。