JavaScriptでデータベースを使う方法

　ウェブアプリやウェブシステムを作っていると，データベースが使いたいことがよくあります．PHPやPythonなどデータベースを簡単に接続できる言語が動く環境なら良いですが，それらの言語が使えない恵まれないサーバー環境の場合，JavaScriptだけでデータベースを動かしたくなります．今回はJavaScriptからデータベースを動かす方法をご紹介します．
　１．「sql.js」
　「sql.js」は，JavaScriptからSQLiteに接続できる画期的なモジュールです．使い方も簡単．HTMLにscriptタグでライブラリを読み込み，JavaScriptで接続コードやSQL文を書いていけます．SQLiteは1ファイルで動くデータベースです．このモジュールによって簡単な軽量アプリなら無事に作れます．

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sql.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.1.0/dist/sql-wasm.js"></script>
    <script>
        config = {
            locateFile: filename => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.1.0/dist/${filename}`
        }
    
        initSqlJs(config).then(function(SQL){
            var db = new SQL.Database();
            db.run("CREATE TABLE hello (id, '挨拶');");
            db.run("INSERT INTO hello VALUES (?,?), (?,?)", [1, 'Good Afternoon', 2, 'Guten Tag']);

            //  準備
            var stmt = db.prepare("SELECT * FROM hello WHERE id BETWEEN $start AND $end");
            stmt.getAsObject({$start:1, $end:1});

            //  結束
            stmt.bind({$start:1, $end:2});

            while(stmt.step()) {
                var row = stmt.getAsObject();
                var json = JSON.stringify(row);

                //  ブラウザのコンソールに表示
                console.log('コンソールにも表示: ' + json);

                //  画面に表示
                var ele = document.createElement('p');
                ele.innerHTML = json;
                document.body.insertBefore(ele, pd);
            }
        });
    </script>
</head>
<body>
    <p id="pd"></p>
</body>
</html>

　２．「PouchDB」
　「PouchDB」は，JavaScriptで作られたデータベースです．使い方も簡単．すっきりしたコードで接続もCRUDも容易で，現在のところ無料で利用できます．RDBMSではない「Apache CouchDB」をもとに考えられたものですが，ウェブアプリくらいの用途ならRDBMSにこだわる場面は減ってきていますよね．
　３．「indexeddb」
「indexeddb」は，HTML5の標準のデータベースで，どのブラウザでも動きます．JavaScriptで書きます．HTML5ではウェブストレージの仕様を策定するなかで，ブラウザデータベースに苦心してきました．indexeddbはその中で生き残った便利なデータベースです．文法は少しややこしいので，簡単に書けるようにしてくれるライブラリ，その中では「Dexie.js」がおすすめです．

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://unpkg.com/dexie@latest/dist/dexie.js"></script>
        <script>
        var db = new Dexie("Favorites");

        db.version(1).stores({
            noodles: "++id, name, times, *tags"
        });

        db.noodles.add({ name: "うどん", times: 1, isFavorite: 0 })
        .then(function () {
            return db.noodles.add({ name: "二郎", times: 3, isFavorite: 1 })
        })
        .then(function (){
            return db.noodles.where("times").above(2).each(function (noodle) {
                console.log("ブラウザのコンソールに表示: " + noodle.name);
                alert(noodle.name + 'を' + noodle.times + '回たべました。');
            });
        }).catch(function (error) {
            console.error(error);
        });
        </script>
    </head>
</html>

　世界中の技術者によって技術が早く進歩し，できなかったことができるようになっています．また時間を経ればいずれもっと画期的な技術がわんさか出てくると思います．

wbdv [web dev]

web tech diary

JavaScriptでデータベースを使う方法