Zenn
🌸

[WebAssembly]かんたんindex.htmlでSQLite(sql.js, cdnjs)

2022/04/17に公開
HTML
SQL
WebAssembly
SQLite
sqljs
tech

最近ようやくViteをはじめてドキュメントを読みまくっているのですが、特徴のページに

プリコンパイルされた .wasm ファイルは直接インポートできます
https://ja.vitejs.dev/guide/features.html#webassembly

みたいなことが書かれていたので.wasmファイルが必要になり、色々調べた結果sql.jsが配布しているSQLiteのWASMバイナリをcdnjsから引っ張ってくるのが一番早かったのでダウンロードしてきました。

https://github.com/sql-js/sql.js

まあそれはそれとして今回はViteの解説ではなく、sql.jsを使えばindex.htmlだけで.wasmファイル読み込めるみたいなことがREADMEに書かれていたので、試したことを残しておきます。

https://cdnjs.com/libraries/sql.js/1.4.0

cdnjsの場合1.4.0までは./dist/${file}に.wasmファイルがありますが、

https://cdnjs.com/libraries/sql.js

1.5.0以降./${file}に.wasmファイルがあるため注意が必要です。
今回は1.6.2を使用しています。

ちなみに引数fileはsql-wasm.wasmなので、上記URLから.wasmファイルを読み込んでいることになります。
リンクをクリックすれば.wasmファイルが降ってきますね。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>SQLite</title>
    <meta name="description" content="Zenn" />
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.6.2/sql-wasm.min.js"></script>
    <script>
initSqlJs({
  locateFile: file => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.6.2/${file}`
}).then(SQL => {
  const db = new SQL.Database();
  document.body.innerText = JSON.stringify(db.exec("SELECT sqlite_version();"));
});
    </script>
  </body>
</html>

こんな感じでindex.htmlを書けばSQLiteのVersionを表示できるので、誰でも簡単にWebAssemblyを始めることができます。

おわり。
Viteの勉強はつづく。

Discussion