Zenn
Open7

【Desktopアプリ開発】Electronについて📝

Electron
TypeScript
デスクトップアプリ開発
ピン留めされたアイテム
まさぴょん🐱まさぴょん🐱

【Desktopアプリ開発】Electronについて📝

https://www.electronjs.org/ja/docs/latest/

https://ja.wikipedia.org/wiki/Electron_(ソフトウェア)

Electron とは何ですか?

https://www.electronjs.org/ja/docs/latest/

Why Electron

https://www.electronjs.org/ja/docs/latest/why-electron

Electron GitHub

https://github.com/electron/electron

Electronのプロセスモデル

https://www.electronjs.org/ja/docs/latest/tutorial/process-model

コンテキストの分離

https://www.electronjs.org/ja/docs/latest/tutorial/context-isolation

プロセス間通信

https://www.electronjs.org/ja/docs/latest/tutorial/ipc

Electron API Doc📝

https://www.electronjs.org/ja/docs/latest/api/app

Electron Forge: Electron のCI/CD系ツール📝

https://www.electronforge.io/

awesome-electron: Electron関連の情報がまとまっているRepo📝

https://github.com/sindresorhus/awesome-electron?tab=readme-ov-file

参考になるZenn Book📝

https://zenn.dev/sprout2000/books/6f6a0bf2fd301c

まさぴょん🐱まさぴょん🐱

Electron ForgeとElectron Builderとの違いは？

Electron ForgeとElectron Builderは、どちらもElectronアプリのビルド・パッケージング・配布を支援するツールですが、設計思想や機能にいくつかの違いがあります。
以下に主な違いを簡潔にまとめます：

1. 目的とスコープ

  • Electron Forge: オールインワンのツールキット。プロジェクトの初期化、開発、ビルド、配布まで一貫してサポート。Electronアプリ開発の全ライフサイクルをカバーすることを目指しており、初心者や標準化されたワークフローを求める開発者に適している。
  • Electron Builder: 主にビルドとパッケージングに特化。設定の柔軟性が高く、既存のプロジェクトやカスタムワークフローに組み込みやすい。プロジェクト初期化や開発環境の設定はあまり重視しない。

2. 設定の容易さ

  • Electron Forge: テンプレート（例：React、TypeScript、Webpackなど）を使ってプロジェクトを簡単に初期化可能。設定ファイル（forge.config.js）は直感的で、初心者向けにデフォルト設定が充実。
  • Electron Builder: 設定ファイル（electron-builder.jsonやpackage.jsonのbuildフィールド）に依存。カスタマイズ性は高いが、初学者にとっては設定がやや複雑に感じる場合がある。

3. パッケージングと配布

  • Electron Forge: 一般的なパッケージ形式（Windows: EXE、MSI / macOS: DMG、ZIP / Linux: AppImage、DEBなど）をサポート。Electron Updaterを介した自動更新機能も統合可能だが、設定はElectron Builderほど細かくない。
  • Electron Builder: 幅広いパッケージ形式をサポートし、特に自動更新機能（electron-updater）が強力で、GitHub ReleasesやS3など多様な配布先に対応。コード署名やインストーラーのカスタマイズも細かく制御可能。

4. 依存関係とサイズ

  • Electron Forge: 必要な依存関係を自動で管理するが、ビルドサイズの最適化はElectron Builderに比べるとやや劣る場合がある。WebpackやRollupの統合でサイズを削減可能だが、追加設定が必要。
  • Electron Builder: ファイルサイズの最適化（例：不要なファイルの除外や圧縮）に優れており、軽量なアプリを生成しやすい。マルチプラットフォーム向けの設定も細かく調整可能。

5. コミュニティとエコシステム

  • Electron Forge: Electronの公式推奨ツールであり、コミュニティのサポートが厚い。ドキュメントが充実しており、標準的なElectronプロジェクトに最適。
  • Electron Builder: 独立したプロジェクトとして開発されており、特定のユースケース（例：高度なカスタマイズや特殊な配布要件）で好まれる。コミュニティは大きいが、Electron Forgeほど「公式感」はない。

6. 学習コストと使用例

  • Electron Forge: シンプルなプロジェクトや標準的なElectronアプリ（例：VS Code、Slackのようなアプリのクローン）に適している。初心者や迅速なプロトタイピングをしたい場合に有利。
  • Electron Builder: 複雑な要件（例：カスタムインストーラー、企業向けの配布、自動更新の詳細な制御）がある場合に適している。設定に慣れるまで時間がかかる可能性がある。

Xやウェブの情報に基づく補足

2023年以降の情報（Xやウェブ）を見ると、Electron Forgeは「すぐに使える」点で初心者や小規模プロジェクトに人気があり、Electron Builderはカスタマイズ性や配布の柔軟性を求める中～大規模プロジェクトで選ばれる傾向があります。たとえば、Xの投稿では、Electron Builderの自動更新機能や軽量なビルドが評価される一方、Electron Forgeのテンプレートによる迅速な開発が好まれる声も見られます。

結論

  • Electron Forgeを選ぶ場合: プロジェクトを素早く立ち上げ、標準的なビルド・配布プロセスを希望する場合。初心者や公式サポートを重視する開発者に最適。
  • Electron Builderを選ぶ場合: 高度なカスタマイズ、軽量なビルド、複雑な配布要件（例：企業向けのインストーラーや自動更新）が必要な場合。

もし具体的なプロジェクトの要件（例：ターゲットOS、更新機能の必要性、ビルドサイズの制約など）を教えていただければ、どちらがより適しているかさらに詳しくアドバイスできます！また、最新のトレンドや具体例をウェブやXからさらに調査することも可能です。

まさぴょん🐱まさぴょん🐱

Windows DesktopアプリをBuildする場合の注意事項📝

Buildコマンドの際に、--x64 --arm64を指定する📝

pnpm build:win --x64 --arm64

または、package.jsonのコマンドに追加📝

package.json
  "scripts": {
    // ・・・省略・・・
    "build": "npm run typecheck && electron-vite build",
    "build:win": "npm run build && electron-builder --win --x64 --arm64", // --x64 --arm64 を追加
    "build:win:x64": "npm run build && electron-builder --win --x64",  // 追加
    "build:win:arm64": "npm run build && electron-builder --win --arm64",  // 追加
    "build:mac": "electron-vite build && electron-builder --mac",
    "build:linux": "electron-vite build && electron-builder --linux"
  },

https://blog.shibayan.jp/entry/20200504/1588525112