【Electron】ローカルファイルを読み書きするには

参考

ほか

ポイント

ElectronはNode.jsで動く

しかし表示するHTMLに読み込むjs（レンダラープロセス）ではNode.jsを直接読み込めない

セキュリティのため

※Electron v12（2021/03）からの仕様変更により、それ以前に書かれた記事の記述はそのまま使えない

preload.jsというファイルを挟むとNode.jsが使える！

main.js（メインプロセス）にpreloadを設定する

code:main.js

const createWindow = () => {

const mainWindow = new BrowserWindow({

width: 600,

height: 400,

title: 'マイアプリ',

webPreferences: {

preload: path.join(__dirname, 'preload.js'),

sandbox: false, // Electron 20.0以降明示が必要

},

});

// 省略

};

preload.jsにcontextBridgeでメソッドを作る（私が実際に使っているコードを例として）

code:preload.js

const {contextBridge} = require('electron');

const fs = require('fs');

contextBridge.exposeInMainWorld('myapi', {

// 各js内でmyapi.loadFile("hoge.json")といった形で使う

// 「myapi」の部分は自由に設定可

loadFile(fileName){

const filePath = "src/data/" + fileName;

let result = fs.readFileSync(filePath, "utf-8");

return result;

},

saveFile(fileName,text){

const filePath = "src/data/" + fileName;

fs.writeFileSync(filePath, text);

},

})

レンダラープロセス（HTMLに読み込むjs）でメソッドを呼び出す

code:script.js

const data = myapi.loadFile("hoge.json");

// "src/data/hoge.json"の中身を取得できる

備考

仕組みをきちんと理解できておらず「とりあえず動く」以上のものではないので個人用としてのみ参考にしてください