この記事では、Electron Builder を用いて、Electronアプリをパッケージ化(ビルド)する際の手順について、最小限の構成でまとめています。
- Electronアプリをパッケージ化する方法
- ElectronBuilderの導入方法と、最小限の設定方法
- ビルドされたアプリの構成（展開済みアプリ/ インストーラー形式）と動作確認方法
1. Electron Builder のインストール
まずはビルドツール自体をプロジェクトに追加します。
npm install --save-dev electron-builderpackage.json を開くと、以下のようにElectronBuilderが追加されていることが確認できます。
--save-dev は開発時だけ必要な依存関係として追加するオプションです。
Electron Builderは本番配布用パッケージ生成のためのツールなので、アプリ内には同梱しません。
2. package.json にビルド用スクリプトを追加
package.json の "scripts" にビルド用コマンドを追加します。
{
"scripts": {
"start": "electron .",
"dist": "electron-builder"
}
}npm run dist でビルドできるようになります。
Electron Builderは dist というコマンド名が慣例的に使われますが、任意の名前でもOKです。
3. build 設定の追加
Electron Builder は設定を 3種類の場所で受け付けます。
（適用される設定の優先度は、専用ファイル（.json / .yml） > package.json の build セクション）
package.jsonの"build"セクションへの記述- JSON形式のファイル（例：
electron-builder.json） - YAML形式のファイル（例：
electron-builder.ymlまたは.yaml）
今回は、コメント記述への対応や管理面でのメリットから、YAMLファイルによる方法を使います。
ビルド設定ファイルの作成
プロジェクトのルートディレクトリ（package.json と同じ階層）にelectron-builder.yml または electron-builder.yaml を作成します。
ここでの「electron-builder」という名称はElectronBuilderで定められた使用設定ファイル名のデフォルト値であるため、そのままファイル名で作成してください。（変更する場合は–config オプションを使用します）
※詳細は公式ドキュメント：Common Configurationで確認できます。
最小限のビルド設定例は以下のようになります。
# 表示されるアプリ名
productName: My Electron App
# 出力フォルダ
directories:
output: dist
# 含めるファイル/フォルダ
files:
- index.html
- main.js
- preload.js
- renderer.js
- package.json
productNameはアプリ名やインストーラー表示名に使われますdirectories.outputは生成物の出力先filesにはビルド時の対象として含めるファイル（もしくはそれを含むフォルダ）を指定します。
→node_modules や package-lock.json は不要なため含めていません
【補足】設定ファイル読み込みの仕組みについて
Electron Builderは起動時に、次の順で設定を探します。
- プロジェクトルートの専用ファイル
electron-builder.yml→electron-builder.yaml→electron-builder.jsonの順でチェック
package.jsonの"build"セクション
専用ファイルが見つかると、その内容を設定として読み込みます。
内部的には以下の流れです。
- electron-builder CLI実行
- 設定ファイルを探索（ルート直下）
- YML/JSONを読み込み → JSオブジェクトに変換
- Electron Builderのビルド処理へ渡す
- 各OS別ターゲットに応じてパッケージ生成
4. ビルドの実行
設定ができたらコマンドを実行します。
npm run dist実行後、dist/ ディレクトリにOS別のインストーラーや実行ファイルが生成されます
※ Windowsなら .exe、macOSなら .dmg、Linuxなら .AppImage などが出力されます
5. 出力物の確認
生成されたファイルを実際に起動して、想定どおり動作するか確認します。（ここでは、Windows環境を例に解説しています）
生成されるファイルの構成と意味は、それぞれ以下の通りです。
| 出力物 | 用途・概要 | 配布について |
|---|---|---|
| win-unpacked/ | ・展開済みアプリ本体 ・インストール不要で動作チェックに便利 | 基本的には開発確認用 （Zipファイル等で配布も可能だが一般的ではない） |
| Setup.exe | インストーラー（NSISなど） | ✅ 配布用のメインインストーラー |
| .blockmap | ・差分アップデート用ブロックマップファイル ・差分アップデートをしないなら不要 | ✅（自動更新を使う場合） |
| builder-debug.yml | ビルド時の内部設定や生成情報が書かれたYAML | ❌ デバッグ目的。通常は配布不要 |
| builder-effective-config.yaml | 実際に適用されたビルド設定の最終形 を書き出したファイル | ❌ デバッグ目的。通常は配布不要 |
hiramame実運用ではこの後、コード署名（Code Signing） や 自動アップデート設定 を行い、配布物として仕上げていきます。
展開済みアプリの動作チェック
win-unpacked/ に出力されているのは、インストール不要の展開済みアプリケーションです。
主に、開発中の動作チェックやZipファイル等で配布を行いたい場合に使用します。
フォルダの構成は以下の通りで、.exe で出力されているアプリケーションファイルを実行することで、
作成したアプリを起動できます。
dist/
├─ win-unpacked/
│ ├─ My Electron App.exe
│ ├─ resources/
│ │ ├─ app.asar
│ │ └─ ...
│ └─ 依存モジュールやElectronランタイム
- インストーラーを通さない生のアプリ本体
My Electron App.exeを直接実行するとアプリが起動します- 開発中の動作確認に便利（インストール不要）
resources/app.asarにアプリのソースコードがパッケージ化されて入っています
インストーラー使用型の動作チェック
dist フォルダ直下に出力される、My Electron App Setup.exeインストーラーを起動することで、アプリをPCへインストールすることができます。
dist/
├─ My Electron App Setup.exe
コントロールパネル：プログラムのアンインストール画面で、アプリがインストールされていることが確認できます。
（削除する場合もここから実行が可能です）
- Windows用インストーラー（NSIS形式が多い）
- これを実行すると
Program Filesにインストールされ、スタートメニュー登録なども行われます - 配布用のメインファイル