Program Style for
TypeScript/JavaScript

プログラム・スタイルへ戻る
TypeScript/JavaScriptへ戻る
localForageを使って、ウェブアプリにDBを作る
localForageを使って、ウェブアプリのデータをDBに保管する。
localForageでアプリにDB
localForageを使って、ウェブアプリにDBを作る短いプログラムサンプル。

localForage

ウェブサイトやウェブアプリでデータを保管する方法は、よく知られたものではクッキーがあるがサイズなどで制限が厳しい。そこで、よりデータを大量に保管するには、IndexedDB、WebSQL、LocalStorage などを使う方法がある。

そして、これらを簡単に使うためのモジュールとして、localForageというものがある。 今回は、このlocalForageを使って簡単にデータの保管・取り出しを行うためのサンプルプログラムを紹介する。

例によって、サンプルプログラムは最適なものかどうかは保証しないので、参考程度にしていただきたい・・・。

localForageの取得

まず、以下の場所からlocalForageのモジュールを取得。

GITHUB https://localforage.github.io/localForage/からlocalforage.min.jsをダウンロード。

ファイル構成

サンプルのファイル構成は以下の通り。

+--+index.htm
   |
   +JS/localfoage.min.js
    JS/tsastyle_lfdb.js

サンプルページはこちらへ。

tsastyle_lfdb.jsはTypeScriptのソース（tsastyle_lsdb.ts）をコンパイルしたもの。

tsastyle_lfdb.jsがなくても、localForageだけで処理しても問題ないが、少しだけ使いやすくするための小さなライブラリファイルである。

ソース

以下のソース（index.htm,tsastyle_lfdb.ts(.js)）は、myname,hisname,hernameという３つの名前を保存すると言う簡単なプログラム。

下に解説がありますので御覧ください。

index.htm


<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>

    <script src="js/localforage.min.js"></script>
    <script src="js/tsastyle_lfdb.js"></script>

</head>

<body>
<h1>Test</h1>
<p>My name is <input type="text" id="id_myname"></input>. <button id="btn_myname">Change and Save/button></p>
<p>His name is <input type="text" id="id_hisname"></input>. <button id="btn_hisname">Change and Save</button></p>
<p>Her name is <input type="text" id="id_hername"></input>. <button id="btn_hername">Change and Save</button></p>


<script>
    var lfdb=new tsastyle.lfdb("test");

    function SetName(a_Key,a_Name,a_Option){
        document.getElementById("id_"+a_Key).value=a_Name;
    }
    lfdb.LoadItem("myname",SetName);
    lfdb.LoadItem("hisname",SetName);
    lfdb.LoadItem("hername",SetName);

    document.getElementById("btn_myname").onclick = function(){
        lfdb.SaveItem("myname",document.getElementById("id_myname").value);
    }
    document.getElementById("btn_hisname").onclick = function(){
        lfdb.SaveItem("hisname",document.getElementById("id_hisname").value);
    }
    document.getElementById("btn_hername").onclick = function(){
        lfdb.SaveItem("hername",document.getElementById("id_hername").value);
    }
</script>

</body>

</html>

tsastyle_lfdb.ts

namespace tsastyle {
    export class lfdb {
        public lfDB;

        public constructor(a_Name){
            this.lfDB = localforage.createInstance({
                name: a_Name,
            });
        }
        public SaveItem=async function(a_Key,a_Val){
            await this.lfDB.setItem(a_Key,a_Val);
        }
        public LoadItem=async function(a_Key,a_Func,a_Option){
            try {
                await this.lfDB.getItem(a_Key).then(function (value) {
                    a_Func(a_Key,value,a_Option);
                    })
                    .catch(function (err) {
                        console.log(err);
                    });
            } catch (err) {
                // This code runs if there were any errors.
                console.log(err);
            }
        }
        public LoadItemE = async function (a_Key, a_Func, a_FuncE, a_Option) {
            try {
                await this.lfDB.getItem(a_Key).then(function (value) {
                    if (value != null)
                        a_Func(a_Key, value, a_Option);
                })
                    .catch(function (err) {
                        a_FuncE(a_Key, 1, err, a_Option);
                    });
            } catch (err) {
                // This code runs if there were any errors.
                a_FuncE(a_Key, 2, err, a_Option);
            }
        }
    }
}

