ElectronでReactをセットアップする

ReactとElectronのセットアップは、ViteのReactプロジェクトを作成し、electronとelectron-builderをdevDependenciesとして追加することから始めます。最終的にプロジェクトには2つのエントリーポイントが用意されます。レンダラー用のViteアプリと、Electronのメインプロセス用のmain.jsファイルです。

main.jsはElectronのエントリーポイントです。希望するウィンドウサイズとセキュリティ設定でBrowserWindowを作成し、Reactアプリを読み込みます。開発中はlocalhost:5173を、本番環境ではビルド済みファイルのパスを指定します。

electron-viteは、ViteとElectronを統合するオールインワンのビルドツールです。複雑なマルチプロセスのビルド設定を自動的に処理します。メイン、preload、レンダラー用に個別のVite設定を提供し、開発ビルドと本番ビルドの両方を大幅に簡略化します。

Electron向けにViteを設定する場合は、自動検出に頼らず、ブラウザーのターゲットを明示的に指定する必要があります。これは、レンダラーがElectronに組み込まれた特定バージョンのChromiumで実行されるためです。electron-viteはこれを自動的に処理しますが、手動で設定する場合は、ビルドターゲットにChromeのバージョンを指定する必要があります。

electron-vite devを実行すると、レンダラー用のVite開発サーバーとElectronのメインプロセスが同時に起動します。Vite開発サーバーはHot Module Replacementを提供するため、Reactコンポーネントの変更が完全な再起動なしでElectronウィンドウに即座に反映されます。

Electronのレンダラーでも、HMRはブラウザーと同じように機能します。編集中のコンポーネントは状態を保持したまま即座に再レンダリングされます。main.jsまたはpreloadスクリプトを変更した場合だけ、Electron全体の再起動が必要です。これらはViteのHMRの対象外で実行されるためです。

Electron + React + TypeScriptのプロジェクトでは、メイン（Node.js/CommonJSを対象）、preload（Nodeのグローバル変数を備えたブラウザーに近い環境を対象）、レンダラー（標準的なブラウザー向けTypeScript）それぞれに、個別のtsconfigファイルが必要です。electron-viteはこれらの設定を自動的に構成します。

preloadスクリプトでは、contextBridge.exposeInMainWorldを使用して独自のAPIをレンダラーに公開します。一般的なパターンは、「api」のような名前空間を公開し、その中にipcRenderer.invokeの呼び出しをラップする関数を用意する方法です。これにより、Reactコンポーネントからメインプロセスの操作を扱うための、シンプルな非同期インターフェースを利用できます。

Reactコンポーネントからは、window.api.myFunction()を呼び出して公開されたpreload APIを実行します。TypeScriptを使用する場合は通常、グローバル宣言（window: Window & { api: MyAPI }）を追加します。これにより、公開されたインターフェースに対する型チェックと自動補完を利用できます。

electron-vite buildは、3つすべてのターゲット（メイン、preload、レンダラー）をdist/フォルダーにコンパイルします。続いてelectron-builderが、それらをプラットフォーム固有のインストーラーにパッケージ化します。本番環境のmain.jsは、開発サーバーのURLではなく、バンドルされたファイルのパスからレンダラーを読み込みます。

セットアップで最もよくあるミスは、nodeIntegration:falseとcontextIsolation:trueを設定し忘れること（セキュリティホールの原因になります）、main.jsで誤ったURLを読み込むこと（開発環境と本番環境の取り違え）、レンダラーからElectronモジュールを直接インポートすること（クラッシュの原因になります）です。electron-viteのデフォルト設定により、これらの問題の大半は防止されます。

electron-vite devを実行すると何が行われますか？

ReactとElectronのセットアップは、マルチプロセスのビルドに伴う複雑さを処理するelectron-viteによって効率化されます。開発ワークフローでは完全なHMRサポートを利用でき、contextBridgeによってレンダラーのAPI公開範囲を保護できます。また、TypeScriptの個別設定により、各プロセスに適切な型環境が用意されます。本番ビルドではelectron-builderを使用して、プラットフォーム固有のパッケージを作成します。