【初心者向け】Electron + Reactで始めるデスクトップアプリ開発

Web開発のスキルを使って、Windows、macOS、Linux上で動く本格的なデスクトップアプリケーションを作ってみたいと思ったことはありませんか？ そんな願いを叶える強力なツールが「Electron」と「React」の組み合わせです。

この記事では、JavaScriptやWeb開発の経験がある方を対象に、ElectronとReactを使ってデスクトップアプリ開発を始めるための基礎知識から具体的なプロジェクトの構築方法、ビルド、配布までを、ステップバイステップで詳細に解説します。約5000語をかけて、この魅力的な組み合わせの世界へご案内します。

さあ、あなたのWeb開発スキルをデスクトップの世界へ広げましょう！

1. はじめに：デスクトップアプリ開発への第一歩

普段WebサイトやWebアプリケーションを開発している皆さんにとって、デスクトップアプリケーション開発は少し敷居が高いと感じるかもしれません。Java、C#、C++、Swift、Objective-Cなど、特定のプログラミング言語やフレームワークを学ぶ必要があると思われがちです。

しかし、「Electron」というツールが登場したことで、状況は大きく変わりました。Electronを使えば、あなたが慣れ親しんだJavaScript、HTML、CSSといったWeb技術スタックで、クロスプラットフォーム対応のデスクトップアプリケーションを開発できるのです。

そして、ユーザーインターフェース（UI）を構築する上で、宣言的で効率的なライブラリである「React」は非常に相性が良いパートナーです。多くのWeb開発者がUI構築に使っているReactをそのままデスクトップアプリにも活かせるのです。

この記事では、ElectronとReactの組み合わせがなぜ強力なのかを説明し、実際に簡単なデスクトップアプリケーションを作成しながら、その基本的な開発プロセスを習得することを目指します。

この記事で学ぶこと:

• Electronの基本的な仕組み（メインプロセスとレンダラープロセス）
• ElectronとReactを組み合わせるためのプロジェクト構成
• 開発環境のセットアップ方法
• ElectronとReact間でのデータ通信（IPC）
• アプリケーションのビルドと配布方法
• 開発におけるヒントと注意点

さあ、準備はいいですか？ デスクトップアプリ開発の旅を始めましょう！

2. ElectronとReact：なぜこの組み合わせなのか？

ElectronとReact、それぞれがどのような技術で、なぜ組み合わせるのが効果的なのかを見ていきましょう。

2.1 Electronの魅力と基本的な仕組み

Electronは、GitHubによって開発されたオープンソースのフレームワークです。Web技術を使って、クロスプラットフォーム（Windows, macOS, Linux）のデスクトップアプリケーションを構築できます。Slack、Visual Studio Code、Discord、Figma、Notionなど、多くの人気アプリケーションがElectronで開発されています。

Electronの核となっているのは、Webブラウザのレンダリングエンジンである「Chromium」と、JavaScriptの実行環境である「Node.js」です。

• Chromium: HTML、CSS、JavaScriptを解析・実行し、UIを表示する部分を担当します。これにより、Webページを表示するようにアプリケーションのUIを構築できます。
• Node.js: JavaScriptを使ってファイルシステムへのアクセス、ネットワーク通信、子プロセスの実行など、OSレベルの操作を行う部分を担当します。これにより、Webブラウザではできないデスクトップアプリケーション特有の機能（ファイルの読み書き、ネイティブメニューの操作など）を実現できます。

Electronアプリケーションは、大きく分けて二つのプロセスで構成されます。

1. メインプロセス (Main Process):

   • アプリケーションのエントリポイント（通常はmain.jsのようなファイル）です。
   • Node.js環境で実行されます。
   • アプリケーションのライフサイクル（起動、終了など）を管理します。
   • ウィンドウ（BrowserWindowインスタンス）を作成・管理します。
   • OSのネイティブ機能（メニューバー、ダイアログ、通知など）にアクセスします。
   • ファイルシステムやネットワークなど、Node.jsのAPIに直接アクセスできます。
   • アプリケーション内で一つだけ存在します。

