Zenn
⚡️

Electronでデスクトップアプリを開発するときのベストプラクティスをo1に聞いてみた

に公開
Electron
macOS
Windows
tech

以下では、Electron でデスクトップアプリケーションを開発する際の、Mac/Windows 両対応かつ自動アップデートが可能で、なおかつ Node.js や Electron のバージョン不整合を防ぎたい、という要件を満たすためのベストプラクティス例をまとめます。

1. Node.js/Electron バージョン管理の一貫性を保つ

1-1. Node.js のバージョン管理ツールを使用する

Mac と Windows の両方で開発する場合は、Node.js のバージョン管理を行うツールを導入し、チーム全体で同一バージョンの Node.js を利用することを推奨します。

  • nvm (Node Version Manager)
    Mac/Linux 環境では広く使われていますが、Windows では公式にはサポートされていません。
  • nvm-windows
    Windows 向けの nvm の移植版。
  • Volta
    Mac/Windows/Linux 全てに対応している Node バージョン管理ツール。セットアップが簡単で、グローバル環境を汚さないため便利です。

どのツールを採用するかはチームの方針によりますが、複数 OS で利用する場合は Volta のようにクロスプラットフォームでサポートがしっかりしているツールが便利です。

1-2. Electron のバージョンピン留め

Electron は Node.js や Chromium のバージョンと密接に関係しています。

  • package.json の dependencies や devDependencies に Electron のバージョンを明示的に指定し、インストール時に自動的にロックファイル（package-lock.json や yarn.lock 等）を生成しておきましょう。
  • これにより開発者同士で使用する Electron バージョンがブレず、動作を安定させることができます。

2. パッケージ化とビルドの自動化

2-1. electron-builder の活用

Electron アプリケーションを Mac 用 (.dmg や .pkg)、Windows 用 (.exe や .msi) の形にビルドするには、electron-builder の活用を強く推奨します。

electron-builder がサポートしている主な機能:

  • クロスプラットフォームビルド (Mac から Windows 向けビルド、Windows から Mac 向けビルドなど。ただしコードサイニング関連の制約は要確認)
  • 自動アップデート機能（electron-updater との連携）
  • さまざまな配布形式 (AppImage, dmg, exe, msi, ZIP など) の生成
  • 署名機能 (macOS のコードサイン、Windows のコードサイン)

なお、Windows のコードサイニング証明書は Windows マシン上で作業するほうがスムーズですが、macOS 上でも証明書ファイルを設定してビルドできるケースがあります。自動アップデート時にはアプリが署名済みであることが望ましいため、リリースパイプライン（後述）できちんと署名することを推奨します。

2-2. electron-packager との違い

Electron アプリをビルドするツールとしては electron-packager がありますが、自動アップデート対応や複数 OS 向けのビルド周りをまとめてやりたいなら、electron-builder が便利です。依存関係を一元管理でき、複数形式でのパッケージングが容易になります。

3. 自動アップデート機能の実装

3-1. electron-updater の利用

electron-builder のエコシステムの一部として提供される electron-updater を使うと、アプリケーションの自動アップデート機能を簡単に実装できます。

  • Squirrel や NSIS などのアップデートサーバーや、GitHub Releases / S3 / 自前サーバー 等、さまざまなリリース配布方法をサポート。
  • フィード URL (更新先 URL) を設定し、アプリ起動時や定期的に更新をチェック → ダウンロード → 再起動でアップデートが完了。

3-2. アップデートサーバーの運用

自動アップデートを行うには、更新用ファイルを配置するサーバーが必要です。以下のような選択肢があります。

  1. GitHub Releases
    公開リポジトリかプライベートリポジトリ (GitHub Actions + Private Packages) などを使用し、GitHub 上でバイナリの配布を行う。小規模のうちは簡単に運用できる。
  2. AWS S3
    S3 を配布サーバーとして利用し、CloudFront 等と組み合わせて高速に配布する。認証設定を行い、限定公開にも対応できる。
  3. 自前のサーバー
    社内サーバーなどで独自にアップデートファイルを配置し、管理画面も含めてカスタマイズしたい場合に利用。
  • いずれにせよ、安全な通信 (HTTPS) を使うこと、アップデートファイルを正しく署名することがセキュリティ上は重要です。

