Electron開発の覚書

Electron関連の開発時に調べたことの覚書です。
それ以上のことは特にありません。
現在のプロジェクトで利用している範囲のため、使っているライブラリがそもそも古いなどがあるかもしれません。

ライブラリ

electron-store

設定値とかを保存するやつですね。
https://github.com/sindresorhus/electron-store

インストール
npm install electron-store

Electron doesn't have a built-in way to persist user settings and other data. This module handles that for you, so you can focus on building your app. The data is saved in a JSON file named config.json in

設定値をJSON形式で永続的にファイルに保存・ファイルからロードできます。
Electronアプリにて設定値を登録する場合に利用する感じです。

使い方もシンプルで、基本的にはキー・バリューで設定するとユーザーフォルダのアプリケーションフォルダ内にconfig.jsonファイルとして保存されます。

保存先は例えばWindowsだと、

C:\Users\{login-user}\AppData\Roaming\{electron-app}\config.jsonな感じです。

.store

config.jsonからデータをロードして読み込みします。

dotenv

.envファイルを読み込むやつ。
https://github.com/motdotla/dotenv

Electronの場合、.envファイルを用意しておいてmainプロセスで読み込みすると初期値として.envに登録した内容で処理を分けたりできる。
mainプロセスで読み込んでおくと、その後の処理でもprocess.env.{key}で環境設定値を読み込みできるので便利。

インストール
npm install dotenv --save

注意点としては、.envファイルのエンコードをUTF-8にしておくこと。
エンコードが違うと読み込み時にエラーで設定値を読み込みできないことがよくある。

electron-log

Simple logging module Electron/Node.js/NW.js application. No dependencies. No complicated configuration.

デバッグのログなどを簡単にファイルに出力できる。

Starts from v5, electron-log requires Electron 13+ or Node.js 14+. Feel free to use electron-log v4 for older runtime. v4 supports Node.js 0.10+ and almost any Electron build.

現行のv5は、Electron v13以降で動作するので、v13より前はv4を使う。

npm install electron-log@4.4.0

デバッグ

VS Codeでメインプロセスをデバッグする

VS CodeでElectronのメインプロセスをデバッグする方法

VS Codeで Run and Debug アイコンを選択します。

create a launch.json file. を選択します。

launch.jsonファイルを下記の通り書き換えます。

launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "debug main process",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "cwd": "${workspaceFolder}",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
            "windows": {
                "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
            },
            "args" : ["."],
            "outputCapture": "std",            
            "program": "${workspaceFolder}\\src\\main.js"
        }
    ]
}

後はF5でデバッグスタート。