はじめに
デスクトップアプリを作りたいと思ったことはないですか。
個人的には、Webの知識しかないけど「ちゃんとしたアプリ」を作ってみたいという気持ちがずっとありました。でも、SwiftとかC++を一から学ぶのは正直しんどい。そんなときに出会ったのがElectronです。
Electronは、JavaScript、HTML、CSSというWeb技術だけでWindows、Mac、Linuxのデスクトップアプリを作れるフレームワーク。GitHub Starは11万9000を超えていて、VS Code、Slack、Figma、1Passwordなど、毎日使うようなアプリで採用されています。
「Web技術でデスクトップアプリ」と聞くと、なんちゃってアプリを想像するかもしれませんが、これ、意外とガチなんですよ。
Electronの特徴・メリット
クロスプラットフォーム対応
一つのコードベースでmacOS、Windows、Linuxに対応できます。各OS向けに別々のコードを書く必要がないので、開発コストが圧倒的に下がりますね。
Web技術がそのまま使える
React、Vue、Angularといったフロントエンドフレームワークがそのまま使えます。30代でWeb開発をやってきた人なら、学習コストはかなり低いと思います。
Node.jsの機能をフル活用
ブラウザのJavaScriptとは違って、ファイルシステムへのアクセスやOSのAPIを直接呼び出せます。これが地味に大きい。
豊富なエコシステム
npmの膨大なパッケージがそのまま使えます。「こういう機能欲しいな」と思ったら、だいたいパッケージがある。
自動アップデート機能
アプリの自動更新機能が標準で用意されています。配布後のメンテナンスを考えると、これは本当にありがたい。
実績が証明する安定性
VS Codeを毎日使っている人は多いと思いますが、あれがElectron製です。「Electronは重い」という批判もありますが、VS Codeレベルのアプリが作れるなら十分でしょう。
インストール方法
Node.jsがインストールされている前提で進めます。
# プロジェクトディレクトリを作成
mkdir my-electron-app
cd my-electron-app
# package.jsonを初期化
npm init -y
# Electronをインストール
npm install electron --save-dev
最新バージョンはv39.2.6（2025年12月時点）で、Node 22.21.1とChromium 142に対応しています。
基本的な使い方
プロジェクト構成
my-electron-app/
├── package.json
├── main.js # メインプロセス
├── preload.js # プリロードスクリプト
└── index.html # レンダラー（UI）
package.jsonの設定
{
"name": "my-electron-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^39.2.6"
}
}
main.js（メインプロセス）
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
contextIsolation: true,
nodeIntegration: false
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
preload.js（プリロードスクリプト）
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
sendMessage: (message) => ipcRenderer.send('message', message),
onReply: (callback) => ipcRenderer.on('reply', callback)
})
index.html（レンダラー）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>My Electron App</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
min-height: 100vh;
margin: 0;
}
h1 { margin-bottom: 10px; }
</style>
</head>
<body>
<h1>Hello Electron!</h1>
<p>Web技術でデスクトップアプリを作っています。</p>
</body>
</html>
起動
npm start
これでデスクトップアプリが起動します。初めて動いたときは正直テンション上がりました。
実践的なユースケース
社内ツール
業務効率化のための社内ツールを作るケース。Webアプリだとブラウザの制約があるけど、Electronならファイルシステムへのアクセスやシステム通知が使えます。個人的には、このパターンが一番多いかなと思います。
Markdownエディタ
ファイルの読み書きが必要なエディタ系アプリはElectronの得意分野。TyporaやObsidianなど、有名なMarkdownエディタもElectron製です。
APIクライアント
PostmanやInsomniaといったAPIテストツールもElectron製。HTTPリクエストの送信、レスポンスの表示、履歴の保存など、Webの知識がそのまま活きます。
チャットアプリ
SlackやDiscordのデスクトップ版はElectron製。リアルタイム通信とシステム通知を組み合わせたアプリを作るなら、かなり相性がいいですね。
開発者向けツール
VS Codeがまさにそうですが、開発者向けのツールは需要が高いです。自分の開発効率を上げるツールを自分で作れるのは、エンジニアとしてQOLが上がります。
パフォーマンスについて
正直なところ、Electronアプリはネイティブアプリより重いです。ChromiumとNode.jsを内包しているので、メモリ消費は大きめ。
ただ、最近のPCスペックを考えると、実用上問題になるケースは少ないと思います。VS Codeを普通に使えているなら、気にしなくていいレベルです。
どうしてもパフォーマンスが気になるなら、TauriというRustベースの代替フレームワークもあります。でも、エコシステムの充実度やドキュメントの豊富さを考えると、まずはElectronで始めるのが無難でしょう。
まとめ
Electronは、Web技術だけでデスクトップアプリを作りたい人にとって、現時点で最も現実的な選択肢だと思います。
- Web技術がそのまま使える
- クロスプラットフォーム対応
- VS Code、Slackなど実績多数
- npmエコシステムをフル活用可能
30代でWeb開発の経験があるなら、学習コストは低めです。週末のちょっとした時間で、自分用のツールを作ってみるのも面白いですよ。
「Webしかできない」を「Webがあればデスクトップアプリも作れる」に変えてくれる。それがElectronという話でした。