上記のTypeScriptファイルをコンパイルしたものが以下(Javascriptファイル。target=es5でコンパイル。）。

tsastyle_lfdb.js

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
var tsastyle;
(function (tsastyle) {
    var lfdb = /** @class */ (function () {
        function lfdb(a_Name) {
            this.SaveItem = function (a_Key, a_Val) {
                return __awaiter(this, void 0, void 0, function () {
                    return __generator(this, function (_a) {
                        switch (_a.label) {
                            case 0: return [4 /*yield*/, this.lfDB.setItem(a_Key, a_Val)];
                            case 1:
                                _a.sent();
                                return [2 /*return*/];
                        }
                    });
                });
            };
            this.LoadItem = function (a_Key, a_Func, a_Option) {
                return __awaiter(this, void 0, void 0, function () {
                    var err_1;
                    return __generator(this, function (_a) {
                        switch (_a.label) {
                            case 0:
                                _a.trys.push([0, 2, , 3]);
                                return [4 /*yield*/, this.lfDB.getItem(a_Key).then(function (value) {
                                        a_Func(a_Key, value, a_Option);
                                    })
                                        .catch(function (err) {
                                        console.log(err);
                                    })];
                            case 1:
                                _a.sent();
                                return [3 /*break*/, 3];
                            case 2:
                                err_1 = _a.sent();
                                // This code runs if there were any errors.
                                console.log(err_1);
                                return [3 /*break*/, 3];
                            case 3: return [2 /*return*/];
                        }
                    });
                });
            };
            this.LoadItemE = function (a_Key, a_Func, a_FuncE, a_Option) {
                return __awaiter(this, void 0, void 0, function () {
                    var err_2;
                    return __generator(this, function (_a) {
                        switch (_a.label) {
                            case 0:
                                _a.trys.push([0, 2, , 3]);
                                return [4 /*yield*/, this.lfDB.getItem(a_Key).then(function (value) {
                                        if (value != null)
                                            a_Func(a_Key, value, a_Option);
                                    })
                                        .catch(function (err) {
                                        a_FuncE(a_Key, 1, err, a_Option);
                                    })];
                            case 1:
                                _a.sent();
                                return [3 /*break*/, 3];
                            case 2:
                                err_2 = _a.sent();
                                // This code runs if there were any errors.
                                a_FuncE(a_Key, 2, err_2, a_Option);
                                return [3 /*break*/, 3];
                            case 3: return [2 /*return*/];
                        }
                    });
                });
            };
            this.lfDB = localforage.createInstance({
                name: a_Name,
            });
        }
        return lfdb;
    }());
    tsastyle.lfdb = lfdb;
})(tsastyle || (tsastyle = {}));
//# sourceMappingURL=tsastyle_lfdb.js.map

解説

index.htm

ファイル読み込み

以下の２行でjsファイルを読み込む。

<script src="js/localforage.min.js"></script>
<script src="js/tsastyle_lfdb.js"></script>

データの表示・更新

以下の３行はデータベース内の名前データを表示する部分である。しかし、１回目に表示したときには名前部分が表示されない。

しかし、２回目以降はDBから名前を読み込んでくるので表示される。

また、新しい名前を入れて「変更」を押すと、データベースが更新される。

<p>My name is <input type="text" id="id_myname"></input>. <button id="btn_myname">変更</button></p>
<p>His name is <input type="text" id="id_hisname"></input>. <button id="btn_hisname">変更</button></p>
<p>Her name is <input type="text" id="id_hername"></input>. <button id="btn_hername">変更</button></p>

Script

データベース呼び出し

データベースにアクセスするために、変数にデータベースをセット。データベースがない場合には作成。

データベース名は何でもよい。

var lfdb=new tsastyle.lfdb("test");

コールバック関数

以下のSetName関数は、後で紹介する呼び出し関数LoadItem()のコールバック関数。呼び出しは非同期なのでコールバックが必要である。

データベースはkey=valueというタイプのデータ形式であり、LoadItem()のコールバック関数は、 key,データベースからとってきたvalue,最初に与えたOptionの３つの引数を取る。 

function SetName(a_Key,a_Name,a_Option){
	document.getElementById("id_"+a_Key).innerHTML=a_Name;
}

データ呼び出し

以下の3行は、データベースから"myname","hisname","hername"のデータを取り出して表示する関数。

実際のデータのセットは前述のSetName()関数によって行われている。

lfdb.LoadItem("myname",SetName);
lfdb.LoadItem("hisname",SetName);
lfdb.LoadItem("hername",SetName);

LoadItem関数はTypeScriptの定義では次のようになっている。(Javascriptでも引数は同じ）

public LoadItem=async function(a_Key,a_Func,a_Option){}

引数は次の3つ。

引数名内容必須
a_Keyデータベースのキー名必須
a_Funcコールバック関数必須
a_Optionオプション引数なくてもよい

コールバック関数には、キー名とデータベースからとってきたキーに対応する値、そしてオプション引数がそのまま渡される。

コールバック関数側では、どれを利用しても（または、しなくても）よい。キーやオプションは識別のために利用してもよい。

データ保存

以下はサンプルの中でデータ保存をしている部分。「Change and Save」ボタンを押すとデータを変更して保存する。

document.getElementById("btn_myname").onclick = function(){
    lfdb.SaveItem("myname",document.getElementById("id_myname").value);
}

実際にデータを保存するのはSaveItemであり、TypeScriptの定義は次のようになっている。 

public SaveItem=async function(a_Key,a_Val){}

引数は、キーと値であり、コールバック関数は不要である。

引数名内容必須
a_Keyデータベースのキー名必須
a_Val保存する値必須

付録

エラー処理付きのデータ呼び出し関数

LoadItemを呼び出したときにエラーが発生した場合、詳細な情報を受け取り、処理を行うコールバック関数を設定できる関数が次のLoadItemEである。

public LoadItemE = async function (a_Key, a_Func, a_FuncE, a_Option) {}

コールバック関数として、通常のコールバック関数(LoadItemと同じコールバック関数＝a_Func)と、エラー用のコールバック関数(a_FuncE)を指定できる。

エラー用のコールバック関数では、（キー名、エラー番号、エラー情報、オプション）という４つの引数を取る。

引数内容
エラー番号エラーの種類。１＝データ取得時。２＝それ以外。
エラー情報システムのエラーメッセージ
© copyright prog.TSAStyle.com