Electronでユーザーに変更させたい設定と変更させたくない設定を保存/読込するやりかた

Electronでアプリを開発していてアプリ設定を保存することは欠かせないと思います。
アプリ設定といっても、ユーザーに変更させたい設定と変更させたくない内部設定があると思います。
ここではその用途別にやり方をまとめます。

ユーザーに変更させたい設定を保存/読込

ユーザーに変更させたい設定は"electron-store"を使うことで簡単に管理できます。

github.com

electron-storeをインストール

vscodeのターミナルのところで以下のコマンドをたたきます。 typescriptの型定義もはいってるみたいでTypeScriptでも使えます。

npm install electron-store

保存する

コード内の任意のところでインスタンスを生成し、setメソッドでキーと値を指定することで保存できます。 以下の例はアプリ終了時にウインドウの大きさと位置を保存するコードです。

import Store from "electron-store";

win.on("close", () => {
    const store = new Store();
    store.set("window.x", win!.getPosition()[0]);
    store.set("window.y", win!.getPosition()[1]);
    store.set("window.height", win!.getSize()[1]);
    store.set("window.width", win!.getSize()[0]);
});

保存された内容を確認

Windowsだと以下のパスにjson形式で保存されます。
アプリ名はpackage.jsonに定義されているnameの値になります。

C:\Users\[ユーザー名]\AppData\Roaming\[アプリ名]\config.json

保存されているファイルは以下になっています。

{
    "window": {
        "x": 114,
        "y": 335,
        "height": 600,
        "width": 800
    }
}

保存した設定を読込む

コード内の任意のところでインスタンスを生成し、getメソッドでキーを指定することで読み込みできます。
以下の例は保存したウインドウの情報を読み込んでウインドウを生成するコードです。

import Store from "electron-store";

async function createWindow() {
  const store = new Store();
  // Create the browser window.
  win = new BrowserWindow({
    x: store.get("window.x"),
    y: store.get("window.y"),
    width: store.get("window.width", 800),
    height: store.get("window.height", 600),
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: !!process.env.ELECTRON_NODE_INTEGRATION,
      //nodeIntegration: true,
    },
    title: AppConfig.AppName,
  });

ユーザーに変更させたくない設定を保存/読込

ユーザーに変更させたくない設定はクラスで定義できます。

設定値を定義する

クラスを以下のように定義します。
staticメンバーとして設定値を定義します。

/**
 * アプリ設定
 */
export default class AppConfig {
  /**
   * アプリ名
   */
  static AppName = "Empty Directory Cleaner";
  /**
   * ロガー設定ファイル
   */
  static LoggerConfigFile = "./log4js.config.json";
}

設定値を使用する

クラスをインポートして参照するだけです。

import AppConfig from "./models/AppConfig";

configure(AppConfig.LoggerConfigFile);

最後に

もっといいやり方があれば更新したいと思います。