Electron入門 ①：概要と基本的な環境構築

2025年8月3日2025年8月5日

この記事では、デスクトップアプリケーション開発フレームワークElectronについて、その概要と基本的な環境構築方法についてまとめています。

この記事で分かること

Electronの概要と導入方法（新規プロジェクト作成～最小構成での動作チェック）
Electronの基本的な動作/プロセスの仕組み

Electronの概要

Electron は、Web技術ベースのデスクトップアプリケーション開発を実現するフレームワークです。

特徴

Web技術及び、ReactやViteなどといった関連フレームワークが利用可能
クロスプラットフォーム対応 (Windows / macOS / Linux )
Node.jsとChromiumが統合 = Node.jsのAPIも利用可能
Visual Studio Code / Slack / Discord など、多様なアプリ開発で採用

注意点

ファイルサイズが大きい：Chromiumを同梱するため、配布サイズが100MB前後になる
メモリ使用量がやや多い：Chromeのようにプロセスを分けて動作するため
セキュリティ面で要注意：Node.jsをRendererで直接使うと脆弱性の原因になりやすい（→ preload経由で対策可）

新規Electronプロジェクトの作成

ここからは、Electronプロジェクトの新規作成方法と、そのために必要な準備についてまとめていきます。

事前準備

Electronの開発には、Node.jsランタイム(+付属のnpm) が必要です。

未導入の場合は、以下ダウンロードページからLTS版のインストーラーをダウンロードします。

Node.jsインストール手順 (インストーラー利用)

ここでは、インストーラーを使用したNode.jsのインストールについて簡単にまとめます。

まずは公式ダウンロードページから使用OS/アーキテクチャを確認のうえ、インストーラーをダウンロードします。

基本的にインストーラーは画面の指示に従い、デフォルトで進行していけばOKですが、一部解説しておきます。

チェックボックス：
Automatically install the necessary tools. Note that this will also install Chocolatey. The script
will pop-up in a new window after the installation completes.

これは、
「一部npmモジュール用に必要なツールを事前にインストールしておくか」
の意で、基本的にはチェックせずにインストールで問題ありません。
（必要に応じて随時インストールで対応可）

インストール完了後、コマンドプロンプトを起動して node -v , npm -v でバージョン出力の確認ができます。

hiramame

インストール完了後は、一度PCを再起動しておくと、動作が安定します。

インストール完了後、コマンドプロンプトで以下コマンドを実行し、バージョン情報が出力されていればOKです。

$ node -v
vXX.XX.X

$ npm -v
X.X.X

コードエディタについては、公式Docページで Visual Studio Code の使用が推奨されており、この記事でもVSCodeを使用しますが、基本的にはどのエディタでもOKです。

初期化とElectronインストール

まずは、プロジェクトフォルダの作成と初期化を行います。

任意の名称でプロジェクトフォルダを作成し、VSCodeで開きます。（例では「my-electron-test-app」という名称で作成）

メニュー「ターミナル」＞「新しいターミナル」（Ctrl＋Shift＋＠）から、新規ターミナルを開き、
エディタ下部に表示されたターミナルの「＋」ボタン横のプルダウンから「Command Prompt」を選択します。

ターミナルの追加メニュー＞「規定のプロファイルの選択」から、基底とするターミナルの設定も可能です。

展開したターミナルで、npm init -y を実行し、npmパッケージを初期化します。

npm init -y

hiramame

通常、npm initは、プロジェクトフォルダ直下に移動して実行する必要がありますが、VSCodeでターミナルを開いた場合は、開いているフォルダの場所でターミナルが開かれるのでそのまま実行できます。

この時点で、以下のように　package.json がプロジェクトフォルダ直下に生成されます。

npm init とは

npm initとは、init(=initialize)の意味の通りnpmの初期化処理実行コマンドです。

ここで生成されるpackage.jsonはインストールパッケージの管理を行うためのもので、これを追加のインストールや環境設定の変更時に都度更新していくことでnpmでのトラブルを防ぎます。

