ElectronでJSONデータを保存／読み込みする方法 #JavaScript

Electronのアプリ開発において、ローカルファイルだけで完結する場合のデータ保管方法です。SQLite3でやろうか、ymlでやろうかいろいろ調べていたのですが、JSONが比較的扱いやすいようなので、JSONでデータを管理する方法を選択する方は参考にしてみてください。

材料

electron-json-storage

前提としてElectronでHello World程度の環境は整っているものとします。

手順

1. NPMのパッケージをインストールする

プロジェクトルートのShellで以下コマンドを入力してインストールします。

npm install --save electron-json-storage

2. クライアントのJavascriptファイルに記述する

以下、サンプルプログラムとなります。

const storage = require('electron-json-storage');

var data = { // 仮のJSONデータの材料
    site_name: "Sample site",
    site_url: "http://sample.com"
};
storage.set('config.json', data, function (error) {　// 書き出し（sample/config.jsonとディレクトリを指定することも可能）
    if (error) throw error;
});
storage.get('config.json', function(error, data) { // 読み込みしてHTMLに書き出す
    if (error) throw error;
    document.getElementById("site-name").innerHTML = data.site_name;
    document.getElementById("site-url").innerHTML = data.site_url;
});

これで読み書きすることが可能。

3. データの保存先

ローカルで開発しているときには物理的にファイルが生成されているわけではないのか、参照先がみつかりません。パッケージ化してからファイル名で検索すれば保存場所がわかると思われます。

まとめ

これは便利。fs.とかFile APIでゴニョゴニョやることもできますが、ローカルファイルの読み書きって結構面倒で、逆にhttp通信とかに乗せたほうが楽なんてこともあります。気軽にローカルデータを扱う方法として誰かの役にたったらいいなと思っております。

（追記:2016年12月5日18:00）

２つ追加でお伝えしたいことがあります。

ファイルの保存場所

MacのJSON保存場所

/Users/(username)/Library/Application Support/appname/

今回は勝手ながらmacOSアプリをつくっているのでWindowsは割愛します。

上記ディレクトリ内のパスを分けたい場合

保存場所がわかったところで、strage.setとstrage.getの第一引数に'sample/sample.jsonという具合にディレクトリパスを記述してもelectron-json-strageはmkdirしてくれませんので、そんなときはelectron-strageの方が良かった。（パッケージ化してみて確認、ディレクトリができていないことに気づき、別の方法を模索）
electron-json-strageの代わりに以下を試してみてください。

Shell

npm install --save electron-storage

Javascript：anywhere.js

const storage = require('electron-storage');

storage.get('mydir/sample.json', (err, data) => {
  if (err) {
    console.error(err)
  } else {
    //ここに処理
  }
});

storage.set('mydir/sample.json', data, (err) => {
  if (err) {
    console.error(err)
  }
});

これでパッケージ化してみると、こんなローカルディレクトリ構成になります。

/Users/(username)/Library/Application Support/appname/mydir/sample.json

これでJSONを用途に併せてディレクトリで分けて保存できますね。以上。