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 サンプル（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

例とテンプレート

このスキルには、公式ドキュメントの構成に合わせて整理された詳細な例が含まれています。すべての例は examples/ ディレクトリにあります（上記の対応関係を参照）。

例を使用するには：

• ユーザーのリクエストからトピックを特定します
• 上記の対応関係に基づいて、適切な例のファイルを読み込みます
• そのファイルに記載された手順、構文、ベストプラクティスに従います
• コード例を具体的なユースケースに合わせて調整します

テンプレートを使用するには：

• よくあるひな形については、templates/ ディレクトリのテンプレートを参照します
• テンプレートを具体的なニーズやコーディングスタイルに合わせて調整します

API リファレンス

詳細な API ドキュメントは、公式の Electron API ドキュメントの構成に合わせて整理され、api/ ディレクトリで利用できます。

コア 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
• api/dialog.md - Dialog API

API リファレンスを使用するには：

1. 確認したい API を特定します
2. api/ ディレクトリから対応する API ファイルを読み込みます
3. API のシグネチャ、パラメーター、戻り値の型、例を確認します
4. 詳細な使用パターンについては、リンク先の例のファイルを参照します
5. すべての API ファイルには、examples/ ディレクトリ内の関連する例のファイルへのリンクがあります

ベストプラクティス

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 通信、ウィンドウ、メニュー、トレイ、パッケージ化