Electron + Vue.js アプリでSQLite3を使う手順

Photo by Caspar Camille Rubin on Unsplash

はじめに

Electron + Vue.jsで構築したデスクトップアプリでSQLite3を使うための手順をまとめます。

前提と環境

以下の通りです。

• OS : Ubuntu 18.04
• Vue CLI : 3.8.2
• Electron : 5.0.0

この記事でのElectron + Vue.jsアプリは、Vue CLI 3を使って構築したVueアプリにVue CLI Plugin Electron Builderをプラグインとして追加した状態での手順になります。他のelectron-vueなどを使用して構築した場合やその他の条件下で試していませんが、何か参考になれば幸いです。なお、VUe CLI 3とVue CLI Plugin Electron Builderを使ったElectron + Vue.jsアプリの構築手順については以下に載せているので必要な方は見てみてください。

参考文献

以下の記事を参考にさせて頂きました。ありがとうございます。

SQLite3をインストールしてElectron用にリビルドする

Electronでは、Node.jsのネイティブモジュール（Node.jsのためのモジュール）をサポートしていますが、Electron向けにリビルド（再コンパイル）する必要があります。リビルドしないとモジュールが使用するNode.jsのバージョンが異なりエラーが出る場合があります。詳しくは以下の公式ドキュメントに記載されています。

SQLite3もnpmでインストールした後にリビルドします。リビルドにはelectron-rebuildを使用します。よってまずelectron-rebuildを以下でインストールします。

$ npm install --save-dev electron-rebuild

--save-devオプションは、package.jsonにバージョン情報を書き込みますが、開発時にのみ利用するオプションとそして記録されます。すなわちpackage.jsonのdevDependenciesにバージョン情報が書き込まれます。

続いてSQLite3を以下でインストールします。

$ npm install sqlite3 --save

そして以下のようにelectron-rebuildを使用してSQLite3をElectron用にリビルドします。なお、以下のコマンドはElectron + Vue.jsアプリのルートディレクトリにいる前提です。

$ ./node_modules/.bin/electron-rebuild  -f -w sqlite3

-fは強制的にリビルドするためのオプションで、-wは特定のモジュールを指定するためのオプションです。すなわち-wの後にモジュール名を続けてリビルドするモジュールを指定します。 もしくは、-mの後にディレクトリパスを指定することでそのパス下のモジュールをリビルドすることも可能です。

リビルドには少々時間がかかり、以下のように表示されれば完了です。

$ ./node_modules/.bin/electron-rebuild -f -w sqlite3
✔ Rebuild Complete

electron-rebuildの他のオプションについては以下の公式ドキュメントに記載されています。

以上でSQLite3のインストールとリビルドは完了です。

Electron + Vue.jsアプリでSQLite3を使用する

あとはメインプロセス、レンダラープロセスの任意の部分でデータベースに接続してデータベースを操作できます。

import sqlite3 from 'sqlite3'
// データベース作成＆開く
var db = new sqlite3.Database('testfile.db');

// serializeは一度に１つのクエリのみ実行するモード
db.serialize(function () {
  // テーブル作成のクエリを実行する
  db.run("create table users (name text, email text, age int)");
});

上記のようにnew sqlite3.Database('testfile.db');が実行されると、Electron + Vue.jsアプリのルートディレクトリにtestfile.dbというデータベースファイルが作成されます。 あとは以下はのように適当なメソッドに結びつけたボタンを用意して、そのボタンをクリックしたらデータをデータベースに書き込むことももちろんできます。後はクエリを変更すれば自由自在にSQLiteのデータベースを操作可能です。

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <button id='add-to-db' @click="addData()">データ登録</button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import sqlite3 from 'sqlite3'
var db = new sqlite3.Database('testfile.db')

export default {
  name: 'home',
  components: {
    HelloWorld
  },
  methods: {
    addData () {
      db.serialize(function () {
        var stmt = db.prepare("insert into users('name', 'email', 'age') values(?, ?, ?)")
        stmt.run('John', 'test@test.local', 20)
        // 上記では例のために固定値を渡しているが、
        // 実際にはフォームから受け取った値などを渡す。
      })
    }
  }
}
</script>

なお、データベースを閉じるためにはdb.close()を使用します。忘れにずに閉じるようにしましょう。 その他のSQLite3の使い方については、以下の公式ドキュメントに記載されています。

まとめ

Electron + Vue.jsアプリでSQLite3を使うまでに必要な手順は思ったより少なかったです。ただ、シンプルな処理のみの場合はこの記事の内容のように直接クエリを書いて対応できるかもしれませんが、実際にはORMなどを使う必要が多いかもしれません。また使う機会があればまとめたいと思います。