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공식 문서를 참고하세요.