2. レンダラープロセス (Renderer Process):

   • BrowserWindowインスタンスごとに生成されます。Webブラウザのタブやウィンドウに相当します。
   • Chromium環境で実行されます。
   • Webページ、つまりアプリケーションのUIを表示します。HTML、CSS、JavaScript（Reactコードなど）がここで実行されます。
   • 標準ではNode.js APIに直接アクセスできません（セキュリティのため）。
   • 複数のウィンドウを開けば、複数のレンダラープロセスが存在します。

メインプロセスとレンダラープロセスの関係:

メインプロセスはアプリケーション全体を管理し、レンダラープロセスは各ウィンドウのUIを担当します。両プロセスは、IPC (Inter-Process Communication) と呼ばれる仕組みを使って互いに通信します。例えば、レンダラープロセスでボタンがクリックされたときにファイルを保存したい場合、レンダラープロセスはIPCを使ってメインプロセスに「ファイルを保存してほしい」と依頼し、メインプロセスがNode.js APIを使って実際にファイルを保存する、という流れになります。

このメイン/レンダラーの分離が、Electronアプリケーションの構造を理解する上で最も重要です。

2.2 Reactの魅力とWeb開発との関連性

Reactは、Facebook（現Meta）によって開発されたJavaScriptのUI構築ライブラリです。その最大の魅力は、宣言的な方法でUIを構築できること、コンポーネント指向であること、そして効率的な描画を実現する仮想DOMです。

• 宣言的UI: ユーザーインターフェースの状態を定義するだけで、Reactが自動的にその状態を反映するようにUIを更新してくれます。手動でDOM要素を操作する手間が省け、コードがシンプルで予測しやすくなります。
• コンポーネント指向: UIを独立した再利用可能な部品（コンポーネント）に分割して開発できます。これにより、コードの管理が容易になり、保守性や拡張性が向上します。
• 仮想DOM (Virtual DOM): UIの変更を直接ブラウザのDOMに適用するのではなく、一度仮想DOM上で計算し、最小限の差分だけを実際のDOMに反映します。これにより、パフォーマンスの高いUI描画が可能になります。

Reactは元々Webブラウザ上で動作することを想定して設計されていますが、そのコアな思想は「UIを効率的に構築する」という点にあります。ElectronのレンダラープロセスはChromium上で動作するため、Webブラウザ環境と非常に似ています。したがって、ReactをレンダラープロセスのUI構築に使うことは、Web開発でReactを使うのとほとんど同じ感覚で行えます。

2.3 二つの技術を組み合わせるメリット

ElectronとReactを組み合わせる最大のメリットは以下の通りです。

• Web開発スキルを最大限に活用: HTML, CSS, JavaScript (JSX/TypeScript), Reactの知識があれば、デスクトップアプリを開発できます。新しい言語やUIフレームワークを学ぶ必要がありません。
• 開発効率の向上: Reactのコンポーネント指向や豊富なUIライブラリ、WebpackやBabelといったモダンなフロントエンド開発ツールチェーンを利用できるため、効率的にUIを構築できます。
• クロスプラットフォーム対応: 一つのコードベースでWindows, macOS, Linux向けにアプリケーションをビルドできます。
• リッチなUIとネイティブ機能の融合: Chromiumによる表現力豊かなUIと、Node.jsによるOSネイティブ機能へのアクセスを両立できます。
• 活発なコミュニティ: ElectronもReactも非常に人気があり、広範なドキュメント、チュートリアル、コミュニティサポートがあります。

デメリットとしては、ChromiumとNode.jsを同梱するため、アプリケーションのファイルサイズが比較的大きくなることや、Webブラウザよりもメモリ使用量が多くなる傾向があることが挙げられます。また、OSネイティブのUI要素に完全に一致させるのが難しい場合もあります。しかし、多くのアプリケーションにとって、これらのデメリットはWeb技術による開発のメリットを上回ることが多いです。

3. 開発環境の準備：必要なツールを揃えよう

Electron + React開発を始めるためには、いくつかのツールをインストールし、プロジェクトの初期設定を行う必要があります。

3.1 Node.jsとnpm/yarnのインストール

ElectronはNode.js上で動作し、React開発にはnpm (Node Package Manager) または Yarn といったパッケージマネージャーが必要です。まずはNode.jsをインストールしましょう。

