electron-development

Electron 開発ガイドライン

クロスプラットフォームのデスクトップアプリケーションを構築するための、Electron 開発のエキスパートです。

基本原則

• Electron アプリのセキュリティに関するベストプラクティスに従う
• メインプロセスとレンダラープロセスの役割を分離する
• プロセス間通信には IPC を使用する
• 適切なウィンドウ管理を実装する

プロジェクト構成

src/
├── main/              # Main process code
│   ├── index.ts      # Entry point
│   ├── ipc/          # IPC handlers
│   └── utils/        # Utilities
├── renderer/          # Renderer process code
│   ├── components/   # UI components
│   ├── pages/        # Application pages
│   └── styles/       # Stylesheets
├── preload/          # Preload scripts
│   └── index.ts     # Expose APIs to renderer
└── shared/           # Shared types and utilities

セキュリティのベストプラクティス

コンテキスト分離

// main.js
const win = new BrowserWindow({
  webPreferences: {
    contextIsolation: true,
    nodeIntegration: false,
    preload: path.join(__dirname, 'preload.js')
  }
});

プリロードスクリプト

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

contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: (channel, data) => {
    const validChannels = ['toMain'];
    if (validChannels.includes(channel)) {
      ipcRenderer.send(channel, data);
    }
  },
  onMessage: (channel, callback) => {
    const validChannels = ['fromMain'];
    if (validChannels.includes(channel)) {
      ipcRenderer.on(channel, (event, ...args) => callback(...args));
    }
  }
});

コンテンツセキュリティポリシー

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

IPC 通信

メインプロセス

const { ipcMain } = require('electron');

ipcMain.handle('read-file', async (event, filePath) => {
  const content = await fs.promises.readFile(filePath, 'utf-8');
  return content;
});

ipcMain.on('save-file', (event, { path, content }) => {
  fs.writeFileSync(path, content);
  event.reply('file-saved', { success: true });
});

レンダラープロセス

// Using exposed API from preload
const content = await window.electronAPI.readFile('/path/to/file');

ウィンドウ管理

const { BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    minWidth: 800,
    minHeight: 600,
    webPreferences: {
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    }
  });

  // Handle window events
  win.on('closed', () => {
    // Cleanup
  });

  // Load content
  if (process.env.NODE_ENV === 'development') {
    win.loadURL('http://localhost:3000');
    win.webContents.openDevTools();
  } else {
    win.loadFile('dist/index.html');
  }
}

自動更新

const { autoUpdater } = require('electron-updater');

autoUpdater.on('update-available', () => {
  // Notify user
});

autoUpdater.on('update-downloaded', () => {
  autoUpdater.quitAndInstall();
});

app.whenReady().then(() => {
  autoUpdater.checkForUpdatesAndNotify();
});

ネイティブモジュール

• ネイティブ依存関係には electron-rebuild を使用する
• カスタムモジュールには node-addon-api の使用を検討する
• すべてのプラットフォームでネイティブモジュールをテストする
• アーキテクチャの違い（x64、arm64）に対応する

パフォーマンス

• メインプロセスのブロックを最小限に抑える
• 負荷の高い計算には Web ワーカーを使用する
• 遅延読み込みを実装する
• DevTools でプロファイリングする

テスト

• E2E テストには Spectron または Playwright を使用する
• メインプロセスのロジックをユニットテストする
• IPC ハンドラーをテストする
• すべての対象プラットフォームでテストする

ビルドと配布

• パッケージングには electron-builder を使用する
• 適切なアプリ署名を設定する
• 自動更新のインフラストラクチャを構築する
• すべてのプラットフォームでインストーラーをテストする