ElectronでWindowsデスクトップアプリを作る
JavaScriptでWindowsアプリを作った。
Electronを使えば、Web技術だけでデスクトップアプリが作れる。HTML、CSS、JavaScriptの知識があれば十分。最小構成の「Hello World」を実装してみた。
作ったもの
Electronで最小構成のデスクトップアプリ。
ウィンドウに「Hello World」と表示するだけ。でも、これがデスクトップアプリになる。.exeファイルとして配布できる。
必要なファイルは3つだけ。package.json、main.js、index.html。これだけでアプリが動く。
なぜ作ったか
Webアプリは作れるけど、デスクトップアプリは未経験だった。
Electronなら、JavaScriptの知識が使える。新しい言語を学ぶ必要がない。これは楽だと思った。
写真展示用のアプリを作りたかった。ブラウザだと制限がある。ファイルシステムに直接アクセスできない。デスクトップアプリなら自由。試してみることにした。
Electronのアーキテクチャ
Electronは2つのプロセスで動く。
メインプロセス（Node.js環境）：
- アプリのライフサイクル管理
- ウィンドウの作成と制御
- OS機能へのアクセス
レンダラープロセス（Chromium環境）：
- UI の表示
- HTML/CSS/JavaScriptの実行
- ユーザー操作の処理
メインプロセスが親、レンダラープロセスが子。IPC（プロセス間通信）でやり取りする。
main.jsの実装
メインプロセスのコードを書く。
const { app, BrowserWindow } = require('electron')
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
})
mainWindow.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})
BrowserWindowでウィンドウを作成。サイズは800×600px。
nodeIntegration: trueで、レンダラープロセスからNode.jsが使える。最初はこの設定を知らなくて、ファイルアクセスができなかった。ドキュメントを読んで解決。
index.htmlの実装
レンダラープロセスのUI。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
color: #fff;
}
h1 {
font-size: 4rem;
font-weight: 700;
background: linear-gradient(45deg, #ff6b6b, #ffb347, #2ecc71);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
</div>
</body>
</html>
普通のHTMLと同じ。でも、これがデスクトップアプリのウィンドウに表示される。
グラデーション背景とテキストエフェクト。見た目にこだわった。デスクトップアプリでも、美しいUIは重要。
package.jsonの設定
プロジェクトの設定ファイル。
{
"name": "hello-world-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron .",
"build": "electron-builder"
},
"devDependencies": {
"electron": "^25.0.0",
"electron-builder": "^24.4.0"
},
"build": {
"appId": "com.example.helloworld",
"win": {
"target": "portable"
}
}
}
"target": "portable"で、インストール不要の.exeを生成。
最初は"target": "nsis"にしていた。インストーラーが作られる。でも、単純に実行したいだけなら、portableの方が楽。設定を変えたら、すぐに.exeができた。
ビルドの流れ
開発からビルドまでの手順：
1. プロジェクト作成：npm init -y
2. 依存関係インストール：npm install electron electron-builder --save-dev
3. コード作成：main.js、index.htmlを書く
4. 動作確認：npm start
5. ビルド：npm run build
ビルドには時間がかかった。初回は5分くらい。node_modulesのダウンロードとパッケージング。
でも、2回目以降は1分以内。キャッシュが効いているようだ。
ハマったところ
最初、nodeIntegrationの設定を忘れていた。
レンダラープロセスからNode.jsのAPIを使おうとしたら、エラー。require is not defined。これは課題。
調べたら、nodeIntegration: trueが必要だと分かった。セキュリティ上はfalseが推奨だけど、学習目的ならtrueで問題ない。
もう一つ。ビルドに失敗することがあった。electron-builderのバージョンが合わない。npm updateで解決した。
配布形式の選択
Electronは色々な形式でビルドできる：
- portable：インストール不要の.exe（選択したのはこれ）
- nsis：Windowsインストーラー
- appx：Windows Store用パッケージ
portableが一番簡単。ダウンロードして実行するだけ。
nsisはインストーラーが作られる。スタートメニューに登録される。アンインストールも簡単。でも、ユーザーにインストール手順を説明する必要がある。
appxはWindows Storeで配布できる。でも、開発者登録が必要（$19）。今回は見送った。
試してみた
Hello Worldアプリを実行した。ウィンドウが開く。グラデーション背景に「Hello World」のテキスト。
.exeファイルのサイズは約150MB。Electronランタイムが含まれているため。大きいと感じるかもしれないが、これが標準。
起動時間は約3秒。Chromiumの起動に時間がかかる。でも、一度起動すれば動作は速い。
システム全体の流れ
使ってみて
JavaScriptでデスクトップアプリを作る体験ができた。
ポイントは以下の3つ：
- メインプロセス（main.js）でウィンドウ管理
- レンダラープロセス（index.html）でUI表示
- package.jsonで依存関係とビルド設定を定義
Web技術だけでデスクトップアプリが作れる。これは強力。写真展示用のアプリなど、色々な用途に使えそう。
Electronの学習を始めたい方の参考になれば嬉しいです。
まとめ
今回は、Electronを使った最小構成のWindowsデスクトップアプリを作りました。
ポイントは以下の3つ：
- package.json、main.js、index.htmlの3ファイルで動作
- nodeIntegration: trueでNode.js APIにアクセス
- portable形式でインストール不要の.exeを生成
最小構成だけど、デスクトップアプリの基礎が理解できた。ここから機能を追加していけば、実用的なアプリが作れる。
さらに深く学ぶには
この記事で興味を持った方におすすめのリンク：
自分の関連記事：
最後まで読んでくださり、ありがとうございました。