補足：コマンドプロンプトのみで操作する場合

VSCodeを使わなくても、コマンドプロンプトを使用することで簡単に新規プロジェクトフォルダの作成～初期化までを実行することもできます。

以下のコマンドは1行で、「新規フォルダ作成→移動→初期化」の一連の処理を実行します。
(「my-electron-test-app」部分は、任意の名称に変更してください)

 mkdir my-electron-test-app && cd my-electron-test-app npm init -y

続いて、以下コマンドを実行し、開発用依存関係にElectronをインストールします。：

npm install electron --save-dev

正常にインストールが完了すると、プロジェクトフォルダ直下に、

node_modules フォルダ
package-lock.json ファイル

が追加され、元々あったpackage.jsonファイルも以下のようにElectronの設定が追記されています。

hiramame

Gitを使用する場合、このタイミングでNode.js用の.gitignoreテンプレートをプロジェクトルート直下へ配置しておくと便利です

最小構成での動作テスト

先ほど作成したプロジェクトフォルダに、最小構成で各ファイルを構成していきます。

最終的なファイル構成は以下の状態になります：

表示ページ(≒レンダラープロセス)の作成

まずはアプリの画面として表示させるHTMLファイルを作成していきます。

プロジェクトフォルダ直下に index.html というファイルを作成し、以下のように記述します。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8" />

    <!-- コンテンツセキュリティポリシー(CSP)設定：XSSなどを防ぐための読み込み制限-->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" />

    <title>Electronテストページ</title>
</head>

<body>
    <h1>Hello, Electron!</h1>
    <p>これはRendererプロセスで表示されています。</p>
</body>

</html>

hiramame

表示させるページにはHTMLファイルだけでなく、リモートウェブアドレスを指定することも可能です。

Electronメインプロセスの作成

続いて、Electronのメインプロセスを作成していきます。
プロジェクトフォルダ直下に main.js という名前でJavaScriptファイルを作成し、以下のように記述していきます。

// Electron の主要モジュールを読み込み
const { 
  app,           // アプリケーションのライフサイクル（起動・終了など）を制御
  BrowserWindow, // ブラウザウィンドウ（レンダラー）の作成
} = require('electron');

console.log('main.js - start:OK')   // 起動確認テスト用出力

// ウィンドウ作成関数
const createWindow = () => {
    // 新規ウィンドウインスタンスを生成
    const win = new BrowserWindow({
        width: 800,
        height: 600,
    });

    // 作成したウィンドウに `index.html` を読み込む（ローカルファイル）
    win.loadFile('index.html');
};

// アプリの起動準備完了時
app.whenReady().then(() => {
    // ウィンドウを生成
    createWindow();

    //macOS用：Dockから再クリック時などに呼ばれるイベント`activate`発生時
    app.on('activate', () => {
        //ウィンドウがすべて閉じられていた場合、新しいウィンドウを再作成
        if (BrowserWindow.getAllWindows().length === 0) createWindow();
    });
});

// すべてのウィンドウが閉じられた時
app.on('window-all-closed', () => {
    // macOSではない場合、アプリ終了
    if (process.platform !== 'darwin') app.quit();
});

コード解説：main.js

このコードは Electron の基本的なメインプロセス（main.js）で、デスクトップアプリを起動してウィンドウを表示するための最低限の処理が書かれています。

モジュールの読み込み：

const { 
  app,           // アプリケーションのライフサイクル（起動・終了など）を制御
  BrowserWindow, // ブラウザウィンドウ（レンダラー）の作成
} = require('electron');

主にアプリ全体の制御を担当しており、以下のようなモジュールを使用します。

モジュール	説明
app	Electron アプリ全体のライフサイクル（起動・終了・フォーカスなど）を管理するオブジェクト。
BrowserWindow	ネイティブウィンドウ（アプリのウィンドウ部分）を作成するためのクラス。ここで作ったウィンドウは内部的に Chromium（ブラウザエンジン）で描画されます。

