NeDBのElectron（Nuxt）での永続化について：小さな見落とし

前提

自分用の小さなアプリをElectronで制作しようと思い立ちました。その際簡単なDBが欲しいと思い、導入が簡単で記事も多いNeDBを選択しました。その際に永続化の手順について調べたので共有します。

環境

• electron: ^4.0.3
• nuxt: ^2.4.2
• nedb: ^1.8.0

ElectronとNuxtの準備は出来ているものとします。
Nuxtのテンプレートだと最新版が入らないので、今回はNuxtを入れてからElectronを追加する手順で準備しました。

NeDBの導入と永続化

先ず、NeDBをNuxtに追加します。最終的に$nedbでアクセスしたかったので、pluginsにプラグインを追加します。ElectronのgetPathを使ってユーザーデータの領域に、data.nedbというファイルを作成することで永続化をします。

plugins/nedb.js

import path from 'path'
import { remote } from 'electron'
import Nedb from 'nedb'

export default ({ app }, inject) => {
  if (process.browser) {
    const db = new Nedb({
      filename: path.join(remote.app.getPath('userData'), './data.nedb'),
      autoload: true
    })
    inject('nedb', db)
  }
}

• inject／統合された注入

書き込み

$nedbでNeDBのメソッドを呼び出して確認します。
insertでテストデータを書き込んできます。問題なく実行できると思います。

pages/index.vue

<template>
  ···
</template>

<script>
export default {
  mounted() {
    this.$nedb.insert({
      data: 'Hello World!'
    })
  }
}
</script>

読み込み

NeDBからデータを読み込んでみます。findでデータを読み込みます。docsに先程書き込んだデータが取得出来ることを期待します。
一度アプリを閉じて書き換えて再度実行してみます。

pages/index.vue

<template>
  ···
</template>

<script>
export default {
  mounted() {
    this.$nedb.find({}, function (error, docs) {
      if (!error) {
        console.log(docs)
      }
    })
  }
}
</script>

問題発生

上記で問題なく取得出来ると思ったのですが、docsにデータがありません。エラーも出ていません。
調べたところ

• NeDBはElectronのrenderer側でインスタンス化？された場合indexedDBを使うようです。
• main側でインスタンス化された場合は、期待したとおりuserDataにファイルが作成されるようです。

indexedDBはuserDataに有るので確認したところ、userData/IndexedDBに作られているのを確認しました。ただ、なぜか読み込みが出来ていません。

ポート番号

と、気づいた事が、IndexedDBのフォルダ名にポート番号が！indexedDBはURL毎に作られるので当然です。そこでmain.jsを確認します。

main.js

const http = require('http')
const { Nuxt, Builder } = require('nuxt')
const config = require('./nuxt.config.js')
config.rootDir = __dirname
// Init Nuxt.js
const nuxt = new Nuxt(config)
const builder = new Builder(nuxt)
const server = http.createServer(nuxt.render)
//
// Build only in dev mode
if (config.dev) {
  builder.build().catch((err) => {
    console.error(err)
    process.exit(1)
  })
}
// Listen the server
server.listen()
//
const _NUXT_URL_ = `http://localhost:${server.address().port}`

···

• server.listen()

ポート番号をここで指定するのですが、空なので都度ポート番号が振られていたようです。
修正後、追加と読み込みを行ったところ無事に読み込めました。小さな見落としです。

メインプロセスを使う

試していませんが、下記の様にメインプロセスを使う方法も有るようです。
globalというのも知りませんでした。

• https://github.com/louischatriot/nedb/issues/531#issuecomment-439599145

IndexedDBの容量

IndexedDBはブラウザでの使用が想定されているので容量はどうなんだろうと思いググってみました。
記事によると全然心配ないみたいです。これでレンダープロセスだけで十分ですね。

• ChromeのIndexedDB(2.0)に、限界までデータを登録してみました

参照

• NeDB