Electron開発ガイドライン

JavaScript/TypeScriptを使用したクロスプラットフォーム対応デスクトップアプリケーション構築のための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 workersを使用する
• レイジーローディングを実装する
• DevToolsでプロファイリングを実施する

テスト

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

ビルドと配布

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