Electron のインストール（Windows 上）

【概要】

Electron は、HTML，CSS，JavaScript といった Web の技術でデスクトップアプリケーションを作るためのフレームワークである。内部に Chromium（Web ページの表示を担当）と Node.js（ファイル操作などのシステム側の処理を担当）を組み込んでおり、Windows，macOS，Linux で動作するアプリケーションを同じソースコードから作成できる。

このページでは、Windows 上に Electron を導入し、サンプルアプリケーションを動かして動作を確認するまでの手順を説明する。

ユースケース：Web の技術を用いてデスクトップアプリケーションを開発したい場合。

動作条件：Electron の Windows 版は Windows 10 以降を対象とし、ia32（x86），x64，arm64 向けのバイナリが提供されている。

【目次】

1. 前準備
2. Electron のインストール
3. サンプルアプリケーションの実行

【関連する外部ページ】

Electron 公式ページ：https://electronjs.org/
Electron のインストール手順（公式）：https://www.electronjs.org/docs/latest/tutorial/installation
サンプルアプリケーション electron/minimal-repro：https://github.com/electron/minimal-repro
Electron Forge（アプリケーションの雛形作成と配布用パッケージの作成を行う公式ツール）：https://www.electronforge.io/

【サイト内の関連情報】

Node.js のインストール（Windows 上）：別ページ »で説明
git の使い方：別ページ »で説明

1. 前準備

Node.js のインストール

Electron はアプリケーションの管理に npm（Node.js に同梱されるパッケージ管理ツール）を用いるため、先に Node.js を導入する。公式ドキュメントでは LTS 版（長期サポート版）の利用が推奨されている。2026年7月時点の LTS 版は v24.18.0 である。

Node.js Windows 版のインストールは，別ページ »で説明

インストール後、コマンドプロンプトで次を実行し、バージョン番号が表示されることを確認する。

node -v
npm -v

Git のインストール（Windows 上） [クリックして展開]

管理者権限でコマンドプロンプトを起動する（手順：Windowsキーまたはスタートメニュー → cmd と入力 → 右クリック → 「管理者として実行」）。

管理者権限は，winget の --scope machine オプションでシステム全体にインストールするために必要となる。次のコマンドを実行する。

REM Git をシステム領域にインストール
winget install --scope machine --id Git.Git -e --silent --disable-interactivity --force --accept-source-agreements --accept-package-agreements --override "/VERYSILENT /NORESTART /NOCANCEL /SP- /CLOSEAPPLICATIONS /RESTARTAPPLICATIONS /COMPONENTS=""icons,ext\reg\shellhere,assoc,assoc_sh"" /o:PathOption=Cmd /o:CRLFOption=CRLFCommitAsIs /o:BashTerminalOption=MinTTY /o:DefaultBranchOption=main /o:EditorOption=VIM /o:SSHOption=OpenSSH /o:UseCredentialManager=Enabled /o:PerformanceTweaksFSCache=Enabled /o:EnableSymlinks=Disabled /o:EnableFSMonitor=Disabled"

2. Electron のインストール

Electron のインストールは，公式のインストール手順 https://www.electronjs.org/docs/latest/tutorial/installation に記載の手順に従う。公式では、アプリケーションのプロジェクト内に開発用の依存パッケージ（devDependencies）としてインストールする方法が推奨されている。システム全体へのインストール（-g オプションによるグローバルインストール）は推奨されていない。

Windows でコマンドプロンプトを起動する（この章の作業に管理者権限は不要）

プロジェクト用のディレクトリを作り，npm のパッケージとして初期化する

mkdir c:\electron
cd c:\electron
rmdir /s /q electron-sample
mkdir electron-sample
cd c:\electron\electron-sample
npm init -y

Electron のインストール
```
npm install --save-dev electron
```
Electron のバージョンの確認
```
npx electron --version
```
バージョン番号が表示されれば OK．2026年7月時点の安定版は 43.2.0 である。本ページの図とは違うバージョンが表示されることがある．

3. サンプルアプリケーションの実行

Electron 公式が公開している最小構成のサンプルアプリケーションを動かし、動作を確認する。このリポジトリは electron-quick-start という名前であったが、現在は minimal-repro に名前が変更されている。

サンプルアプリケーションのダウンロード

ダウンロードに，gitを用いる．

mkdir c:\electron
cd c:\electron
rmdir /s /q minimal-repro
git clone https://github.com/electron/minimal-repro

サンプルアプリケーションのインストールと実行
npm install で必要なパッケージ（Electron 本体を含む）を用意し，npm start で起動する．
```
cd c:\electron\minimal-repro
npm install
npm start
```
新しく画面が開くので確認する

開いた画面には，使用中の Chromium，Node.js，Electron のバージョン番号が表示される。画面を閉じるとアプリケーションは終了する。