Electronアプリのパッケージングとasarアーカイブの活用ガイド | electron-forge & electron-builder比較

Electronアプリパッケージングの基本とasarアーカイブの役割

Electronアプリを配布する際、パッケージングは安定した動作環境を構築するための不可欠なプロセスです。特にasarアーカイブの活用や、electron-builder/electron-forgeといったツールの選定は、開発効率やクロスプラットフォーム対応に大きく影響します。本記事では、実務でのパッケージング手順を解説し、asarファイルの生成方法やリソース配置のベストプラクティスについて詳しく見ていきます。

asarアーカイブの概要

asar（Archive System for Electron） は、ElectronアプリのJavaScriptファイルを圧縮してパッケージングするための形式です。これにより、リソースの読み込み速度向上や、ソースコードの保護が可能です。

• 主要な特徴
• 実行時に自動的に展開される
• ファイルサイズを圧縮できる
• 遅延読み込み（Lazy Loading）を支援する構造を持つ

asarアーカイブはelectron-builderやelectron-forgeなどにより生成され、アプリケーション起動時にNode.jsのrequireメカニズムが自動で読み込む仕組みになっています。

注意点： asarファイルはElectron公式ドキュメントに準拠した構造を取るため、リソース配置時のOSごとの差異（例: パス区切りの違い）には特に注意が必要です。

リソース配置のベストプラクティス

asarアーカイブ内でのリソース配置は、アプリケーションの安定性に大きく影響します。以下が推奨されるパターンです。

• 配布用リソース（画像・設定ファイルなど）
  build/resources ディレクトリ以下に配置し、asarの外側（通常はassetsディレクトリ）に保存する

• ネイティブモジュール（Node.js拡張）
  asarアーカイブ内の.nodeファイルを外部から読み込まないよう、node_modules配下に分離配置

• プラットフォームごとの設定ファイル
  build/mac, build/win32, build/linuxといったサブディレクトリに分割し、パッケージング時に自動で選択されるようにする

この配置方法により、OSごとのファイル構造の違いや、ネイティブモジュールとasarアーカイブの競合を回避できます。

electron-forgeによるビルドフロー構築

electron-forgeは、Electronアプリケーションの開発・ビルド・パッケージングを統一して管理するためのツールです。特に初学者向けに最適化されたワークフローが特徴で、asarアーカイブの生成とパッケージング処理を一括で行える点が強みです。

プロジェクト初期化手順

electron-forgeを使用するにはまずプロジェクトを初期化します。以下のコマンドで導入し、テンプレートを選択してください（@electron-forge/cliの最新バージョン）。

1. npm install --save-dev @electron-forge/cli
2. npx electron-forge import
3. ターミナルに表示される選択肢から「Electron Forge Config File (for use with Electron 18+)」を選択
4. プロジェクトの構成ファイルが生成され、forge.config.jsというファイルが作成されます

この手順で、プロジェクト内にpackage.jsonとforge.config.jsが作成されます。ここでは、パッケージング時の出力先やasarアーカイブの設定を指定できます。

カスタムビルドスクリプトの作成

electron-forgeはデフォルトでmakeコマンドによりビルドフローを走らせますが、カスタムな処理が必要な場合はforge.config.jsにmakersやpackagerConfigを追加します。以下はasarアーカイブを作成し、macOS向けのパッケージングを行う例です。

このように、makers配下にOSごとのパッケージング処理を定義すると、electron-forgeが自動で実行します。また、asarの有効化やアイコン指定も容易です。

electron-builderでのクロスプラットフォームパッケージング

electron-builderは、Electronアプリの配布用ファイルを作成するための強力なツールであり、特にクロスプラットフォーム対応が得意です。公式ドキュメントに記載されている構成で実装することで、macOS・Windows・Linuxへの同時パッケージングが可能です。

サポートOS別の設定ファイル構成

electron-builderでは、package.jsonのbuildフィールドやbuilderConfigを通じて、各プラットフォームごとの出力先とパッケージ形式を指定できます。以下は代表的な例です。

このように、OSごとに異なるターゲットを指定することで、それぞれのプラットフォームに最適な形式でパッケージングできます。

マニフェストファイルの最適化

electron-builderでは、アプリケーションのメタ情報を記述するbuild.jsonやpackage.json内のbuildフィールドを使って、マニフェストの内容をカスタマイズできます。具体的な手順は以下の通りです。

1. package.jsonに以下のように設定ファイルを追加します。
   json
