テーブルやレコードを作成する。そのDBファイルをダウンロードする。ブラウザ上でできるのがすごい。

ブツ

eyecatch.png

初回ダウンロードに10秒くらいかかるのが残念。2回目以降は早いことから、ライブラリであるWASMファイルのダウンロードに時間がかかっているようだ。

前回

情報源

コード抜粋

<script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.6.2/sql-wasm.min.js"></script>
initSqlJs({
    locateFile: file => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.6.2/${file}`
}).then(SQL => {
    const db = new SQL.Database();
    let res = JSON.stringify(db.exec("SELECT sqlite_version();"));
    console.debug(res)
    res = JSON.stringify(db.exec(`CREATE TABLE users(id INTEGER PRIMARY KEY, name TEXT);`));
    console.debug(res)
    res = JSON.stringify(db.exec(`INSERT INTO users(name) VALUES ('ytyaru');`));
    console.debug(res)
    res = JSON.stringify(db.exec(`SELECT * FROM users;`));
    console.debug(res)
    //db.export()
    const downloader = new Sqlite3DbDownloader()
    downloader.download() 
});
  1. initSqlJs関数でwasmファイルをロードする
  2. 1の完了後にSQLが返される
  3. SQL.Database()でDB操作クラスのインスタンスdbを生成する
  4. db.exec()でSQL文を発行する
  5. db.export()でDBファイルの内容であるバイナリを返す
  6. 5をJSZipでファイルにしてダウンロードする

ファイル操作のところに工夫が必要だが、一応ブラウザでもSQLite3が使えた。

ダウンロードしたファイルを確認する

DEMOでダウンロードしたZIPファイルを展開し、users.dbの中身をみてみる。

DBファイルを開く

sqlite3 /tmp/users.db
sqlite> 

DB内のテーブル名を一覧する

sqlite> .tables
users

指定テーブル名のスキーマを確認する

select sql from sqlite_master where type='table' and name='users';
CREATE TABLE users(id INTEGER PRIMARY KEY, name TEXT)

指定テーブルの全レコードを取得する

select * from users;
1|ytyaru
2|hoge

テキストエリアに入力した名前がレコードに挿入されていることを確認した。

所感

WebAssemblyを使えば、今までローカルでしか使えなかったソフトウェアがWebでも使えるようになる。SQLite3もそのひとつ。けど、.tablesのようなドットコマンドは使えなかった。sql.jsの実装がそうなっているのだろう。完璧に互換性があるわけではないのかな?

SQLite3がブラウザでも使えたら、なんか面白いことができるかもしれない。

ダウンロードしたファイルをブラウザでfetchして開いて使えるのかな? 次回試してみよう。