はじめに
どうも walrustusk です。
昔の下書きを漁っていたら、Electronの記事って最近あんまり見かけないなーと感じまして...
当時つくりかけていた“自作OS風ジョークアプリ”も思い出し、久しぶりにElectronで遊んでみよう！ という気持ちがわいてきちゃいました。
この記事では、
- Electronって今どうなの？
- 2025年のデスクトップアプリ開発事情って変わった？
- ついでに OS 風ジョークアプリを作ってみよう
の3本立てで進めていきます。
Electronをあんまり知らない方向けのざっくり説明
昔“ド〇ルドウズ”みたいな自作OS風ソフトで遊んでた人向け
Electronって？
概要
Electron は JavaScript / HTML / CSS でデスクトップアプリを作れるフレームワークです。
中身は Chromium + Node.js のセットになっていて、Webアプリをそのままローカルアプリ化できるのが特徴です。
Slack、VSCode、Discord など多くのアプリがElectron製なので、名前は聞いたことがある方は多いはず。
特徴まとめ
- Web技術でデスクトップアプリが作れる
- クロスプラットフォーム（Windows / macOS / Linux）
- Webの開発体験がそのまま使える
- アプリサイズは大きくなりがち
メリット・デメリット
メリット
- Web系のフレームワークやライブラリがまあまあ使える（React/Vue/Tailwindなど）
- 一度書けばどのOSにも対応
- プラグイン・ツールが豊富で初心者でも始めやすい
- デザインがWeb寄りなのでモダンな見た目を作りやすい
デメリット
- アプリサイズが比較的大きい
- ネイティブアプリよりパフォーマンスは落ちる場合あり
- メモリ使用量は多め（Chromium内蔵の宿命）
ただし近年は改善も進んでおり、
Electron 31〜33 ではセキュリティやパフォーマンスの改善が続いています。
Electronのアップデート状況（過去の歴史）
Electronはリリース当初、パフォーマンスが悪いと叩かれましたが、それでも
「クロスプラットフォームをWeb技術で作れる」 という利便性から多くのプロダクトに採用されてきました。
ざっくりの進化の流れ：
- v1〜v5（2016〜2018）：VSCodeやSlack採用で一気に普及
- v6〜v10：セキュリティやAPI整理
- v11〜v20（2020〜2022）：Chromium更新に合わせた高速化
-
v21〜現在（2023〜2025）：
- M1/M2/M3 Mac最適化
- Sandboxing強化
- メモリ改善
- 自動アップデート安定化
Slack、VSCode、Discord など、ビッグタイトルのソフトウェアでも現役で使われているので、全然使用できる選択肢ですね👍 ただし、TauriやWailsなど競合になってきそうなプラットフォームも出てきています。
現在のWindows/macOSアプリの開発環境
2025年時点のざっくりトレンドまとめ：
| 技術 | 傾向 |
|---|---|
| Electron | Web系エンジニアに根強い人気 |
| Tauri | Rustベースで軽量。Electron対抗馬 |
| Flutter Desktop | UI品質と速度で採用増 |
| Swift/SwiftUI（macOS） | ネイティブUIなら断然強い |
| C#/WPF/MAUI（Windows） | 企業利用で依然多い |
とりあえずクロスプラットフォームで動かしたいなら、2025年でもElectronは選択肢として十分ありです。
自作OS作っていこう
モック作成
まずはモック（画面デザイン）を作ります。
今回はChatGPT Canvas を使ってとりあえずサクッと生成します。
今回のテーマは macOS 26 “Liquid Glass” っぽい感じで作ってみようと思います。
- メニューバー
- Dock
- ウインドウ
- 霧がかったガラスUI
- リキッド感のアニメーション
などをモックで再現し、そのままHTML/CSSに落とし込んでいきます。
プロンプトは以下の通りです。
昔流行ったドナルドウズのようなOSブラウジングジョークソフトを作成したいです。
・macOS 26 Liquid glassを再現すること
・ChatGPT canvasでモックを作成する
・最終的にElectronで実装する
・まずはmacOS26を再現する形とし、次バージョンでノーコードカスタムできるような形とすること
しょっぱなからだいぶ機能盛りだくさんに作ってくれました。
ただ、ウインドウを拡大・縮小したり、ドラッグしようとするとその場に留まろうとするので、下記プロンプトで修正しました。
ウインドウをドラッグしたり、ウインドウサイズを変更しようとすると、その場に留まろうとしているように見えます。そこだけ修正いただけますか？
するとこんな感じでプレビュー可能な状態になるので、プレビューをクリックしてみます。
するとこんな感じにプレビューしてくれます。
フォルダも動くし、ヘッダーバーも時計も動いてる。フォルダを開いたりターミナルも動作します。
※もちろん動いている風に見せるだけなので、実際のファイル操作やコマンド実行はできません。
Electronの環境構築
最小構成はこんな感じ。
mkdir [新しいディレクトリ名]
cd [作成したディレクトリ名]
npm init
npm install electron --save-dev
main.js（メインプロセス）と
index.html（レンダラープロセス）を作ります。
{
"scripts": {
"start": "electron ."
}
}
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
width: 1280,
height: 800,
frame: false, // OS風UIにするので外枠なし
transparent: true
})
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
先ほど作成したモックをElectron環境で動作するようにHTML/CSS/jsに変換します。他のフレームワークでも動作するようですが、今回は試験的にバニラなコードで生成しました。
ディレクトリ構造としてはこんな感じ。
Windows, macOSそれぞれ動作させる
Electronはクロスプラットフォームなので、
npm start
でWindowsでもMacでも基本は同じ挙動です。
- macOSのウインドウの影
- Windowsのドラッグ領域
などは CSS の -webkit-app-region: drag; で調整できます。
カスタム修正（ジョークOSに寄せていく）
ここからは完全に遊び。
- ウインドウがドラッグすると逃げる
- Dockアイコンがクリックで崩れる
- CPU使用率が常に「350%」表示
- 絶対終わらない更新バー
- ウイルスが入ったかのようなアラート
などなど、好き放題できます。
DOMを触れるので Web の表現力がそのまま使えるのが強みです。
パッケージング
アプリをビルドするには electron-builder を使います。
npm install electron-builder --save-dev
{
(略）
"build": {
"appId": "com.example.fakeos",
"mac": { "target": "dmg" },
"win": { "target": "nsis" }
}
(略）
}
ビルド
npm run build
これで .dmg（Mac） と .exe（Windows）が生成されます。
終わりに
Electronの記事を書こうとしたら、昔懐かしい自作OS風のソフトのワクワク感が一気に蘇ってきました。当時は子どもながらすげー！って思っておりましたが、今は生成AIで作りやすくなったからこそ、なおさら当時作った人のすごさを実感します。
2025年現在でもElectronはまだまだ現役で、
WebのUIをそのままアプリにできるという強みはまだまだElectronが強いなと感じるところです。ぜひパフォーマンスは改善してください...!!
技術レビューとしても、遊びとしても、触ってみるとかなり楽しいので、ぜひ試してみてください！