Web技術(HTML/CSS/JavaScript)を使ってデスクトップアプリを作れるElectron。この記事では、Electronの基本的な仕組みと、実際にアプリを開発する際のポイントを解説します。
Electronとは
Electronは、ChromiumとNode.jsを組み合わせたフレームワークで、Web技術だけでWindows、macOS、Linux向けのデスクトップアプリを開発できます。
有名なElectronアプリ
- Visual Studio Code
- Slack
- Discord
- Notion
これらの人気アプリもElectronで作られています。
Electronの基本構造
Electronアプリは大きく2つのプロセスで構成されます。
メインプロセス Node.jsが動作し、アプリのライフサイクルやウィンドウの管理を担当します。ファイルシステムへのアクセスやOSとのやり取りはここで行います。
レンダラープロセス Chromiumで動作し、UIを表示します。通常のWebページと同じようにHTML/CSS/JavaScriptを使って開発できます。各ウィンドウごとに独立したレンダラープロセスが起動します。
プロジェクトのセットアップ
まずは基本的なプロジェクト構成から始めましょう。
必要なパッケージ
npm install --save-dev electron
package.jsonの設定mainフィールドにメインプロセスのファイル（通常はmain.js）を指定し、scriptsに起動コマンドを追加します。
基本的なファイル構成
project/ ├── main.js (メインプロセス) ├── index.html (UI) ├── renderer.js (レンダラープロセスのスクリプト) └── package.json
ウィンドウの作成
BrowserWindowクラスを使って、アプリのウィンドウを作成します。
ウィンドウのサイズ、リサイズ可否、フレームの有無など、様々なオプションを設定できます。開発時はwebPreferencesでnodeIntegrationやcontextIsolationなどのセキュリティ設定に注意が必要です。
プロセス間通信（IPC）
メインプロセスとレンダラープロセス間でデータをやり取りするには、IPCを使います。
レンダラーからメインへipcRenderer.send()でメッセージを送信し、メイン側でipcMain.on()で受信します。非同期処理に適しています。
メインからレンダラーへwebContents.send()を使って、特定のウィンドウにメッセージを送信できます。
同期的な通信ipcRenderer.invoke()とipcMain.handle()を組み合わせることで、Promise/async-awaitベースの通信が可能です。
ファイル操作
Node.jsのfsモジュールを使えば、ローカルファイルの読み書きが自由に行えます。
セキュリティのポイント ファイルパスの選択にはdialog.showOpenDialog()やdialog.showSaveDialog()を使い、ユーザーに選ばせることでセキュリティリスクを軽減できます。
非同期処理 ファイル操作は必ず非同期メソッド（fs.promisesやasync/await）を使い、UIがブロックされないようにします。
メニューとトレイアイコン
ネイティブアプリらしい体験を提供するため、メニューやシステムトレイの実装も重要です。
アプリケーションメニューMenu.buildFromTemplate()でカスタムメニューを作成できます。ショートカットキーの設定や、プラットフォームごとの違いにも対応可能です。
システムトレイTrayクラスを使うことで、タスクバーやメニューバーにアイコンを表示できます。常駐型アプリケーションに便利です。
パッケージング
開発したアプリを配布するには、実行可能ファイルにパッケージングする必要があります。
electron-builder 最も人気のあるパッケージングツールです。Windows（.exe）、macOS（.app、.dmg）、Linux（.deb、.AppImage）など、様々な形式に対応しています。
設定のポイント
- アプリアイコンの準備（各プラットフォーム向け）
- コード署名（特にmacOS）
- 自動更新機能の組み込み
パフォーマンス最適化
Electronアプリは「重い」と言われがちですが、適切な最適化で改善できます。
起動時間の短縮
- 不要なモジュールの遅延ロード
- ウィンドウの段階的な表示
- キャッシュの活用
メモリ使用量の削減
- 不要なレンダラープロセスの終了
- 大きなデータの適切な管理
- DevToolsの本番ビルドでの無効化
よくある課題と解決策
セキュリティnodeIntegration: falseとcontextIsolation: trueを設定し、preloadスクリプトで必要な機能だけを公開します。
ファイルサイズ 不要な依存関係を削除し、electron-builderの圧縮オプションを活用します。アプリ本体は100MB以上になることも珍しくありません。
デバッグ メインプロセスは通常のNode.jsデバッグ、レンダラーはChrome DevToolsを使います。--inspectフラグも有効です。
まとめ
Electronを使えば、Web開発のスキルをそのまま活かして、本格的なデスクトップアプリを開発できます。学習コストが低く、クロスプラットフォーム対応も容易なため、個人開発者にとって強力な選択肢です。
まずは小さなアプリから始めて、徐々に機能を追加していくことをおすすめします。Electronの豊富なエコシステムとコミュニティが、開発をサポートしてくれるはずです。