"build": {
"appId": "com.example.myapp",
"productName": "MyApp",
"directories": {
"buildResources": "build"
},
"files": [
"**/*",
"!**/.DS_Store"
],
"asar": true,
"mac": {
"target": ["dmg", "mas"]
}
}

2. build配下のfilesフィールドに、含めるファイルや除外するディレクトリを指定します。

3. 最後にnpm run buildコマンドでビルドを実行します。

この設定により、asarアーカイブ内には必要なリソースが自動的に収められ、パッケージング時に不要なファイルは除外されるため、配布サイズの最適化も可能です。

配布前の検証とパフォーマンスチューニング

Electronアプリを公開する前に、実環境での動作確認やパフォーマンスチューニングが不可欠です。特にasarアーカイブの圧縮率調整や不要モジュールの除外は、リソースの最適化に大きく寄与します。

シミュレーション環境での動作確認

Electronアプリを配布する前に、仮想マシンやDockerを使って各OS環境で動作確認を行うことが推奨されます。具体的な手順としては以下が挙げられます。

1. Windowsの場合は
2. Windows 10/11の仮想環境（VMwareやVirtualBox）を準備する

3. パッケージング済みの.exeファイルを起動し、動作を確認する

4. macOSの場合は

5. macOS対応環境で.dmgファイルを検証する

6. 仮想マシンでも動作テストを行えるようにしておく

7. Linuxの場合は

8. UbuntuやFedoraなどの主要ディストリビューションでテストを行う
9. .debファイルをインストールし、正しく起動するか確認する

このようにして、すべてのターゲットOS環境での動作を検証することで、配布後の不具合リスクを最小限に抑えられます。

実行ファイルサイズの最適化手法

Electronアプリは通常、30MB〜50MB程度のサイズになることが多く、これはネイティブモジュールやリソースファイルが含まれるためです。以下のような対策を講じることで、実行ファイルサイズを抑えることができます。

• 不要なnpmパッケージの削除
• package.jsonから使用していない依存ライブラリを消す
• asarアーカイブ内の圧縮設定変更
• electron-builderではasar.unpackDirで特定ディレクトリを展開できるように指定する（例: リソースファイルやネイティブモジュール）
• 依存関係の最適化
• npm install --productionで開発用ライブラリを排除（Electron 18以降で動作確認済み）

これらの対策により、アプリケーションファイルサイズは平均して15〜30%程度削減されるとされています。

ツール選定の判断基準と実装時のポイント

electron-forgeとelectron-builderは、それぞれに特徴があり、プロジェクト規模や開発スタイルによって使い分ける必要があります。以下に両ツールの比較を行うことで、適切な選択が可能になります。

electron-forgeはデフォルトのワークフローが豊富で扱いやすく、electron-builderはカスタマイズ性と柔軟性が高いため、プロジェクトの規模や目的に応じて使い分けることが重要です。

また、開発環境との親和性も判断基準になります。electron-forgeはnpm run devで起動できる仕組みを標準搭載しているため、初学者が導入しやすい一方、electron-builderはpackage.jsonの設定ファイルにすべてのパッケージング情報をまとめることができるので、大規模プロジェクトには向いています。

トラブルシューティング例

以下は、配布中に発生する可能性のあるエラーと対処法です。

エラー: Error: Module not found

原因: asarアーカイブにネイティブモジュールが含まれている
対処:

• asar.unpackDirで該当モジュールを展開する設定を行う
• または、node_modules/配下に置くことで解決

エラー: Invalid package.json format

原因: JSON構文エラーや不正なフィールドが含まれる
対処:

• package.jsonをJSONLintでチェックする
• フィールド名の大小や綴りに注意

エラー: Cannot find module 'xxxx'

原因: asarアーカイブ外のリソースが参照されている
対処:

• asar.unpackDirで該当ファイルを展開する設定を行う
• または、filesフィールドに含める

まとめ

• asarアーカイブはElectronアプリのリソース管理に不可欠。OSごとの配置差を意識し、公式ドキュメントを活用することが重要
• electron-forgeはビルドフローの一括管理に適しており、初学者向けのシンプルなワークフローが強み
• electron-builderはクロスプラットフォームパッケージングと柔軟な設定により、大規模プロジェクトにも最適
• 配布前の検証では、各OS環境での動作確認や実行ファイルサイズの最適化を徹底し、品質向上を目指す

Electronアプリのパッケージングにあたっては、開発環境に合ったツール選びと、公式ドキュメントを参照した実装が成功への鍵です。