Electronアプリ開発でのClaude Code活用

ElectronでデスクトップアプリをゼロからClaude Codeと一緒に作ると、セットアップからIPC通信の実装まで驚くほどスムーズに進みます。本記事では具体的な操作を交えながら解説します。

プロジェクトのセットアップをClaude Codeに任せる

まずはプロジェクトの雛形作成からお願いしましょう。Claude Codeを起動したら、次のように入力します。

Electronアプリのプロジェクトをセットアップしてください。
構成はmain.js、preload.js、index.htmlの3ファイル構成で、
electron-builderも合わせて導入してください。

Claude Codeはpackage.jsonの生成からnpm installの実行まで自動で進めてくれます。自分でドキュメントを読み漁る手間が省けるので、初期構築にかかる時間を大幅に短縮できます。

※npm: Node.jsのパッケージ管理ツール。`npm install` でライブラリをインストールする。

IPC通信の実装をスラスラ進める

ElectronのIPC通信はメインプロセスとレンダラープロセスの橋渡し役です。実装パターンを覚えるのが面倒と感じる方も、Claude Codeなら「こう書いて」と伝えるだけで正しいコードを出力してくれます。

たとえば次のように依頼してみましょう。

preload.jsでcontextBridgeを使い、
レンダラーからファイルパスを受け取ってメインプロセスで
fs.readFileSyncで読み込んで返すIPC通信を実装してください。

すると、以下のようなコードが生成されます。

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  readFile: (filePath) => ipcRenderer.invoke('read-file', filePath)
})

// main.js（抜粋）
ipcMain.handle('read-file', async (event, filePath) => {
  return fs.readFileSync(filePath, 'utf-8')
})

セキュリティを考慮したcontextBridgeの使い方も自動で採用してくれるのが嬉しいポイントです。

※API: Application Programming Interface の略。外部サービスとプログラム間でデータをやりとりするための接続口。

electron-builderのビルド設定を整える

Windows・macOS・Linux向けのビルド設定は、細かいオプションが多くて迷いがちです。Claude Codeに任せれば一気に整理できます。

package.jsonにelectron-builderの設定を追加してください。
ターゲットはWindows（nsis）、macOS（dmg）、Linux（AppImage）の3つで、
アイコンはbuild/iconsフォルダを参照するようにしてください。

Claude Codeを使うことで、Electronの複雑な設定や定型コードを素早く揃え、本来集中すべきアプリのロジック開発に時間を使えるようになります。ぜひ今日から取り入れてみてください。