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の显示まで一貫して支持是可能的。

总结

借助 Claude Code，Electronの安全を考慮したIPC设计やクロスプラット表单构建の配置を効率よく实现可以。Tauri开发指南との比較や、TypeScript活用テクニック也建议一并参考。

Electron的详细信息请参阅Electron官方文档。