vuejs

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アプリの構築手順については以下に載せているので必要な方は見てみてください。

Electron+Vue.jsを使ったデスクトップアプリ開発を始める手順

ElectronはWebアプリケーションの開発に使われるJavascriptやHTML、CSSなどの技術を用いてデスクトップアプリを開発できるフレームワークです。1つのソースでクロスプラットフォーム対応(Windows、Mac OS、Linux)のデスクトップアプリを開発することができます。この記事では、Ubuntu上でElectronとさらにVue.jsを用いたデスクトップアプリ開発をはじめるために必要なツールのインストール手順と、実際にデモアプリを起動させるまでをまとめます。

参考文献

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

Persisting Data with SQLite

SQLite is an embedded (serverless), single file SQL database engine. Since the SQLite code is in public domain you can use it for free, either in free or commercial projects without any restrictions.

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

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

ネイティブのNodeモジュールを使用する | Electron

ネイティブの Node モジュールは Electron によってサポートされていますが、Electron はあなたのシステムにインストールされている Node バイナリとは異なった V8 のバージョンを使用する可能性が非常に高いので、使用するモジュールは Electron 向けに再コンパイルする必要があります。 そうしなければ、以下の類のエラーが実行しようとしたときに発生します。

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

$ npm install --save-dev electron-rebuild

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

続いて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の他のオプションについては以下の公式ドキュメントに記載されています。

electron/electron-rebuild

Package to rebuild native Node.js modules against the currently installed Electron version

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

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

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

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

// serializeは一度に1つのクエリのみ実行するモード
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のデータベースを操作可能です。

Home.vue<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の使い方については、以下の公式ドキュメントに記載されています。

mapbox/node-sqlite3

Asynchronous, non-blocking SQLite3 bindings for Node.js

まとめ

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

SPONSORED LINK

コメントを残す

メールアドレスが公開されることはありません。