electron

このスキルを使用するタイミング

ユーザーが次のことを希望する場合は、いつでもこのスキルを使用します。

• Electron を使用してクロスプラットフォームのデスクトップアプリケーションを構築する
• Electron のアーキテクチャ（メインプロセス、レンダラープロセス、プリロード）を理解する
• プロセス間の IPC（プロセス間通信）を実装する
• BrowserWindow インスタンスを作成、管理する
• メニュー、トレイアイコン、ネイティブ機能を実装する
• Electron アプリケーションをパッケージ化、配布する
• Electron Forge を使用してプロジェクトのひな形を作成、ビルドする
• Electron アプリケーションをデバッグ、テストする
• セキュリティのベストプラクティスを実装する
• Electron API（app、BrowserWindow、ipcMain、ipcRenderer など）を使用する

このスキルの使用方法

このスキルは Electron の公式ドキュメントの構成（https://www.electronjs.org/zh/docs/latest/、https://www.electronjs.org/zh/docs/latest/api/app）に合わせて整理されています。Electron を扱う際は、次の手順に従います。

1. トピックを特定します。ユーザーのリクエストから判断します。

   • はじめに／クイックスタート → examples/getting-started/installation.md または examples/getting-started/quick-start.md
   • メインプロセス／メインプロセス → examples/processes/main-process.md
   • レンダラープロセス／レンダラープロセス → examples/processes/renderer-process.md
   • IPC 通信／IPC 通信 → examples/processes/ipc-communication.md
   • BrowserWindow／ウィンドウ → examples/api/browser-window.md
   • メニュー／メニュー → examples/api/menu.md
   • パッケージ化／パッケージ化 → examples/advanced/packaging.md
   • セキュリティ／セキュリティ → examples/advanced/security.md

2. examples/ ディレクトリから適切なサンプルファイルを読み込みます。

   はじめに（クイックスタート） - examples/getting-started/:

   • examples/getting-started/installation.md - Electron のインストールと基本設定
   • examples/getting-started/quick-start.md - クイックスタートチュートリアル

   プロセス - examples/processes/:

   • examples/processes/main-process.md - メインプロセスの概念と使用方法
   • examples/processes/renderer-process.md - レンダラープロセスの概念
   • examples/processes/preload-scripts.md - プリロードスクリプトの使用方法
   • examples/processes/ipc-communication.md - IPC 通信のパターン

   API のサンプル - examples/api/:

   • examples/api/browser-window.md - BrowserWindow の使用方法
   • examples/api/menu.md - メニューとコンテキストメニュー
   • examples/api/tray.md - システムトレイ
   • examples/api/dialog.md - ファイルダイアログ
   • examples/api/ipc-main.md - ipcMain の使用方法
   • examples/api/ipc-renderer.md - ipcRenderer の使用方法

   高度なトピック - examples/advanced/:

   • examples/advanced/packaging.md - アプリケーションのパッケージ化
   • examples/advanced/security.md - セキュリティのベストプラクティス
   • examples/advanced/auto-updater.md - 自動アップデーター
   • examples/advanced/native-modules.md - ネイティブモジュール

   ツール - examples/tools/:

   • examples/tools/electron-forge.md - Electron Forge の使用方法
   • examples/tools/electron-fiddle.md - Electron Fiddle の使用方法

3. 構文、構造、ベストプラクティスについては、該当するサンプルファイルの具体的な指示に従います。

   重要な注意事項:

   • すべてのサンプルは Electron の最新 API に準拠しています
   • サンプルでは CommonJS（require）と ES モジュール（import）の両方を使用しています
   • 各サンプルファイルには、重要な概念、コード例、要点が含まれています
   • ベストプラクティスや一般的なパターンについては、必ずサンプルファイルを確認してください
   • Electron は Windows、macOS、Linux に対応しています

4. 必要に応じて、api/ ディレクトリにある API ドキュメントを参照します。

   • api/app.md - app モジュール API
   • api/browser-window.md - BrowserWindow API
   • api/ipc-main.md - ipcMain API
   • api/ipc-renderer.md - ipcRenderer API
   • api/menu.md - Menu API
   • api/tray.md - Tray API

5. templates/ ディレクトリにあるテンプレートを使用します。

   • templates/main-process.md - メインプロセスのテンプレート
   • templates/preload-script.md - プリロードスクリプトのテンプレート
   • templates/renderer-process.md - レンダラープロセスのテンプレート
   • templates/package-json.md - package.json のテンプレート

ドキュメントの対応関係（公式ドキュメントとの1対1対応）

• examples/ → https://www.electronjs.org/zh/docs/latest/
• api/ → https://www.electronjs.org/zh/docs/latest/api/app

クイックスタートの例

// main.js
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')

function createWindow() {
  const win = new BrowserWindow({
    width: 800, height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false,  // Security: always disable
      contextIsolation: true    // Security: always enable
    }
  })
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

// IPC handler example
ipcMain.handle('get-data', async () => {
  return { message: 'Hello from main process' }
})

// preload.js
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('api', {
  getData: () => ipcRenderer.invoke('get-data')
})

API リファレンス（api/）

• api/app.md - app モジュール API
• api/browser-window.md - BrowserWindow API
• api/ipc-main.md / api/ipc-renderer.md - IPC API
• api/menu.md / api/tray.md / api/dialog.md - UI API

ベストプラクティス

1. セキュリティ：レンダラープロセスで nodeIntegration を有効にせず、プリロードスクリプトを使用します
2. プロセスの分離：メインプロセスとレンダラープロセスを分離します
3. IPC 通信：プロセス間の安全な通信には IPC を使用します
4. リソース管理：リソース（ウィンドウ、リスナー）を適切にクリーンアップします
5. エラー処理：適切なエラー処理とクラッシュレポートを実装します
6. パフォーマンス：パフォーマンスを最適化し、デバッグには webContents を使用します
7. パッケージ化：パッケージ化には Electron Forge または electron-builder を使用します
8. 自動更新：本番アプリには自動アップデーターを実装します
9. ネイティブモジュール：ネイティブモジュールの互換性に対処します
10. クロスプラットフォーム：対象となるすべてのプラットフォームでテストします

リソース

• 公式ウェブサイト：https://www.electronjs.org/zh/
• ドキュメント：https://www.electronjs.org/zh/docs/latest/
• API リファレンス：https://www.electronjs.org/zh/docs/latest/api/app
• Electron Forge：https://www.electronforge.io
• Electron Fiddle：https://www.electronjs.org/zh/fiddle
• GitHub リポジトリ：https://github.com/electron/electron

キーワード

Electron, デスクトップアプリ, メインプロセス, レンダラープロセス, プリロード, IPC, BrowserWindow, Menu, Tray, Dialog, パッケージ化, electron-builder, electron-forge, electron-fiddle, クロスプラットフォーム, デスクトップアプリケーション, メインプロセス, レンダラープロセス, IPC 通信, ウィンドウ, メニュー, トレイ, パッケージ化