テーブルやレコードを作成する。そのDBファイルをダウンロードする。ブラウザ上でできるのがすごい。
ブツ
初回ダウンロードに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()
});
initSqlJs
関数でwasm
ファイルをロードする- 1の完了後に
SQL
が返される SQL.Database()
でDB操作クラスのインスタンスdb
を生成するdb.exec()
でSQL文を発行するdb.export()
でDBファイルの内容であるバイナリを返す- 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
して開いて使えるのかな? 次回試してみよう。