起動確認用ログ出力：
以下は、アプリ起動時に main.js が正しく実行されているか確認するための出力をおこなっています。

console.log('main.js - start:OK');

ウィンドウ作成関数 createWindow：
　・const win = new BrowserWindow（BrowserWindow インスタンス作成）
　　…ウィンドウサイズ（幅 800px × 高さ 600px）を指定して新しいウィンドウを生成します。
　・loadFile(‘index.html’)
　　…作成したウィンドウにローカルファイル index.html を読み込みます（アプリの表示内容）

const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
    });

    win.loadFile('index.html');
};

アプリ起動時処理：
　・app.whenReady()
　　…Electron の初期化が完了時に呼ばれる
　　（Windows/Linux では1回、macOS では再度 Dock クリック時にも呼ばれる）。

　・macOS の activate イベント
　　…macOS では Dock のアイコンをクリックしてアプリを再アクティブ化することがあります。
　　そのときウィンドウがなければ新しく作成するための処理を追加しています。

app.whenReady().then(() => {
    createWindow();

    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow();
    });
});

全ウィンドウが閉じられたとき：
　・Windows / Linux では、全ウィンドウが閉じられたらアプリを終了します。
　・macOS ではウィンドウを閉じても Dock にアプリが残るのが標準挙動なので終了しないように設定します

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit();
});

エントリーポイントとコマンドの設定

package.json を以下のように編集し、Electron用のエントリーポイントとコマンドの設定を行います。

エントリーポイントの設定："main" : "index.js" を "main": "main.js" へ変更
起動コマンドの設定　　　："scripts":　に、"start": "electron ."を追加

{
  "name": "my-electron-test-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^37.2.5"
  }
}

起動と動作確認

先ほど package.json で登録したコマンド start を以下のように使用することで、Electronアプリを起動できます。

npm run start

アプリケーションが起動するほか、コンソールでは main.js で設定した
console.log('main.js - start:OK') // 起動確認テスト用出力　　の表示がされていることを確認できます。

基本的な動作の仕組み

最後に、ここまでに構築したファイルの内容を踏まえて、Electronの基本的な動作の仕組みについて整理しておきます。

Electronアプリは、以下 2つのプロセス＋プロセス間通信(IPC) によって構成されます：

プロセス名	説明
Mainプロセス	アプリ全体を制御するプロセス。（`main.js`など）ウィンドウの生成・管理が主な役割で、Node.jsのAPIが使用可能。
Rendererプロセス	各ウィンドウ内で動作するプロセス。 UIを描画する役割で、要はMainプロセス以外のJavaScript部分。
プロセス間通信(IPC)	Main ⇔ Renderer 間の通信を行う処理。 MainとRendererでの連携を行い、アプリ各種動作を実現する。

処理の流れ（要約）

以下にElectronアプリにおける処理の流れについてまとめます。
（かなり簡略化した内容となりますので、あくまで概要を把握するための参考程度にご確認ください）

Mainプロセス起動（main.js）
- Electronのappモジュールがアプリ起動を待機
- 起動後、BrowserWindowでウィンドウを生成
Rendererプロセス起動
- 指定されたHTMLファイル（またはウェブアドレス）を読み込む
- UIが表示され、ユーザー操作を受け付ける
プロセス間通信（IPC）
- RendererからMainへの通信 → ipcRenderer.send(...)
- MainからRendererへの通信 → mainWindow.webContents.send(...)
- 通信には electron.ipcMain / electron.ipcRenderer を使う

Electron入門➁：Preloadスクリプトの基本この記事では、Electronにおける重要な機能の一つであるPreloadスクリプトについて、その概要と基本的な使い方をまとめています。この記事で分かること Electronにおけ…

おすすめの本

リンク

URLをコピーしました！