Chapter 02

Electron はじめの一歩

Kei Touge
Kei Touge
2021.09.18に更新

とりあえず Electron を動かしてみよう

まずは実際に Electron アプリを作って、動かしてみましょう。

いまはまだ何をやっているのか分からないところもあるかもしれませんが、とりあえず手順にしたがって実践してみてください。

プロジェクトフォルダの作成

これから Electron アプリを作成していくフォルダを作成し、そのフォルダへ移動します。
ターミナル[1]を開いて、つぎのコマンドを入力してください。

bash
$ mkdir myapp

$ cd myapp

ここでは、フォルダ名を myapp としました。今後、この myapp フォルダを 「プロジェクトフォルダ」 と呼びます。

Node.js プロジェクトとする

npm コマンドを使って、この myapp フォルダを Node.js のプロジェクトとして初期化します。

bash
$ npm init --yes

Wrote to C:\Users\zenn\myapp\package.json:

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

npm コマンドは Node.js と一緒にすでにインストールされています。

プロジェクトフォルダ直下に package.json というファイルが作成されたと思います。

Electron のインストール

では、このプロジェクトへ Electron をインストールしましょう。

bash
$ npm install --save-dev electron

added 87 packages, and audited 88 packages in 9s

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

found 0 vulnerabilities

electronpackage.jsondevDependencies エントリに追加されていることを確認しましょう。

package.json
   "author": "",
   "license": "ISC",
+  "devDependencies": {
+    "electron": "^13.1.2"
+  }
 }

なお、上で入力したコマンドは次のような短縮型とすることもできます。

bash
$ npm i -D electron

ソースコードの準備

次の index.htmlapp.js、そして main.js をコピーして、それぞれをプロジェクトフォルダ直下のファイルとして配置してください。

余談

ソースコードのコピー&ペーストも macOS ターミナルGit Bash for Windows などではコマンドラインから簡単に実行できます。

mac OS ターミナルの場合:

zsh
# 上記のソースコードをマウスドラッグ&右クリックメニューでコピーして...
% pbpaste > index.html

Git Bash の場合:

bash
# 上記のソースコードをマウスドラッグ&右クリックメニューでコピーして...
$ cat /dev/clipboard > index.html
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>マイアプリ</title>
  </head>
  <body>
    <h1>Hello, world.</h1>

    <script src="app.js"></script>
  </body>
</html>
app.js
console.log('Hello, world.');
main.js
const { app, BrowserWindow } = require('electron');

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 600,
    height: 400,
    title: 'マイアプリ',
  });

  mainWindow.loadFile('index.html');
};

app.once('ready', () => {
  createWindow();
});

app.once('window-all-closed', () => app.quit());

各ソースコードの役割やその内容の意味については、のちの章で詳しく見ていきます。

これでプロジェクトフォルダは、次のようなファイル構成になったと思います。

$ tree -a -L 1
.
├── app.js
├── index.html
├── main.js
├── node_modules
├── package-lock.json
└── package.json

1 directory, 5 files

package.json の編集

Electron は、起動するときにそのカレントディレクトリに置かれた package.jsonmain エントリに指定されたスクリプトを読み込みます。

package.json
{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

ここでは index.js が指定されていますが、これを先ほど作成した main.js に修正します。

package.json
   "version": "1.0.0",
   "description": "",
-  "main": "index.js",
+  "main": "main.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

NPM スクリプトの編集

また、package.jsonscripts エントリに記載されているスクリプトは、 NPM スクリプトと呼ばれ、npm run スクリプト名 で実行することができます。

package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

ここでは、test スクリプトのみが指定されていますが、これを書き換えます。

package.json
    "scripts": {
-     "test": "echo \"Error: no test specified\" && exit 1"
+     "start": "electron ."
    },

これにより、 npm run start コマンドの実行で electron がプロジェクトフォルダ直下 (= .) をカレントディレクトリとして起動するようになりました。

Electron アプリの起動

では、さっそく実行してみましょう。

bash
$ npm run start

fig02

おめでとうございます。あなたの初めての Electron アプリ、「マイアプリ」が立ち上がりました!

他の Windows アプリ(または macOS アプリ)と同じようにタイトルバーやウィンドウメニューが備わっていることが分かりますね。

また、タスクバー(もしくは Dock )にもこのアプリのアイコンが表示されていると思います。

fig03

デベロッパーツールの表示

Electron アプリでは、web サイトの開発時と同様に、ウィンドウ内に表示されているコンテンツの挙動についてデベロッパーツールで調べることもできます。

Ctrl + シフト + I キーを押してみましょう。

macOS では、コマンド + option + I キーを押してください。

デベロッパーツールの console を選択すると、app.js に記述しておいた Hello, world. がデベロッパーコンソールへ出力されていることを確認できます。

fig04

起動時にデベロッパーツールを別ウィンドウで表示する

main.js へ以下のコードを加えることで、アプリの起動時にデベロッパーツールを別窓で開くこともできます。

main.js
 const createWindow = () => {
   const mainWindow = new BrowserWindow({
     width: 600,
     height: 400,
     title: 'マイアプリ',
   });

+  mainWindow.webContents.openDevTools({ mode: 'detach' });
   mainWindow.loadFile('index.html');
};

fig05

この章のソースコード全文

package.json
{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^13.1.2"
  }
}
app.js
console.log('Hello, world.');
index.html(クリックして展開)
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>マイアプリ</title>
  </head>
  <body>
    <h1>Hello, world.</h1>

    <script src="app.js"></script>
  </body>
</html>
main.js(クリックして展開)
main.js
const { app, BrowserWindow } = require('electron');

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 600,
    height: 400,
    title: 'マイアプリ',
  });

  // mainWindow.webContents.openDevTools({ mode: 'detach' });
  mainWindow.loadFile('index.html');
};

app.once('ready', () => {
  createWindow();
});

app.once('window-all-closed', () => app.quit());
脚注
  1. macOS であれば「ターミナル.app」、Windows では Git Bash などです。 ↩︎