VSCodeとJavaScriptでElectron入門

この記事は公開から3年以上経過しています。

VSCodeを用いたElectron開発の入門に最適な最小構成のElectronプロジェクトの作成、およびメインプロセス/レンダラプロセスのデバッグを行う方法をステップバイステップで簡単に紹介します。

なるべく構造や仕組みを理解しやすいように、使用言語はJavaScript、ディレクトリ構成はフラットにしています。

予めNode.jsをインストールしておく必要があります。

Electronプロジェクトの作成

以下の手順でVSCodeを用いたElectronアプリ開発に必要な最小構成の4ファイルを作成します。

Electronアプリのプロジェクトを格納するためのフォルダ(以降アプリルートフォルダと呼びます)を任意の名称で新規作成し、VSCodeで開く。
VSCodeのエクスプローラのアプリルートフォルダにnpm設定ファイルpackage.jsonを作成し、以下の内容をコピー＆ペーストする。
(厳密なファイルを生成したい場合はnpm initコマンドを使用)
```
{
  "private": true,
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}
```
VSCodeのターミナルを開いてカレントディレクトリがアプリルートフォルダであることを確認し、以下のコマンドでElectron開発に必要なnpmパッケージ群をインストールする。
(npmパッケージツリー情報ファイルpackage-lock.jsonファイル、node_modulesフォルダが自動生成される)
```
npm i electron --save-dev
```

VSCodeのエクスプローラのアプリルートフォルダに画面ファイルindex.htmlを作成し、以下の内容をコピー＆ペーストする。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello Electron</title>
  </head>
  <body>
    <script>
      window.onload = () => {
        document.write('Hello Electron');
      };
    </script>
  </body>
</html>

VSCodeのエクスプローラのアプリルートフォルダにエントリポイントファイルmain.jsを作成し、以下の内容をコピー＆ペーストする。

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

// 初期化処理完了イベント
app.on('ready', () => {
  const wnd = new BrowserWindow({ width: 400, height: 350 });
  // 画面ファイル読み込み
  wnd.loadFile('index.html');
});
// 全ウィンドウクローズイベント
app.on('window-all-closed', () => app.quit());

VSCodeのエクスプローラのアプリルートフォルダに新規フォルダ.vscodeを作成する。

VSCodeのエクスプローラの.vscodeフォルダに起動設定ファイルlaunch.jsonを作成し、以下の内容をコピー＆ペーストする。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "runtimeArgs": ["--remote-debugging-port=9223", "."],
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },""
    },
    {
      "name": "Debug Renderer Process",
      "type": "chrome",
      "request": "attach",
      "port": 9223,
      "webRoot": "${workspaceFolder}",
      "timeout": 10000
    }
  ],
  "compounds": [
    {
      "name": "Debug Both Processes",
      "configurations": ["Debug Main Process", "Debug Renderer Process"]
    }
  ]
}

以上でElectronプロジェクトファイル群の作成は終了です。最終的なフォルダ構成は以下のとおりです。

Electronアプリの実行(デバッグ)

基本的にVSCodeを利用したC#開発などと同様です。

RUN AND DEBUG右のドロップダウンリストからデバッグコンフィギュレーションを選択する。
(メインプロセスとレンダラプロセスの両方をデバッグしたい場合はDebug Both Processesを選択)

コンフィギュレーション名	説明
Debug Main Process	メインプロセスを起動
Debug Renderer Process	レンダラプロセスにアタッチ
Debug Both Processes	メインプロセスを起動＆レンダラプロセスにアタッチ

F5キーを押下、またはドロップダウンの▷ボタンを押下してプログラムを実行(デバッグ)する。

メインプロセスのデバッグ：

レンダラプロセスのデバッグ：

ちなみにレンダラプロセスのデバッグでデバッガがアタッチされるより先にコードが実行されてしまいブレークポイントにヒットしない場合がありますが、その場合はレンダラプロセスを再起動するか、デバッグ用に遅延させるなどの工夫が必要です。

参考ウェブサイトなど

Electron docs
クイックスタート

GitHub
microsoft/vscode-recipes: Electron debugging (main and renderer process)

以上です。