Electron

Electronとは #

Electronは、JavaScript、HTML、CSSによるデスクトップアプリケーションを構築するためのフレームワークです。ChromiumとNode.jsをバイナリに組み込むことで、単一のJavaScriptコードベースを維持しながら、ネイティブ開発経験がなくてもWindows、macOS、Linuxで動作するクロスプラットフォームアプリを作成できます。

プロセスモデル #

Electronはブラウザに似たマルチプロセスアーキテクチャを採用しています。このアーキテクチャにより、アプリケーション全体の安定性と安全性が向上します。

メインプロセス #

各Electronアプリには単一のメインプロセスがあり、アプリケーションのエントリーポイントとして機能します。メインプロセスはNode.js環境で実行され、Node.jsのAPIを使用できます。主な役割は以下の通りです：

• ウィンドウ管理: BrowserWindowモジュールを使用してアプリケーションウィンドウを作成・管理します。
• アプリケーションライフサイクル: appモジュールを通じてアプリケーションの起動や終了などのライフサイクルを制御します。
• ネイティブAPI: オペレーティングシステムとの対話を可能にするAPIを提供します（メニュー、ダイアログ、トレイアイコンなど）。

レンダラープロセス #

各BrowserWindowインスタンスは、それぞれ独立したレンダラープロセスを生成します。レンダラープロセスはウェブコンテンツのレンダリングを担当し、基本的にはウェブ標準に従って動作します。

• HTMLファイルがレンダラープロセスのエントリーポイントとなります。
• UIスタイリングはCSS（カスケーディングスタイルシート）で行います。
• 実行可能なJavaScriptコードは<script>要素を通じて追加します。

レンダラープロセスは直接requireやその他のNode.js APIにアクセスできません。ウェブ開発と同様に、NPMモジュールを使用するにはwebpackやparcelなどのバンドラーツールを使用する必要があります。

プリロードスクリプト #

プリロードスクリプトは、ウェブコンテンツが読み込まれる前にレンダラープロセスで実行されるコードです。これらのスクリプトはレンダラーコンテキスト内で実行されますが、Node.js APIにアクセスできるという特権を持っています。

プリロードスクリプトは、BrowserWindowコンストラクタのwebPreferencesオプションでメインプロセスにアタッチできます。

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
  webPreferences: {
    preload: 'path/to/preload.js'
  }
})

プリロードスクリプトは主に以下の目的で使用されます：

• ipcRendererヘルパーをレンダラーに公開し、プロセス間通信（IPC）を使用してメインプロセスのタスクをレンダラーからトリガーする。
• リモートURLでホストされている既存のウェブアプリのElectronラッパーを開発する場合、デスクトップ専用のロジックのためにレンダラーのwindowグローバルにカスタムプロパティを追加する。

ユーティリティプロセス #

Electronアプリは、UtilityProcess APIを使用してメインプロセスから複数の子プロセスを生成できます。ユーティリティプロセスはNode.js環境で実行され、Node.jsのAPIを使用できます。

ユーティリティプロセスは以下のような用途に使用できます：

• 信頼されていないサービスのホスティング
• CPU負荷の高いタスク
• クラッシュしやすいコンポーネント

ユーティリティプロセスとNode.jsのchild_process.forkで生成されるプロセスの主な違いは、ユーティリティプロセスがMessagePortsを使用してレンダラープロセスと通信チャネルを確立できることです。

コンテキスト分離 #

コンテキスト分離は、プリロードスクリプトがレンダラーのメインワールドから分離され、特権APIがウェブコンテンツのコードに漏れるのを防ぐセキュリティ機能です。

特権APIをウェブコンテンツに安全に公開するには、contextBridgeモジュールを使用します：

const { contextBridge } = require('electron')
contextBridge.exposeInMainWorld('myAPI', {
  desktop: true
})

これにより、レンダラープロセスのウェブコンテンツからwindow.myAPIとしてアクセスできるようになります。

Electron Fiddle #

Electron FiddleはElectronで書かれたサンドボックスアプリで、ElectronのAPIを試したり開発中の機能を試作するための学習ツールです。ドキュメントとうまく統合されており、チュートリアルのサンプルを「Electron Fiddleで開く」ボタンで直接ロードできます。

開発リソース #

Electronの開発に役立つリソースは以下の通りです：

• 公式ドキュメント
• API リファレンス
• コミュニティDiscordサーバー
• GitHub