【初心者向け】Electron で始めるデスクトップアプリ開発 #1

はじめに

JavaScript でスクリプトを作り始めて3か月。ようやく形になってきたのですが、コマンド打ち込みだけでスクリプトを動かすのはなかなか大変…。

そんなときに見つけたのが Electron。
GUIで操作できるデスクトップアプリがJavaScriptで作れると知り、さっそく導入してみたのですが、実際にやってみると意外と手順が多くて戸惑うこともありました。

そこで今回、次に自分がElectronを使うときにも役立つように、導入手順を整理して記事にまとめました。

順番に迷わず進めるよう、できるだけ丁寧に書いています。
同じように「これから始めてみたい！」という方の参考になればうれしいです。

実行環境

以下の環境で、お伝えする内容を検証しています。

• OS：Microsoft Windows 11 Home
  バージョン：10.0.26100 Build 26100

• Node.js：v22.14.0

• npm：v11.2.0

• PowerShell：7.5.0

• シェル：Microsoft.PowerShell

• CPU：AMD64 Family 25 Model 80 / 2GHz

• エディタ：Visual Studio Code 1.98.2

🔸 セクション 1：Electron の準備

👤 User (クリック) → 🖼️ Renderer Process → 📡 Preload → ⚙️ Main Process → 🖥️ CLI

1-1. プロジェクト作成

mkdir my-electron-app # プロジェクト用のディレクトリを作る
cd my-electron-app # 作ったディレクトリに移動する
npm init -y # 標準的な package.json を自動生成する

プロジェクト用のディレクトリ内に作成される package.json の内容は次の通りです。

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs"
}

type: "commonjs" は Node.js のバージョンや設定によっては入らないことがあります。

1-2. Electron のインストール

Electron を開発用パッケージとしてインストールします。

npm install electron --save-dev

開発中にしか使わないライブラリなので、--save-dev をつけてインストールします。

この操作により、プロジェクト用ディレクトリ直下に node_modules ディレクトリが作成され、Electron がその中に保存されます。

my-electron-app/
 └-- node_modules/  モジュール群のディレクトリ

同時に、package.json に devDependencies という項目が追加され、Electron が記録されます。

package.json への追加記述（例）

  "devDependencies": {
    "electron": "^35.0.3"
  }

📌 おわりに

次回は、Electron アプリの構成と必要なファイルの準備についてまとめた内容をお届けします。
また、アプリの顔ともいえる、UI（ユーザーインターフェース）の部分をつかさどる index.html と style.css を取り上げます。お楽しみに！

参考：Electron 公式サイト https://www.electronjs.org/ja/

👉　次回（#2）はこちらから、どうぞ

👉　まとめ記事はこちらから、どうぞ

👉 記事一覧（マガジン）は、こちらから、どうぞ

【まとめ】Electronで始めるデスクトップアプリ開発

✍️ この記事が参考になったら──
筆者ふじけんのことが少しわかる、自己紹介noteもぜひどうぞ：
→ 🎰 777の日に、自己紹介してみた（100日投稿を超えて）(2025-07-07)
→ 気づけば続いてた。40,000views、ChatGPT1周年、そして256日連続。(2025-12-04)