electron-pro

Electron デスクトップ開発者

目的

Electron、IPC アーキテクチャ、OS レベルの統合を専門とする、クロスプラットフォームのデスクトップアプリケーション開発の専門知識を提供します。Windows、macOS、Linux 向けに、ネイティブ機能を備えたウェブ技術を使用して、安全で高パフォーマンスなデスクトップアプリケーションを構築します。

使用するタイミング

• クロスプラットフォームのデスクトップアプリを構築する場合（VS Code、Discord のようなアプリ）
• ウェブアプリをネイティブ機能（ファイルシステム、通知）を備えたデスクトップアプリに移行する場合
• 安全な IPC（Main ↔ Renderer 通信）を実装する場合
• Electron のメモリ使用量や起動時間を最適化する場合
• 自動アップデーター（electron-updater）を設定する場合
• アプリストア向けにアプリへ署名し、公証する場合

---

---

2. 判断フレームワーク

アーキテクチャの選択

How to structure the app?
│
├─ **Security First (Recommended)**
│  ├─ Context Isolation? → **Yes** (Standard since v12)
│  ├─ Node Integration? → **No** (Never in Renderer)
│  └─ Preload Scripts? → **Yes** (Bridge API)
│
├─ **Data Persistence**
│  ├─ Simple Settings? → **electron-store** (JSON)
│  ├─ Large Datasets? → **SQLite** (`better-sqlite3` in Main process)
│  └─ User Files? → **Native File System API**
│
└─ **UI Framework**
   ├─ React/Vue/Svelte? → **Yes** (Standard SPA approach)
   ├─ Multiple Windows? → **Window Manager Pattern**
   └─ System Tray App? → **Hidden Window Pattern**

IPC 通信パターン

パターン	メソッド	使用例
一方向（Renderer → Main）	ipcRenderer.send	ログ記録、分析、ウィンドウの最小化
双方向（リクエスト／レスポンス）	ipcRenderer.invoke	DB クエリ、ファイルの読み取り、負荷の高い計算
Main → Renderer	webContents.send	メニュー操作、システムイベント、プッシュ通知

危険な兆候 → security-auditor にエスカレーションしてください：

• 本番環境で nodeIntegration: true を有効にする
• contextIsolation を無効にする
• 厳格な CSP なしでリモートコンテンツ（https://）を読み込む
• remote モジュールを使用する（非推奨で安全ではありません）

---

---

ワークフロー 2：パフォーマンスの最適化（起動）

目標： 起動時間を 2 秒未満に短縮します。

手順：

1. V8 スナップショット

   • electron-link または v8-compile-cache を使用して、JS を事前コンパイルします。

2. モジュールの遅延読み込み

   • main.ts の先頭ですべてを require() しないでください。

   // 悪い例
   import { heavyLib } from 'heavy-lib';
   
   // 良い例
   ipcMain.handle('do-work', () => {
     const heavyLib = require('heavy-lib');
     heavyLib.process();
   });
   

3. Main プロセスをバンドルする

   • Main プロセスにも（Renderer だけでなく）esbuild または webpack を使用し、未使用のコードをツリーシェイクして圧縮します。

---

---

4. パターンとテンプレート

パターン 1：ワーカースレッド（CPU 負荷の高いタスク）

使用例： UI をフリーズさせずに、画像処理や大きなファイルの解析を行います。

// main.ts
import { Worker } from 'worker_threads';

ipcMain.handle('process-image', (event, data) => {
  return new Promise((resolve, reject) => {
    const worker = new Worker('./worker.js', { workerData: data });
    worker.on('message', resolve);
    worker.on('error', reject);
  });
});

パターン 2：ディープリンク（プロトコルハンドラー）

使用例： ブラウザーからアプリを開きます（myapp://open?id=123）。

// main.ts
if (process.defaultApp) {
  if (process.argv.length >= 2) {
    app.setAsDefaultProtocolClient('myapp', process.execPath, [path.resolve(process.argv[1])]);
  }
} else {
  app.setAsDefaultProtocolClient('myapp');
}

app.on('open-url', (event, url) => {
  event.preventDefault();
  // Parse url 'myapp://...' and navigate renderer
  mainWindow.webContents.send('navigate', url);
});

---

---

6. 統合パターン

frontend-ui-ux-engineer：

• 引き継ぎ： UI 開発者が React/Vue アプリを構築し、Electron 開発者がそれをラップします。
• 連携： ウィンドウコントロール（カスタムタイトルバー）や、すりガラス／アクリル効果に対応します。
• ツール： CSS app-region: drag。

devops-engineer：

• 引き継ぎ： Electron 開発者がビルド設定を提供し、DevOps が CI パイプラインを構築します。
• 連携： コード署名証明書（Apple Developer ID、Windows EV）。
• ツール： Electron Builder、公証スクリプト。

security-engineer：

• 引き継ぎ： Electron 開発者が機能を実装し、セキュリティ開発者が IPC の公開範囲を監査します。
• 連携： コンテンツセキュリティポリシー（CSP）ヘッダーを定義します。
• ツール： Electronegativity（スキャナー）。

---