いよいよ､macOS 上で Electron ｱﾌﾟﾘを開発してみる[Mac]
(2026-10-24 23:48:06) by shinoda
< ﾍﾟｰｼﾞ移動: 1 2 >
開発用のﾌｫﾙﾀﾞを作成し､そこをｶﾚﾝﾄﾃﾞｨﾚｸﾄﾘとして VSCode を起動する｡
~ % cd ~/Desktop
~/Desktop % mkdir electron-test
~/Desktop % cd electron-test
~/Desktop/electron-test % code .
zsh: command not found: code
ありゃ?ﾊﾟｽが通ってない?
ﾊﾟｽを通すには､VSCode を使って登録するのが一番簡単である｡
まず､ｱﾌﾟﾘｹｰｼｮﾝﾌｫﾙﾀﾞの Visual Studio Code.app を実行｡それから Shift + Command + P で検索ﾊﾞｰ(ｺﾏﾝﾄﾞﾊﾟﾚｯﾄ)を表示｡
｢shell command｣と入力してｺﾏﾝﾄﾞ候補が表示されるので､
Shell Command: install 'code' and optionally 'copilot' command in PATH
※ copilot を使ってない場合は､and optionally 'copilot' は表示してないかも
を選択して実行｡これでﾊﾟｽが通る｡実際はどこかのﾌｧｲﾙに実際のﾊﾟｽ(/Applications/Visual Studio Code.app/Contents/Resources/app/bin/code)が登録されたわけではなく､これ､/usr/local/bin の下に code のｼﾝﾎﾞﾘｯｸﾘﾝｸ(Windows で言うｼｮｰﾄｶｯﾄ､macOS のｴｲﾘｱｽと一緒)が作られている｡
~/Desktop/electron-test % ls -la /usr/local/bin/code
lrwxr-xr-x 1 root wheel 68 10月 24 20:43 /usr/local/bin/code -> /Applications/Visual Studio Code.app/Contents/Resources/app/bin/code
/usr/local/bin は元々ｺﾏﾝﾄﾞ入力時の検索ﾊﾟｽに入っているので､これでどこで 'code' と入力しても､ちゃんと VSCode が起動するようになる｡
VSCode が起動したら､早速そこでﾀｰﾐﾅﾙを開き(Shift + Command + P で検索ﾊﾞｰを開き｢Terminal: Create New Terminal｣を選択､実行)､そこで､npm init -y を実行｡
~/Desktop/electron-test % npm init -y
},
"keywords": [],
"type": "commonjs"
}
ﾌｫﾙﾀﾞに package.json というﾌｧｲﾙが作成される｡
次に､このﾌｫﾙﾀﾞに Electron をｲﾝｽﾄｰﾙする｡
~/Desktop/electron-test % npm install electron --save-dev
added 13 packages, and audited 14 packages in 1s
1 package is looking for funding
run `npm fund` for details
found 0 vulnerabilities
ちゃんと入った｡ﾌｫﾙﾀﾞの下(って言うのは DOS 時代の名残か(笑)｡Windows や Mac で最初から｢ﾌｫﾙﾀﾞ｣生活の人たちは｢下｣じゃなく｢中｣って言うのよね(笑))に node_modules ﾌｫﾙﾀﾞなどができているはず｡
これで開発の準備はできたので､次に main.js というﾌｧｲﾙを作成｡VSCode のｴｸｽﾌﾟﾛｰﾗｰ窓で右ﾎﾞﾀﾝﾒﾆｭｰを開き｢新しいﾌｧｲﾙ...｣を選択｡ﾌｧｲﾙ名を main.js にする｡
【main.js】
const { app, BrowserWindow } = require('electron')