716 views

はじめに

HTML5で、javascirptからDBにアクセスできるようになった。
リレーショナルデータベースとNOSQLの2種類が扱えるが、リレーショナルデータベースは、非推奨。
よって、事実上NOSQLだけ扱える、と現時点では考えたほうが良い。
昔はjavascirptでローカルファイルにアクセスするのはNGというのが基本スタンスだったが、だいぶ変わった。
使えるサイズに上限があるものの、ローカルにアクセスできるのは大きい。
NOSQLで扱えるデータの容量は端末によって変わるとのこと。
別のサイトで実験されていた内容としてはwindowsでは12GB、android端末では約600MBとあり、ちょっとしたデータであれば十分なサイズである。
使いどころとしては、特にスマートフォンにおいてではあるが、通信できない状況下で一時的なデータの保存先として活用できそう。

チュートリアル

まずは、DBの基本操作についてまとめる。

サポートしているかどうかを確認する

javascirptにて、次のコードを実行してアラートが表示されなければローカルDBを使用できる。

    if (!window.indexedDB) {
        window.alert("このブラウザーは安定版の IndexedDB をサポートしていません。IndexedDB の機能は利用できません。");
    }

オープンと読み書き

DBをオープンして、DB作成時にレコードを追加し、作成したレコードから検索を行うサンプルプログラム。

window.onload = main();

function main() {
    const dbName = "sampleDB";
    const version = 1;
    const storeName = "sampleStore";
    const customerData = [
        { tel: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
        { tel: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
    ];

    if (!window.indexedDB) {
        window.alert("このブラウザーは安定版の IndexedDB をサポートしていません。IndexedDB の機能は利用できません。");
    }

    //DBをオープンする
    var request = indexedDB.open(dbName, version);
    //DBのオープンに失敗した場合
    request.onerror = function(event) {
        alert("オープンに失敗しました");
        return;
    }

    //DBのバージョンが変わった場合
    request.onupgradeneeded = function(event) {
        var db = event.target.result;
        //新しいDB絵を作成したり、既存のデータベースのバージョンを更新したりすると呼ばれる
        //初回実行時も呼ばれる。
        console.log("DBのアップデートを行います");
        try{
            //keyPathは主キー、autoIncrementは自動採番の意味。
            //var objectStore = db.createObjectStore(storeName);
            //var objectStore = db.createObjectStore(storeName, {autoIncrement:true});
            var objectStore = db.createObjectStore(storeName, {keyPath: "tel"});
            //以降ではスキーマの定義や変更をここで行うのが良い
            //以下では初期値となるレコードを書き込む
            // 顧客を名前で検索するためのインデックスを作成します。
            // 重複する可能性がありますので、一意のインデックスとしては使用できません。
            objectStore.createIndex("name", "name", { unique: false });

            // 顧客をメールアドレスで検索するためのインデックスを作成します。2 人の顧客が同じメールアドレスを
            // 使用しないようにしたいので、一意のインデックスを使用します。
            objectStore.createIndex("email", "email", { unique: true });
            for (var i in customerData) {
                var transaction = objectStore.add(customerData[i]);
                transaction.onsuccess = function(event) {
                    console.log("レコードを追加しました");
                };
                transaction.onerror = function(event) {
                    console.log("書き込みでエラーが発生しました");
                    console.log(event);
                }
            }
        }
        catch(e) {
            console.log("onupgradeneededで例外が発生しました");
            console.log(e);
        }
    }

    //DBのオープンに成功した場合
    request.onsuccess = function(event) {
        //開けた場合 初回実行時も呼ばれる
        console.log("オープンに成功しました");
        var db = event.target.result;
        var transaction = db.transaction([storeName]);
        var objectStore = transaction.objectStore(storeName);
        var request = objectStore.get("444-44-4444");
        request.onerror = function(event) {
            console.log("読み取りに失敗しました");
        }
        request.onsuccess = function(event) {
            console.log(request.result.name);
        }
    }
}

解説
17行目でDBをオープン。
19行目でオープンに失敗した場合のコールバック関数を登録。
25行目でDBを新規作成する、またはDBのバージョンを更新したりした場合のコールバック関数をonupgradneededに追加。
34行目でストア(MongoSQLならコレクション)を作成している。
39行目、43行目は検索を速くするためのindexを作成している。
44行目でレコードを1件ずつ追加している。
追加するたびに、成功したかどうかの関数コールバックを46行目、49行目に登録している。

62行目は17行目で実行したopenが成功した場合。
66行目でtransactionを取得し、ストアを67行目で取得。
68行目で検索を行っている。
68行目の検索が失敗した場合は69行目のonerror関数がコールバックされる。
72行目は検索が成功した場合にコールバックされる。
読み取った値はrequest.result.XXXでアクセスする。
XXXとは、8,9行目で作成したデータのキー名を指定する。

なお、検索したDBの中身は以下である。