【JavaScript】Electronで始める！ Windows/Mac対応デスクトップアプリ開発〜導入編〜

2025年6月24日2025年6月25日

概要

JavaScript、HTML、CSS の知識のみでデスクトップアプリの作成方法を紹介します！

Electron というフレームワークを使用します😎

いくつかの記事に分けて紹介する予定で、本記事では基礎的なElectronを使ったビルドについて扱います。

Electron とは

JavaScript、HTML、CSS によるデスクトップアプリケーションを構築するフレームワークです。
Windows、macOS、Linux で動作するクロスプラットフォームアプリを作成できます!

公式ドキュメント

コード

ひとまず公式ドキュメントのサンプルコードをそのまま使用します。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>Hello from Electron renderer!</title>
  </head>
  <body>
    <h1>Hello from Electron renderer!</h1>
    <p>👋</p>
    <p id="info"></p>
  </body>
  <script src="./renderer.js"></script>
</html>

main.js

const { app, BrowserWindow } = require('electron/main')

//ウインドウを作成
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  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()
  }
})

手順

Mac、Windowsどちらの環境でもいいようにDockerで環境を構築します。

Dockerについてはこちらを参考にしてみてください。

1.コンテナを作成

docker run -it -d --name tmp -p 8000:8000 ubuntu:22.04

2.コンテナに入る

docker exec -it tmp /bin/bash

3.ubuntuのアップデート

apt update
apt upgrade

3.必要プログラムのインストール

apt install vim
apt install wget
apt install curl
apt install npm
apt instakk nodejs

4.作業ディレクトリの作成と移動

cd home
mkdir app
cd app

5.index.htmlの作成

vi index.html

エディターが立ち上がるので、コードのindex.htmlを貼り付けてください。

その後

6.main.jsの作成

vi  main.js

エディターが立ち上がるので、コードのmain.jsを貼り付けてください。

7.下準備　

npm init -y

8.Node.jsのバージョンを上げつためのツールをインストール

バージョンを上げないと、Electronのインストールに失敗します。

# nvmのインストールスクリプトをダウンロードして実行
# 'curl' または 'wget' のどちらか一方でOKです。
# v0.40.3の部分は、最新のバージョンに置き換えてください。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

# 上記のcurlコマンドがうまくいかない場合や、wgetが好きな方はこちら

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

# nvmの環境設定を現在のシェルに読み込む
# 通常、インストールスクリプトが~/.bashrcまたは~/.zshrcに設定を追記します。
source ~/.bashrc

↓反映が成功しているか確認↓

バージョンが表示されていれば成功です。

nvm --version

9.Node.jsのバージョンを上げる

nvm install 22

## ↓成功してるか確認できます。
node -v

10.ここでやっとElectronのインストール

npm install electron --save-dev

11.パッケージ化するためのツールをインストール

npm install @electron/packager --save-dev

12.コマンドの定義

vi package.json

↓ package.jsonのscriptの箇所に追記します↓

"package:mac": "npx @electron/packager . my-electron-app --platform=darwin --arch=universal --out=./build --overwrite",
"package:win": "npx @electron/packager . my-electron-app --platform=win32 --arch=x64 --out=./build --overwrite", 
"package:linux": "npx @electron/packager . my-electron-app --platform=linux --arch=x64 --out=./build --overwrite", 
"package:all": "npx @electron/packager . my-electron-app --all --out=./build --overwrite”,
"package:mac-arm64": "npx @electron/packager . my-electron-app --platform=darwin --arch=arm64 --out=./build --overwrite",

13.うまく追記できたか確認