Node.jsの公式サイト (https://nodejs.org/) から、推奨版（LTS版）をダウンロードしてインストールしてください。インストール時にnpmも一緒にインストールされます。

インストールが完了したら、ターミナルまたはコマンドプロンプトを開いて、正しくインストールされたか確認します。

bash
node -v
npm -v

それぞれのバージョン情報が表示されれば成功です。Yarnを使いたい場合は、npmを使ってインストールできます。

bash
npm install -g yarn
yarn -v

この記事では主にnpmコマンドを使って説明しますが、Yarnでも同様に進められます。

3.2 プロジェクトの作成と初期設定

開発用の新しいフォルダを作成し、ターミナルでそのフォルダに移動します。

bash
mkdir my-electron-react-app
cd my-electron-react-app

次に、npmを使ってプロジェクトの初期設定を行います。これによりpackage.jsonファイルが作成されます。

bash
npm init -y

-yオプションをつけることで、対話形式の質問をスキップし、デフォルトの設定でpackage.jsonを生成します。必要に応じて、後でpackage.jsonの中身を編集できます。

3.3 必要なパッケージのインストール（コア、ビルドツール、React）

Electron + React開発では、さまざまなnpmパッケージを使用します。これらをプロジェクトにインストールします。開発中にのみ必要なパッケージはdevDependenciesとしてインストールするのが一般的です。

“`bash
npm install –save-dev electron electron-builder webpack webpack-cli babel-loader @babel/core @babel/preset-react css-loader style-loader html-webpack-plugin cross-env concurrently wait-on

npm install –save react react-dom
“`

それぞれのパッケージの役割は以下の通りです。

• electron: Electron本体です。
• electron-builder: アプリケーションをビルドし、インストーラーなどを作成するためのツールです。
• webpack: JavaScriptモジュールをまとめて一つのファイルにバンドルするモジュールバンドラーです。Reactコード（JSXなど）やCSS、画像をElectronが実行できる形に変換・集約するために使用します。
• webpack-cli: Webpackをコマンドラインから実行するためのツールです。
• babel-loader, @babel/core, @babel/preset-react: 新しいJavaScriptの記法（ES6+）やJSXを、Electronが理解できる古いJavaScriptの記法に変換する（トランスパイルする）ためのBabelとそのローダーです。@babel/preset-reactはReact/JSXの変換に特化したプリセットです。
• css-loader, style-loader: CSSファイルをWebpackで処理し、JavaScriptモジュールとして読み込めるようにするためのローダーです。
• html-webpack-plugin: Webpackを使って、バンドルされたJavaScriptファイルを自動的に読み込むHTMLファイルを生成するプラグインです。
• cross-env: OSによらず環境変数を設定するためのツールです。開発モードと本番モードの切り替えなどに使います。
• concurrently: 複数のnpmスクリプトを同時に実行するためのツールです。ElectronとReactの開発サーバーを同時に起動する際に便利です。
• wait-on: 特定のURLやポートが使用可能になるまで待機するためのツールです。React開発サーバーが起動するのを待ってからElectronを起動するために使用します。
• react: React本体です。
• react-dom: ReactをDOM環境（WebブラウザやElectronのレンダラープロセス）で使うためのパッケージです。

これらのパッケージをインストールすると、package.jsonのdevDependenciesとdependenciesセクションに追加され、node_modulesフォルダに本体がダウンロードされます。

3.4 create-react-appを使う方法（補足）

Reactプロジェクトを始める一般的な方法としてcreate-react-appがありますが、Electronとの組み合わせには少し注意が必要です。create-react-appは主にシングルページWebアプリケーション（SPA）向けに最適化されており、Webpackなどの設定が隠蔽されています。Electronのレンダラープロセスとして使用することは可能ですが、Electron特有の設定（例えば、Node.js APIへのアクセス制御やプリロードスクリプトの指定など）を行うために、後から設定を公開（eject）したり、カスタム設定を上書きしたりする必要が出てくる場合があります。

初心者にとっては、まずこの記事のように手動で基本的な設定を理解することをお勧めします。手動で設定することで、ElectronとReactがどのように連携しているのか、Webpackがどのような役割を果たしているのかを深く理解できます。

今回は手動でのセットアップを進めていきます。

4. プロジェクトの基本構造を理解する

ここからは、実際にElectronとReactのコードを配置するためのディレクトリ構造と、開発に必要な設定ファイルについて見ていきます。

4.1 推奨ディレクトリ構成

プロジェクトを整理するために、以下のようなディレクトリ構成を推奨します。

my-electron-react-app/
├── package.json # プロジェクトの設定ファイル
├── webpack.config.js # Webpackの設定ファイル
├── main.js # Electronのメインプロセスエントリポイント
├── preload.js # Electronのプリロードスクリプト (後述)
└── src/ # ソースコードディレクトリ
├── index.html # レンダラープロセスが読み込むHTMLファイル
└── renderer/ # Reactアプリケーションのソースコード
├── index.js # Reactアプリケーションのエントリポイント
├── App.js # メインのReactコンポーネント
└── components/ # その他のReactコンポーネントなど
└── ...

• main.js: Electronアプリケーションの起動時に最初に実行されるファイルです。ここでウィンドウを作成したり、アプリケーション全体のイベントを処理したりします。
• preload.js: レンダラープロセスがページを読み込む前に実行されるスクリプトです。後述するIPC通信で重要になります。
• src/index.html: 各ウィンドウ（レンダラープロセス）で表示されるHTMLファイルです。ここにReactアプリケーションがマウントされます。
• src/renderer/: ReactコンポーネントやCSSファイルなど、レンダラープロセス側のコードを置く場所です。
• webpack.config.js: Webpackがsrc/renderer/以下のReactコードなどをビルドするための設定ファイルです。

4.2 package.json の設定：プロジェクトの心臓部

package.jsonはプロジェクトの設定や依存関係、実行可能なスクリプトなどを定義するファイルです。初期設定で作成されたpackage.jsonを編集します。

特に重要なのはmainフィールドとscriptsフィールドです。

json
{
"name": "my-electron-react-app",
"version": "1.0.0",
"description": "My first Electron + React application",
"main": "main.js", # Electronのメインプロセスエントリポイントを指定
"scripts": {
"start": "cross-env NODE_ENV=development webpack serve --config webpack.config.js --mode development",
"electron": "wait-on http://localhost:8080 && cross-env NODE_ENV=development electron .",
"dev": "concurrently \"npm start\" \"npm run electron\"",
"build-react": "cross-env NODE_ENV=production webpack --config webpack.config.js --mode production",
"build-electron": "electron-builder",
"build": "npm run build-react && npm run build-electron",
"package": "npm run build" # 古いバージョンとの互換性のためのエイリアス
},
"keywords": [],
"author": "",
"license": "MIT",
"devDependencies": {
"electron": "^29.1.6",
"electron-builder": "^24.13.3",
"webpack": "^5.91.0",
"webpack-cli": "^5.1.4",
"babel-loader": "^9.1.3",
"@babel/core": "^7.24.4",
"@babel/preset-react": "^7.24.1",
"css-loader": "^7.1.1",
"style-loader": "^4.0.0",
"html-webpack-plugin": "^5.6.0",
"cross-env": "^7.0.3",
"concurrently": "^8.2.2",
"wait-on": "^7.2.0"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"build": { # electron-builder の設定はこのフィールドに記述
"appId": "com.yourcompany.yourappname", # アプリケーションのユニークなID
"productName": "MyElectronReactApp", # アプリケーション名 (インストーラーなどに表示される)
"files": [ # ビルドに含めるファイル
"main.js",
"preload.js", # プリロードスクリプトも含める
"package.json",
"build/**/*" # Webpackでビルドしたファイル
],
"directories": {
"output": "dist", # ビルド出力先ディレクトリ
"buildResources": "resources" # アイコンなどのリソースフォルダ (任意)
},
"mac": {
"category": "public.app-category.utilities" # macOSでのカテゴリ
},
"win": {
"target": "nsis" # Windowsでのインストーラー形式 (nsis, portable, etc.)
},
"linux": {
"target": "AppImage" # Linuxでのパッケージ形式 (AppImage, deb, rpm, etc.)
}
}
}

scriptsの説明:

• npm start: cross-env NODE_ENV=developmentで開発環境を示す環境変数を設定し、webpack serveコマンドでWebpackの開発サーバーを起動します。このサーバーはReactアプリケーションをメモリ上でビルドし、ホットリロード機能を提供します。
• npm run electron: wait-on http://localhost:8080でWebpack開発サーバーが起動するのを待ってから、cross-env NODE_ENV=development electron .コマンドでElectronを実行します。electron .はカレントディレクトリのpackage.jsonのmainフィールドを見てmain.jsを実行します。
• npm run dev: concurrentlyを使ってnpm startとnpm run electronを同時に実行します。これにより、開発サーバーとElectronアプリが同時に起動し、コード変更が即座に反映されるようになります。
• npm run build-react: cross-env NODE_ENV=productionで本番環境向けにWebpackを使ってReactコードをビルドします。ビルド結果は後述するWebpack設定で指定したディレクトリ（通常はbuildやdist）に出力されます。
• npm run build-electron: electron-builderコマンドを実行し、Electronアプリケーションをパッケージング・ビルドします。ビルド対象のファイルや出力先はpackage.jsonのbuildフィールドで指定します。
• npm run build: npm run build-reactの後にnpm run build-electronを実行し、ReactコードのビルドからElectronアプリのビルドまでを一括で行います。

buildフィールドはelectron-builderが参照する設定です。appIdやproductName、ビルドに含めるファイルなどを指定します。

4.3 Webpackの設定：コードを変換しまとめる (webpack.config.js)

Webpackは、ReactのJSXや新しいJavaScriptの構文、CSSなどをElectron（Chromium）が理解できる形に変換し、依存関係を解決して一つまたは複数のJavaScriptファイルにまとめる役割を担います。また、開発サーバー機能も提供します。

プロジェクトのルートディレクトリにwebpack.config.jsファイルを作成し、以下のように記述します。

“`javascript
const path = require(‘path’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const webpack = require(‘webpack’); // Webpack itself

module.exports = (env, argv) => {
const isDevelopment = argv.mode === ‘development’;

return {
// Electronのレンダラープロセス向けにバンドル
target: ‘electron-renderer’,

// エントリポイント: Reactアプリケーションの開始ファイル
entry: './src/renderer/index.js',

// 出力設定: バンドルされたファイルの出力場所
output: {
  path: path.resolve(__dirname, 'build'), // 出力ディレクトリ
  filename: 'static/js/[name].[contenthash:8].js', // 出力ファイル名
  publicPath: isDevelopment ? '/' : './' // 公開パス (開発サーバー or ファイルシステム)
},

// モジュールの解決設定
resolve: {
  extensions: ['.js', '.jsx', '.json'], // .js, .jsx, .json ファイルをインポート時に拡張子省略可能にする
},

module: {
  rules: [
    {
      // JavaScript/JSX ファイルを Babel で処理
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            '@babel/preset-react', // React (JSX) を変換
            // 必要に応じて、ターゲット環境に応じたプリセットを追加 (例: @babel/preset-env)
          ],
        },
      },
    },
    {
      // CSS ファイルを処理 (style-loader はスタイルを <style> タグとして挿入)
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
    },
    {
      // 画像ファイルを処理 (file-loader または asset/resource)
      test: /\.(png|svg|jpg|jpeg|gif)$/i,
      type: 'asset/resource',
      generator: {
        filename: 'static/media/[name].[hash:8][ext]'
      }
    },
    {
      // フォントファイルを処理
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      type: 'asset/resource',
      generator: {
        filename: 'static/fonts/[name].[hash:8][ext]'
      }
    },
  ],
},

// プラグインの設定
plugins: [
  // HTMLファイルを生成し、バンドルされたスクリプトを自動的に挿入
  new HtmlWebpackPlugin({
    template: './src/index.html', // 元となるHTMLテンプレート
    filename: 'index.html',       // 出力されるHTMLファイル名
  }),
  // 環境変数をReactコード内で利用可能にする
  new webpack.DefinePlugin({
     // JSON.stringifyが必要なことに注意
    'process.env.NODE_ENV': JSON.stringify(argv.mode),
    'process.env.PUBLIC_URL': JSON.stringify(isDevelopment ? '/' : './')
  })
],

// 開発サーバーの設定 (開発モードのみ)
devServer: {
  static: {
    directory: path.join(__dirname, 'build'), // 静的ファイルの提供元
  },
  compress: true, // gzip圧縮を有効
  port: 8080, // 開発サーバーのポート番号
  historyApiFallback: true, // HTML5 History API を使う場合に必要 (React Routerなど)
  hot: true, // ホットモジュールリプレースメント (HMR) を有効
  // devMiddleware: {
  //   publicPath: '/',
  // },
},

// 開発ツール設定 (ソースマップなど)
devtool: isDevelopment ? 'eval-source-map' : 'source-map',

// パフォーマンスヒントの無効化 (Electronアプリではファイルサイズが大きくなるため)
performance: {
  hints: false,
},

// Electron特有の設定 (Node.js APIへのアクセスなど)
// target: 'electron-renderer' を設定済み
// electron-rendererターゲットでは、デフォルトでNode.jsモジュールは無視されないが、
// レンダラープロセスでのNode.js APIアクセスは BrowserWIndow の webPreferences で制御する

};
};
“`

この設定ファイルは、Webpackの基本的な機能を構成しています。特に重要なのは以下の点です。

• target: 'electron-renderer': Electronのレンダラープロセス向けにコードをバンドルすることを指定します。これにより、Node.jsの組み込みモジュールなどが正しく扱われるようになります。
• entry: ReactアプリケーションのメインとなるJavaScriptファイル（通常はindex.jsなど）を指定します。
• output: バンドルされたJavaScriptファイルやその他のアセットがどこに出力されるかを指定します。ここではbuildフォルダにstatic/js/配下に出力するように設定しています。
• module.rules: ファイルの種類に応じて、どのローダーを使って処理するかを指定します。ここではJavaScript/JSXファイルをBabelで、CSSファイルをcss-loaderとstyle-loaderで処理するように設定しています。
• plugins: Webpackの追加機能を有効にします。HtmlWebpackPluginはsrc/index.htmlをテンプレートとして、ビルドされたJavaScriptファイルを自動的に<script>タグとして追加した新しいindex.htmlをbuildフォルダに出力します。DefinePluginは環境変数をReactコード内で参照できるようにします。
• devServer: npm startコマンドで起動する開発サーバーの設定です。ポート番号やホットリロードの設定などを行います。
• devtool: デバッグ用のソースマップ生成設定です。開発中はeval-source-map、本番ビルドではsource-mapが推奨されます。

これで、ElectronとReactを連携させるための基本的な設定ファイル群が揃いました。

5. Electronアプリケーションの核：メインプロセス (main.js)

Electronアプリケーションは、メインプロセスから始まります。メインプロセスの役割は、アプリケーションの起動、ウィンドウの作成と管理、OSネイティブ機能との連携などです。

プロジェクトのルートディレクトリにmain.jsファイルを作成し、以下の基本的なコードを記述します。

“`javascript
const { app, BrowserWindow, ipcMain } = require(‘electron’);
const path = require(‘path’);
const isDev = require(‘electron-is-dev’); // 開発モードか判定するためのモジュール (必要に応じてインストール: npm install electron-is-dev)

let mainWindow; // ウィンドウオブジェクトをグローバル参照に保持

function createWindow() {
// 新しいブラウザウィンドウを作成します。
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// プリロードスクリプトを指定 (後述)
// レンダラープロセスがNode.js APIに直接アクセスするのを防ぎつつ、
// 安全なAPIを公開するために推奨される設定
preload: path.join(__dirname, ‘preload.js’),
nodeIntegration: false, // レンダラープロセスでのNode.js統合を無効化
contextIsolation: true, // コンテキスト分離を有効化 (推奨されるセキュリティ設定)
enableRemoteModule: false // remoteモジュールを無効化 (非推奨になったため)
},
});

// 開発モードと本番モードで読み込むコンテンツを切り替え
// 開発モード: Webpack開発サーバーから読み込む
// 本番モード: ビルドされたHTMLファイルを読み込む
const startUrl = isDev
? ‘http://localhost:8080’ // Webpack開発サーバーのURL
: file://${path.join(__dirname, 'build', 'index.html')}; // ビルドされたHTMLファイル

mainWindow.loadURL(startUrl);

// 開発ツールを開く (開発モードのみ)
if (isDev) {
mainWindow.webContents.openDevTools();
}

// ウィンドウが閉じられたときの処理
mainWindow.on(‘closed’, function () {
// ウィンドウオブジェクトへの参照を解除します。
mainWindow = null;
});
}

// Electronが初期化を完了し、ブラウザウィンドウを作成する準備ができたときに呼ばれます。
app.whenReady().then(() => {
createWindow();

// macOSでDockアイコンをクリックされたときにウィンドウを再作成する処理
app.on(‘activate’, function () {
if (mainWindow === null) {
createWindow();
}
});
});

// 全てのウィンドウが閉じられたときにアプリケーションを終了します。
app.on(‘window-all-closed’, function () {
// macOSでは、ユーザーがCmd + Qで明示的に終了するまで、アプリケーションとそのメニューバーはアクティブなままになるのが一般的です。
if (process.platform !== ‘darwin’) {
app.quit();
}
});

// アプリケーションがフォーカスを失ったときに最小化するなど、他のイベントリスナーもここに追加できます。

// IPC通信の例（ここでは受信側のみ）
ipcMain.on(‘set-title’, (event, title) => {
const webContents = event.sender;
const win = BrowserWindow.fromWebContents(webContents);
win.setTitle(title);
});

// プリロードスクリプトからのIPC通信を受ける例
ipcMain.on(‘send-message-to-main’, (event, message) => {
console.log(‘Message from renderer (via preload):’, message);
// レンダラープロセスにメッセージを返す例
if (mainWindow) {
mainWindow.webContents.send(‘message-from-main’, ‘Received your message: “‘ + message + ‘”‘);
}
});
“`

このコードの重要な部分を解説します。

• const { app, BrowserWindow, ipcMain } = require('electron');: Electronモジュールから必要なオブジェクト（アプリケーション全体を制御するapp、ウィンドウを作成するBrowserWindow、メインプロセス側のIPCモジュールipcMain）をインポートしています。
• let mainWindow;: 作成したウィンドウオブジェクトを保持するための変数です。ウィンドウが閉じられたときに参照を解除するため、グローバルまたはスコープ外からアクセス可能な場所で宣言します。
• createWindow()関数: BrowserWindowクラスのインスタンスを作成し、ウィンドウのサイズや、webPreferences を設定します。
  • webPreferences: Electron開発において最も重要な設定の一つです。レンダラープロセス（Reactコードが動く環境）の挙動を制御します。
    • preload: レンダラープロセスがスクリプトを実行する前に読み込まれるプリロードスクリプトのパスを指定します。これは、Node.js APIへの安全なアクセスを提供したり、IPC通信を設定したりするために使われます。（後述のpreload.jsで詳しく説明します）
    • nodeIntegration: false: 非常に重要です！ これをfalseに設定すると、レンダラープロセスで直接requireやNode.jsの組み込みモジュール（fs, pathなど）を使うことができなくなります。セキュリティ上の理由から、デフォルトでfalseに設定し、必要な機能はプリロードスクリプト経由で安全に公開するのが推奨されます。
    • contextIsolation: true: これも非常に重要です！ これをtrueに設定すると、プリロードスクリプトとレンダラープロセスのJavaScriptコンテキストが分離されます。これにより、悪意のあるスクリプトがプリロードスクリプトで公開されたAPIにアクセスしたり、ElectronやNode.jsのグローバルオブジェクトを改変したりするのを防ぎます。デフォルトでtrueに設定することを強く推奨します。
    • enableRemoteModule: false: remoteモジュールは非推奨になり、セキュリティリスクがあるため無効化します。代わりにIPC通信やcontextBridgeを使用します。
• startUrl: 開発モード (isDevがtrue) のときは、Webpack開発サーバーのURL (http://localhost:8080) を読み込みます。これにより、コードを変更したときにホットリロードが効くようになります。本番モードのときは、webpackでビルドされたindex.htmlファイルをローカルファイルとして読み込みます。
• mainWindow.loadURL(startUrl);: 作成したウィンドウに指定したURLまたはファイルを読み込ませます。
• mainWindow.webContents.openDevTools();: 開発者ツールを開きます。Web開発で慣れ親しんだChrome DevToolsと同じものが使えます。Element、Console、Network、Applicationなどのタブを使って、レンダラープロセスのデバッグができます。
• app.whenReady().then(...): Electronアプリケーションの初期化が完了した後に実行される処理を定義します。ここでcreateWindow()を呼び出して最初のウィンドウを作成します。
• app.on('window-all-closed', ...): 開いているすべてのウィンドウが閉じられたときに呼ばれるイベントハンドラです。通常、ここでアプリケーションを終了させます。macOSではドックにアイコンが残るため、プラットフォームを判定して終了処理を分けるのが一般的です。
• app.on('activate', ...): macOSで、アプリケーションがアクティブ化された（ドックのアイコンをクリックされたなど）ときに呼ばれるイベントハンドラです。ウィンドウが一つも開いていない場合に新しいウィンドウを作成する処理を記述します。
• ipcMain.on(...): レンダラープロセスから送られてきたIPCメッセージを受信するリスナーを設定します。この例では、set-titleとsend-message-to-mainというチャンネルでメッセージを受け取っています。

このmain.jsファイルは、Electronアプリケーションの全体を制御する司令塔のような役割を果たします。

6. Reactアプリケーションの実装：レンダラープロセス

Electronのレンダラープロセスは、Chromium上で動作するWebページのようなものです。ここにReactを使ってUIを構築します。

6.1 Reactアプリケーションのエントリポイント (src/renderer/index.js)

Reactアプリケーションの開始地点となるファイルです。通常、ここでReactのルートコンポーネントをDOMにマウントします。

src/renderer/index.jsファイルを作成し、以下のように記述します。

“`javascript
import React from ‘react’;
import ReactDOM from ‘react-dom/client’; // React 18 の場合
import App from ‘./App’; // 作成するReactコンポーネントをインポート
import ‘./index.css’; // 必要に応じてグローバルCSSをインポート

// React 18 の場合
const container = document.getElementById(‘root’);
const root = ReactDOM.createRoot(container);
root.render(



);

// React 17 以前の場合
// import ReactDOM from ‘react-dom’;
// ReactDOM.render(
//
//
// ,
// document.getElementById(‘root’)
// );
“`

このコードは、HTMLファイル（後述するsrc/index.html）内にIDがrootの要素があることを想定しています。ReactDOM.createRoot()（React 18）またはReactDOM.render()（React 17以前）を使って、<App />コンポーネントをその要素にレンダリングしています。<React.StrictMode>は開発中の潜在的な問題を検出するためのラッパーです。

6.2 最初のReactコンポーネントを作成する (src/renderer/App.js)

Reactアプリケーションのメインコンポーネントを作成します。ここでは、簡単なテキストを表示し、Electronの機能と連携するボタンを追加してみましょう。

src/renderer/App.jsファイルを作成し、以下のように記述します。

“`javascript
import React, { useState, useEffect } from ‘react’;

function App() {
const [message, setMessage] = useState(‘Waiting for message from main process…’);
const [appTitle, setAppTitle] = useState(‘My Electron App’);

// コンポーネントがマウントされたときに一度だけ実行される処理
useEffect(() => {
// プリロードスクリプトで公開されたAPIが存在するか確認
if (window.electronAPI) {
// メインプロセスからのメッセージを受信するリスナーを設定
const removeListener = window.electronAPI.onMessageFromMain((event, msg) => {
setMessage(msg);
});

  // コンポーネントがアンマウントされるときにリスナーを解除
  return () => removeListener();

} else {
  setMessage('Electron API not available in this environment.');
}

}, []); // 空の配列を渡すことで、マウント時とアンマウント時にのみ実行される

// ボタンクリック時にメインプロセスにメッセージを送る関数
const sendMessageToMain = () => {
if (window.electronAPI) {
window.electronAPI.sendMessageToMain(‘Hello from renderer!’);
} else {
console.error(‘Electron API not available.’);
}
};

// ボタンクリック時にウィンドウタイトルを変更する関数
const changeTitle = () => {
if (window.electronAPI) {
// 例: 入力フィールドの値を使う
// const newTitle = document.getElementById(‘titleInput’).value;
const newTitle = New Title ${Math.random().toFixed(2)}; // 例としてランダムなタイトル
setAppTitle(newTitle);
window.electronAPI.setTitle(newTitle);
} else {
console.error(‘Electron API not available.’);
}
};

return (

  <button onClick={sendMessageToMain} style={{ marginRight: '10px' }}>
    メインプロセスにメッセージ送信
  </button>
  <button onClick={changeTitle}>
    ウィンドウタイトル変更
  </button>

  {/* 必要に応じて入力フィールドなどを追加 */}
  {/* <br/>
  <input type="text" id="titleInput" placeholder="新しいタイトルを入力"/> */}
</div>