Electron と Node.js #1
〜 Electron を Windows10 にインストール 〜
2021-05-01 作成 福島
2021-08-05 更新 福島
2021-09-02 更新 福島
2022-03-30 更新 福島
TOP > tips > electron

前置き (今回はちょっと長め)

Electron と Node.js には、導入の難しさがあります。
コンピュータに習熟した人ほど困惑します。


0. インストール要件

Electron のインストールは、グローバルインストールとローカルインストールがありますが、
バージョンアップ時のトラブルを最小限にするため、本稿ではローカルインストールを実施します。

グローバルインストールを選択すると、以下の問題が発生する。(これが許容できるなら、グローバルインストールのほうが使い勝手に優れる)
項目内容備考
インストール対象Windows10 Pro 20H2 64bit本稿記述時の最新版
Npm6.14.12
Node.jsv14.16.1
Electronv12.0.6
ワーキングフォルダC:\Users\who\example\本稿ではユーザ名を「who」としている
Electron のインストールフォルダC:\Users\who\example\node_modules\本稿ではローカルインストールをする

1. Node.js (と npm) のインストール

1-1. Node.js インストーラのダウンロード
Node.js の公式 Web ページから「  LTS 推奨版  」のインストーラ「Windows Installer (.msi)」をダウンロードする。
(LTS: Long Term Support = 長期サポート版のこと)
インストール対象の Windows が 64bit なので、ここでは 64bit 版を選択している。
ダウンロードされる Node.js のインストーラのファイル名は
node-vXX.XX.XX-x64.msi となる。
(今回は node-v14.16.1-x64.msi だった)

過去のバージョンはここからダウンロードする。
1-2. Node.js インストーラの実行
Node.js をインストールすることにより、npm もインストールされる。

インストーラ node-v14.16.1-x64.msi を実行する。
インストーラを右クリックし、「インストール(I)」を選択する。
ダブルクリックでも可。

ボタンをクリックする。

I accept the terms in the License Agreement」
にチェックを入れ、 ボタンをクリックする。

インストーフォルダを確認し、 ボタンをクリックする。
デフォルトは「C:\Program Files\nodejs"」

ボタンをクリックする。

ボタンをクリックする。

ボタンをクリックする。

UAC 画面が表示されるので、 ボタンをクリックする。

待つ。

ボタンをクリックする。
1-3. インストールされた npm, Node.js のバージョンを確認。
通常ユーザで PowerShell を実行 (≠管理者)
スタート (右クリック) から「Windows PowerShell(I)」を選択

 >_ Windows PowerShell 
Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

新しいクロスプラットフォームの PowerShell をお試しください https://aka.ms/pscore6

PS C:\Users\who> npm -v 
6.14.12
PS C:\Users\who> node -v 
v14.16.1
PS C:\Users\who> exit 


2. Electron のインストール

Electron は、システムにひとつだけインストールするのではなく、プロジェクト毎にひとつインストールします。
そのためにまず、プロジェクトのワーキングフォルダを作成し、その中に Electron をインストールします。

2-1. ワーキングフォルダを作成し、npm で初期化する。
通常ユーザで PowerShell を実行 (≠管理者)
スタート (右クリック) から「Windows PowerShell(I)」を選択

 >_ Windows PowerShell 
Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

新しいクロスプラットフォームの PowerShell をお試しください https://aka.ms/pscore6

PS C:\Users\who> mkdir example 
PS C:\Users\who> cd .\example\ 
PS C:\Users\who\example> npm init 
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (example) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to C:\Users\who\example\package.json:

{
  "name": "example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes 
PS C:\Users\who\example>
パッケージ情報は、すべてデフォルト (未記入) にしている。

パッケージ情報の質問をスキップする場合は「npm init -y」を実行する。
2-2. Electron をインストール
 >_ Windows PowerShell 

PS C:\Users\who\example> npm install electron 

> core-js@3.11.1 postinstall C:\Users\who\example\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> electron@12.0.6 postinstall C:\Users\who\example\node_modules\electron
> node install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN example@1.0.0 No description
npm WARN example@1.0.0 No repository field.

+ electron@12.0.6
added 87 packages from 95 contributors and audited 87 packages in 32.454s

6 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

PS C:\Users\who\example>
  • バージョンを指定して Electron をインストールするには npm install electron@12.0.6 を実行する。
  • Electron のバージョン一覧を表示するには npm info electron versions を実行する。
2-3. 日本語符号パッケージの組み込み
Windows なので Shift-JIS の処理に備える。
 >_ Windows PowerShell 

PS C:\Users\who\example> npm install encoding-japanese 

added 1 package, and audited 88 packages in 920ms

5 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

PS C:\Users\who\example>
2-4. config パッケージの組み込み
.\config\default.json を利用できるようにしておく。
 >_ Windows PowerShell 

PS C:\Users\who\example> npm install config 

added 1 packages, and audited 89 packages in 3s

24 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

PS C:\Users\who\example>
2-5. electron-builder の組み込み
配布用インストーラを作成できるようにしておく。
 >_ Windows PowerShell 

PS C:\Users\who\example> npm install electron-builder 

added 187 packages, and audited 276 packages in 23s

24 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

PS C:\Users\who\example>
2-6. インストールされた Electron のバージョンを確認
 >_ Windows PowerShell 

PS C:\Users\who\example> .\node_modules\.bin\electron.cmd -v 
v12.0.6
PS C:\Users\who\example>

バージョンが表示されたら、何かキーを入力する。(スペースキーを推奨)
→ v14 からキー入力の必要がなくなった。


2-7. Hello プログラムを作成
C:\Users\who\example\index.js (文字コードは UTF-8 で保存)
// メインプロセス (index.js)
"use strict" ;     // プログラムのミスを見つけやすくするための宣言。

// Electron モジュール (クラス) の用意。
const ele = require("electron") ;

// イベントハンドラ 'ready' の定義。(Electron の初期化が完了したら呼ばれる)
ele.app.on('ready', () => {

    // HTML を用意する。
    let dynContent = "data:text/html; charset=utf-8,"
        + [
            "<html>",
            "<body>",
                "Hello, Electron",
            "</body>",
            "</html>",
        ].join("") ;

    // ウィンドウを用意する。
    let win = new ele.BrowserWindow( {width:320, height:200} ) ;

    // ウィンドウに HTML を表示する。
    win.loadURL(dynContent) ;

    // ウィンドウが閉じたらインスタンスを解放する。
    win.on('closed', () => { win = null ; }) ;
}) ;

// イベントハンドラ 'window-all-closed' の定義。(ウィンドウがすべて閉じたら呼ばれる)
ele.app.on('window-all-closed', () => {

    if (process.platform == 'darwin')
        return ;        // Apple は quit() の必要がない。

    ele.app.quit() ;    // アプリケーションを終了する。
}) ;
使用している Electron のクラスについて以下に記述がある。(英語)
2-8. Hello プログラムを実行
 >_ Windows PowerShell 

PS C:\Users\who\example> .\node_modules\.bin\electron.cmd . 
PS C:\Users\who\example>
見えにくいかもしれないが、行末のドットを忘れずに。

実行結果

2-9. ワーキングフォルダを削除
当然、Electron も削除される。
 >_ Windows PowerShell 

PS C:\Users\who\example> cd .. 
PS C:\Users\who> Remove-Item .\example\ -Recurse 
PS C:\Users\who> exit