Contents
Electronでデスクトップアプリ開発を始める前に
Electronは、HTML/CSS/JavaScriptを使ってデスクトップアプリを開発できるフレームワークです。Web開発の基礎（特にJavaScript）を持つことで、ブラウザとネイティブ環境を融合したアプリを作成できます。本記事では、Electron アプリ 開発 手順 初心者向けに、環境構築からビルドまでの一連の流れをステップバイステップで解説します。
Node.jsとnpmのインストール手順
ElectronはNode.jsが前提となるため、まず環境構築が必要です。Node.jsはJavaScriptの実行環境であり、npm（Node Package Manager）はパッケージ管理を行うツールです。両者を正しく導入することで、Electronアプリの開発に必要な準備が整います。
公式サイトからのダウンロード
- Node.js公式サイトにアクセスし、「LTSバージョン」または「Currentバージョン」を選択
- OSに対応したインストーラーをダウンロードして実行
- インストール完了後、ターミナルで以下を実行し、正しくインストールされているか確認します
|
1 2 3 |
node -v npm -v |
注意: 最新版のNode.jsは、npmも同時にインストールされます。
Electronプロジェクトの初期設定
空のディレクトリでプロジェクトを立ち上げ、Electron用ツールを導入します。このステップでは、Electron Forgeやelectron-builderなど現代的なツールの選定と導入手順を明確にします。
npm initによるパッケージ構築
プロジェクト初期化は、npm initコマンドで簡易に行えます。以下が基本手順です。
- プロジェクトディレクトリを作成し、ターミナルで移動
- 以下のコマンドで初期設定ファイルを生成します
|
1 2 |
npm init -y |
-yオプションは、デフォルト値で
package.jsonを生成します。
Electronツールの選定と導入方法比較
以下にElectron Forge/electron-builderとelectron-packagerの違いや選定理由を整理しました。
| 項目 | Electron Forge | electron-builder | electron-packager |
|---|---|---|---|
| 補足 | 2023年現在推奨されるツールで、ビルド・パッケージングを統一管理可能 | パッケージングに特化し、設定が直感的。公式ドキュメントも充実 | 古くから使われていたが、メンテナンスが終了している可能性あり |
| 機能 | アプリの作成・ビルド・パッケージングを一括管理 | パッケージング専用ツールで高速 | 非推奨。Electron Forgeに統合される予定 |
| 推奨度 | 高（公式にも強くサポート） | 中（特定の用途向け） | 低（非推奨） |
注意: electron-packagerは現在も動作するが、最新バージョンではメンテナンスが終了している可能性があるため、Electron Forgeやelectron-builderを代替として利用することを強くおすすめします。
Hello Worldアプリの基本コード作成
Electronアプリは「メインプロセス」と「レンダラープロセス」で構成され、HTMLを表示するためのウィンドウを作成します。このステップでは、アプリケーションの基本的な構造と動作原理を確認します。
main.jsファイルの作成
main.jsはElectronアプリのエントリポイントです。以下にコード例と各部分の役割を説明します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const { app, BrowserWindow } = require('electron') function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true // メインプロセスとレンダラープロセスでNode.jsモジュールを共有できるようになる } }) win.loadFile('index.html') // HTMLファイルのパスを指定（メインプロセスからレンダラープロセスに移動） } app.whenReady().then(createWindow) // Electronが準備完了したタイミングでcreateWindow関数を実行 |
注意:
nodeIntegration: trueはセキュリティ上のリスクがあるため、本番環境ではfalseにして、必要に応じて通信機能を制限することが推奨されます。
index.htmlファイルの作成
HTMLファイルはレンダラープロセスで読み込まれるため、Electronアプリの表示内容を定義します。
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>Hello Electron</title> </head> <body> <h1>Electron アプリのサンプルです！</h1> </body> </html> |
開発モードでのアプリ起動手順
開発環境でアプリを動作させるには、Electron CLIやelectron .コマンドを使用します。このステップでは、アプリが正しく表示されているか確認します。
electron .コマンドの実行
以下のようにターミナルで実行すると、アプリが起動します
|
1 2 |
npx electron . |
確認ポイント: ブラウザウィンドウに「Electron アプリのサンプルです！」という文字が表示されているかをチェックしましょう。
アプリケーションのビルドとパッケージング
開発環境で動作するアプリを、実際のユーザーに配布可能なバイナリファイルに変換します。ここではElectron Forgeによるビルド手順を解説します。
Electron Forgeでのビルド手順
-
Electron Forge CLIをグローバルインストール
bash
npm install --global @electron-forge/cli -
プロジェクト内にElectronを導入
bash
npx electron-forge import -
これにより、
main.jsやビルド用スクリプトが自動生成されます -
ビルドコマンドの設定（package.json）
package.jsonに以下を追加します。
|
1 2 3 4 |
"scripts": { "build": "electron-forge make" } |
注意:
electron-forge makeは、指定したOS向けにアプリをビルドし、出力フォルダにパッケージングされたファイルを生成します。
配布準備とElectron Forgeの活用
アプリを配布する際には、Electron Forgeの公式ドキュメント（https://www.electronforge.io/）を参照してください。このツールは、以下のような利点があります：
- ビルド・パッケージング・マクロスクリプトの一括管理
- Windows/macOS/Linuxのクロスプラットフォームサポート
- アプリアイコンやバージョンのカスタマイズが容易
公式ドキュメントへのリンク: Electron Forge - Official Documentation
まとめ
本記事では、Electron アプリ 開発 手順 初心者向けに、環境構築からビルド・パッケージングまでの一連の流れをステップバイステップで解説しました。以下のポイントを押さえることで、Electronアプリ開発をスムーズに進められます。
- Node.jsとnpmは公式サイトから最新バージョンをインストール
- 開発ツールとしてElectron Forgeやelectron-builderの選定が重要
- main.jsとindex.htmlで基本的なアプリ構造を作成
- 開発環境では
npx electron .コマンドで起動確認 - ビルドにはElectron Forgeを使用し、公式ドキュメントを活用
ElectronはWeb技術を使ってデスクトップアプリを開発できるため、開発のハードルが低くおすすめです。公式ドキュメントと本記事を参考に、まずはHello Worldアプリから始めてみましょう。