Electron Desktop App Development with Claude Code: Cross-Platform Guide

ElectronデスクトップアプリをClaude Codeで開発する

Electronを使えばWeb技術でWindows・macOS・Linuxのデスクトップアプリを作成できます。Claude Codeを活用すると、メインプロセスとレンダラープロセスの設計やセキュリティ設定を効率よく実装できます。

プロジェクト構成

Electron Forge + React + TypeScript

> Electron Forge + React + TypeScriptのプロジェクト構成を作成して。
> Viteバンドラーを使って。

// src/main.ts
import { app, BrowserWindow, ipcMain } from 'electron';
import path from 'path';

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false,
      sandbox: true,
    },
  });

  if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
    mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
  } else {
    mainWindow.loadFile(
      path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`)
    );
  }
};

app.whenReady().then(createWindow);

IPC通信の設計

セキュアなプロセス間通信

> ファイル操作用のIPC通信を設計して。
> contextBridgeを使ったセキュアな実装で。

// src/preload.ts
import { contextBridge, ipcRenderer } from 'electron';

contextBridge.exposeInMainWorld('fileAPI', {
  readFile: (filePath: string) =>
    ipcRenderer.invoke('file:read', filePath),
  writeFile: (filePath: string, content: string) =>
    ipcRenderer.invoke('file:write', filePath, content),
  selectFile: () =>
    ipcRenderer.invoke('dialog:openFile'),
});

// src/main.ts（ハンドラー登録）
import { ipcMain, dialog } from 'electron';
import fs from 'fs/promises';

ipcMain.handle('file:read', async (_, filePath: string) => {
  return fs.readFile(filePath, 'utf-8');
});

ipcMain.handle('file:write', async (_, filePath: string, content: string) => {
  await fs.writeFile(filePath, content, 'utf-8');
  return { success: true };
});

ipcMain.handle('dialog:openFile', async () => {
  const result = await dialog.showOpenDialog({
    properties: ['openFile'],
    filters: [
      { name: 'テキストファイル', extensions: ['txt', 'md', 'json'] },
    ],
  });
  return result.canceled ? null : result.filePaths[0];
});

セキュリティ設定

Electronアプリではセキュリティ設定が特に重要です。Claude Codeに「セキュリティベストプラクティスに従って設定して」と依頼すると、CSP（Content Security Policy）やサンドボックス設定を適切に構成してくれます。

// CSPヘッダーの設定
session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
  callback({
    responseHeaders: {
      ...details.responseHeaders,
      'Content-Security-Policy': [
        "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
      ],
    },
  });
});

自動アップデート

electron-updater を使った自動アップデート機能もClaude Codeで実装できます。GitHub Releasesとの連携設定から、アップデートUIの表示まで一貫して対応可能です。

Summary

Claude Codeを使えば、Electronのセキュリティを考慮したIPC設計やクロスプラットフォームビルドの設定を効率よく実装できます。Tauri開発ガイドとの比較や、TypeScript活用テクニックも合わせて参考にしてください。

Electronの詳細はElectron公式ドキュメントを参照してください。