こんにちは。フリーランス・コンサルタント＆エンジニアの九保すこひです。

X（Twitter）やってます！
九保すこひ＠フリーランスエンジニア｜累計300万PVのブログ運営中

さてさて、この間知ったのですが、どうやらJavaScriptでwasm（Webassembly）であることができるのを知りました。

それが・・・・・・

SQLiteを操作することができる

というものです。

つまり、wasmを使うことで「ブラウザだけでSQLite」を動かすことができるんですね。

📝 参考ページ： WebAssemblyとは？

そこで❗

なんか面白そうだったので、「Laravel + React」の環境で使ってみることにしました。

機能は「（ウェブなのに）ローカルだけで完結するブックマーク」です。（需要は度外視ですが、もしかすると秘密のブックマークなんかにも使えるかもですね👍）

ぜひ何かの参考になりましたら嬉しいです。😄✨

「TikTok で英語リスニング
トレーニング中。
海外案件狙うぞ❗（できれば円安中に…）」

1 パッケージをインストールする
2 Vite で sql-wasm.wasm がコピーできるようにする
3 ルートをつくる
4 ビューをつくる
- 4.1 DB
5 ブックマーク
- 5.1 パラメータ
- 5.2 ブックマークのエクスポート
6 テストしてみる
7 デモページを用意しました
8 企業様へのご提案
9 おわりに

パッケージをインストールする

では、今回の機能で利用するパッケージ２つをインストールしておきましょう。
以下のコマンドを実行してください。

npm i sql.js vite-plugin-static-copy --save-dev

Vite で sql-wasm.wasm がコピーできるようにする

パッケージがインストールできたら、次にwasmファイルがインターネット上からアクセスできるようにファイルをコピーできるようにします。

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import { viteStaticCopy } from 'vite-plugin-static-copy' // 👈 ここを追加しました

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            ssr: 'resources/js/ssr.jsx',
            refresh: true,
        }),
        react(),
        viteStaticCopy({ // 👈 ここを追加しました
            targets: [
                {
                    src: 'node_modules/sql.js/dist/sql-wasm.wasm',
                    dest: 'wasm'
                }
            ]
        })
    ]

    // 省略

});

これでsql.jsの中にあるsql-wasm.wasmがビルドする度にコピーされる（＝つまり、パッケージにアップデートがあっても自動で新しいものに置き換わる）ということになります 👍

では、早速以下のコマンドでファイルをコピーしてみましょう。

npm run build

すると、以下のようにファイルがコピーされますので、「http://*******/build/wasm/sql-wasm.wasm」でアクセスできるようになります。

ルートをつくる

では、準備は完了しましたので、ここからはコードを書いていきます❗

まずはルートです。

routes/web.php

// 省略

Route::get('wasm_sqlite_bookmark', fn() => Inertia::render('WasmSqliteBookmark/Index'));

ビューをつくる

では、今回のメインどころのビューです。
ちょっとコードが長いですが、そこまで複雑な部分はないのでぜひ順に見てください。

resources/js/Pages/WasmSqliteBookmark/Index.jsx

import initSqlJs from 'sql.js'
import {useEffect, useRef, useState} from "react";

export default function Index() {

    // DB
    const db = useRef(null);
    useEffect(() => {

        initializeDb();

    }, []);
    const initializeDb = (data = null) => {

        // Wasm の指定
        const config = {
            locateFile() {

                return  '/build/wasm/sql-wasm.wasm'

            }
        }

        // SQLite を初期化
        initSqlJs(config)
            .then(SQL => {

                db.current = new SQL.Database(data);

                if(! data) { // 初期の場合はテーブルを作成

                    const sql = `CREATE TABLE bookmarks (
                                    id INTEGER PRIMARY KEY AUTOINCREMENT,
                                    title varchar(255) NOT NULL,
                                    url varchar(255) NOT NULL,
                                    created_at datetime NOT NULL
                                );`
                    db.current.run(sql);

                }

                loadBookmarks();

            });

    };

    // ブックマーク
    const [bookmarks, setBookmarks] = useState([]);
    const handleFileSelected = e => { // ファイルが選択されたとき

        const files = e.target.files;

        if(files.length > 0) {

            const file = files[0];
            const reader = new FileReader();
            reader.onload = () => {

                const data = new Uint8Array(reader.result); // ファイルを読み込んでデータ化
                initializeDb(data); // DB を初期化

            }
            reader.readAsArrayBuffer(file);

        }

    };
    const loadBookmarks = () => { // SQLite からブックマークを読み込む

        let newBookmarks = [];
        const stmt = db.current.prepare('SELECT id, title, url, created_at FROM bookmarks;');
        stmt.getAsObject();

        while(stmt.step()) {

            const row = stmt.getAsObject();
            newBookmarks.push(row);

        }

        setBookmarks(newBookmarks);
    };

    // パラメータ
    const [title, setTitle] = useState('');
    const [url, setUrl] = useState('');
    const handleSaveBookmarkClick = () => {

        // バリデーションは省略してます

        const sql = `INSERT INTO
                        bookmarks (title, url, created_at)
                        VALUES (?, ?, datetime('now'));`;
        const params = [title, url];
        db.current.run(sql, params);

        // パラメータを初期化
        setTitle('');
        setUrl('');

        loadBookmarks();

    };

    // ブックマークのエクスポート
    const handleDownloadClick = () => {

        const data = db.current.export();
        const blob = new Blob([data], {
            type: 'application/octet-stream'
        });
        const downloadUrl = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        const dateTime = new Date().toLocaleString().replace(/:/g, '-');
        const filename = `bookmark_${dateTime}.sqlite`;

        // ダウンロード
        link.href = downloadUrl;
        link.download = filename;
        document.body.appendChild(link);
        link.style = 'display:none';
        link.click();
        link.remove();

        setTimeout(() => {

            return window.URL.revokeObjectURL(downloadUrl); // メモリ解放

        }, 1000);

    };

    return (
        <div className="p-5">
            <div className="mb-3">
                <button type="button" className="text-white bg-blue-700 font-medium rounded text-sm px-3 py-2.5 mr-2 mb-2" onClick={handleDownloadClick}>
                    ブックマーク（SQLite）をダウンロード
                </button>
                <label className="text-white bg-gray-700 font-medium rounded text-sm px-3 py-2.5 mr-2 mb-2 cursor-pointer">
                    <input
                        type="file"
                        className="hidden"
                        onChange={handleFileSelected} />
                    ファイルからブックマークを読み込む
                </label>
            </div>
            <hr />
            <div className="px-3 py-5">
                {bookmarks.length > 0 && (
                    bookmarks.map(bookmark => (
                        <div key={bookmark.id} className="mb-3">
                            &#x1F4DD; <a href={bookmark.url} className="text-blue-700 font-medium font-bold" target="_blank">{bookmark.title}</a>
                        </div>
                    ))
                ) || (
                bookmarks.length === 0 && (
                    <small>ブックマークが見つかりません。以下から追加してください。</small>
                ))}
            </div>
            <div className="border border-1 bg-gray-200 p-3">
                <small>ブックマークを追加する</small>
                <div className="mb-3">
                    <input type="text" value={title} onChange={e => setTitle(e.target.value)} placeholder="タイトル" />
                </div>
                <div className="mb-3">
                    <input type="text" value={url} onChange={e => setUrl(e.target.value)} placeholder="URL" />
                </div>
                <button
                    type="button"
                    className="text-white bg-orange-500 font-medium rounded text-sm px-2 py-1.5 mr-2 mb-2"
                    onClick={handleSaveBookmarkClick}>
                    追加する
                </button>
            </div>
        </div>
    );

}