4. 開発環境を安定させるポイント

4-1. ロックファイルの管理

  • npm や Yarn でインストールする際に自動生成されるロックファイル（package-lock.json や yarn.lock）を Git でバージョン管理する。
  • プロジェクトメンバー全員が同じ依存関係を再現できるようにし、バージョンのブレを最小限に抑える。

4-2. マルチプラットフォームの CI/CD を利用する

GitHub Actions や GitLab CI、CircleCI 等の CI/CD サービスを利用して、Mac/Windows の両方でビルド・テスト・リリースを行うのが理想的です。

  • ソースコードプッシュ/プルリクエスト時に自動でビルドとテストが走る。
  • リリース時には自動で署名＆パッケージングし、アップデート用のファイルをサーバー（GitHub Releases や S3 等）へデプロイ。

これにより、手動作業によるバージョン不整合や署名ミスを防ぎ、ビルドの再現性が高まります。

4-3. Cross-Platform Testing

Electron のコードは基本的にプラットフォーム間で共通ですが、Windows 固有 / macOS 固有の挙動が存在する場合もあります（ファイルパスの扱い、OS 固有の API 利用など）。

  • jest や mocha などのテスティングフレームワークを使い、ロジック部分の自動テストを行う。
  • OS 依存部分の検証も含めて、Mac/Windows それぞれで実行するテストジョブを用意しておくと安心です。

5. コードサイニングとリリース運用

5-1. macOS のコードサイン

macOS 向けにビルドする場合、Apple Developer Program に加入し、Developer ID を取得しておく必要があります。

  • electron-builder で macOS アプリをビルドする際には、Developer ID Certificate をキーチェーンに登録しておき、CSC_IDENTITY_AUTO_DISCOVERY=true や APPLE_ID, APPLE_ID_PASSWORD などを適切に設定することで自動署名できます。
  • macOS では未署名アプリは Gatekeeper にブロックされるため、テスト時にも署名を行うほうがよい場合があります。

5-2. Windows のコードサイン

Windows 向けには、EV (Extended Validation) コードサイニング証明書や普通のコードサイニング証明書を購入し、.pfx ファイルなどを取得します。

  • electron-builder の設定で、win.certificateFile や win.certificatePassword を指定して署名します。
  • 署名しないと Windows の SmartScreen による警告が表示されやすくなるので、ユーザーの信頼性向上のために可能な限り署名対応を行うのが望ましいです。

6. まとめ: 実践的な運用フロー例

  1. Node.js バージョン管理ツール (例: Volta) を使用し、全開発環境で同じバージョンの Node.js をインストールする。
  2. package.json で Electron のバージョンを固定し、npm / Yarn でロックファイルを生成・管理する。
  3. electron-builder を導入し、各種設定を electron-builder.yml や package.json に記述する。
  4. electron-updater を利用して、自動アップデート処理を実装。配布サーバーや GitHub Releases 等を設定する。
  5. GitHub Actions などの CI/CD を設定し、Mac・Windows 両方のビルド・テスト・リリースを自動化する。
    • macOS ランナーで macOS 用にビルド＆署名、Windows ランナーで Windows 用にビルド＆署名。
  6. コードサイニング証明書を取得し、electron-builder の設定に組み込む。
  7. Pull Request ベースでコードレビュー →CI でビルド・テスト → マージ → 自動リリースの流れを確立する。

このようなフローを整えることで、バージョンの不整合を防ぎつつ、Mac/Windows 共通の開発環境でスムーズに開発・デリバリーが行えるようになります。さらに自動アップデート機能も備えることで、エンドユーザーに常に最新のアプリを提供できるようになります。

参考リンク

上記の手順やツールを組み合わせることで、OS 間のバージョン齟齬を抑えつつ、自動アップデートもできる Electron アプリの開発体制を整備できます。ぜひ参考にしてみてください。

Discussion