Electronチュートリアル（初心者向け）

Electronは HTML / CSS /
JavaScriptでデスクトップアプリを作れるフレームワーク です。
VSCode・Discord・SlackなどもElectronで作られています。

このチュートリアルでは 最小構成のデスクトップアプリを作る方法
を解説します。

---

1. Electronとは

Electronは次の2つを組み合わせた仕組みです。

技術 役割

---

Chromium ブラウザエンジン
Node.js OS操作

つまり

Webアプリ + Node.js = デスクトップアプリ

になります。

---

2. 必要な環境

事前に以下をインストールします。

• Node.js
• npm
• Git（任意）

確認

node -v
npm -v

---

3. プロジェクト作成

mkdir electron-tutorial
cd electron-tutorial
npm init -y

---

4. Electronインストール

npm install electron --save-dev

---

5. フォルダ構成

electron-tutorial
 ├ package.json
 ├ main.js
 └ index.html

---

6. main.js

const { app, BrowserWindow } = require("electron")

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile("index.html")
}

app.whenReady().then(createWindow)

---

7. index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron App</title>
</head>

<body>

<h1>Hello Electron</h1>

<p>これはElectronアプリです</p>

<button onclick="hello()">クリック</button>

<script>
function hello(){
  alert("Hello Electron")
}
</script>

</body>
</html>

---

8. package.json

{
  "name": "electron-tutorial",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

---

9. アプリ起動

npm start

---

10. Electronの仕組み

Electronは2つのプロセスで動きます。

プロセス 説明

---

Main Process Node.js / OS操作
Renderer Process HTML / UI

---

11. EXE化

npm install electron-builder --save-dev

npm run build

distフォルダに

setup.exe

が生成されます。

---

12. Electronのメリット

• Web技術でアプリ開発できる
• Windows / Mac / Linux対応
• UIを作りやすい

13. Electronのデメリット

• アプリサイズが大きくなりやすい
• メモリ使用量が多い

---

14. 有名なElectronアプリ

アプリ

VSCode
Discord
Slack
Notion
Figma

---

まとめ

Electronを使うと

HTML + CSS + JS → デスクトップアプリ

を簡単に作れます。