IndexedDBを利用した、Blazorコンポーネントのデータベース処理

ASP.NET Core Blazorチュートリアル 第3回

　ASP.NET Core Blazor（以下Blazor）とは、.NET環境のC#で対話型のWeb UIを構築するためのフレームワークです。Blazorには、サーバーサイドで動作するモデル（Blazor Server）と、クライアントサイドで動作するモデル（Blazor WebAssembly）が含まれますが、本連載では、主に、クライアントサイドのフレームワークであるBlazor WebAssemblyについて解説します。

対象読者

　C#とWebシステムの基礎的な知識がある方を対象とします。C#の基本文法などの解説は割愛します。

はじめに

　今回は、日記アプリの作成のつづきです。前回までに、カレンダーを表示するコンポーネントができましたので、次に、日記データの保存と、読み込む処理を追加します。

日記アプリ

　作成するアプリは次のように、カレンダー表示、テキスト入力、ボタンだけが配置されたページとなります。カレンダー部分はコンポーネントとして作成します。

日記アプリ

作成ポイント

　日記アプリの作成にあたって、次のようなポイントがあります。今回は、（4）から解説していきましょう。

1. UIコントロールとのバインディング
2. コンポーネント作成
3. コンポーネントのイベント連携　←（ここまで前回）
4. データベースからの読み込み
5. データベースへの保存

日記データへのアクセス

　日記のデータ自体は、テキストだけの仕様としていますので、ローカルのテキストファイルを参照するだけで事足ります。ただ、問題はテキストファイルを保存する方法です。ブラウザからテキストファイルを直接保存するには、どうしてもダウンロードする形となってしまい、あまりスマートではありません（バージョン86以降のChromeブラウザであれば、実装されているFile System Access APIを使うことで、ローカルファイルへのアクセスが可能です）。

　そこで、今回の日記アプリでは、IndexedDBというブラウザ標準の機能を使うことにしました。IndexedDBは、いわゆるKVS（キーバリューストア）の簡易データベースで、個々のデータと対応する一意のキーをひと組として管理します。

　なお、IndexedDB以外にも、ブラウザだけでローカルにデータを保存する機能として、Web storageやWeb SQL Databaseというものがあります。Web storageは、IndexedDBと同様キーバリュー型でデータを管理しますが、データ容量の制限がブラウザによって異なり、10MB程度しかあつかえません。またWeb SQL Databaseは、SQLiteというデータベースをブラウザ単体で使えるようにする機能で、HTML 5標準仕様として検討されていましたが、今は非推奨となっています。

IndexedDB

　IndexedDBは、JavaScriptから利用します。ただ、IndexedDBのAPIを直接あつかうのは、意外と手順が煩雑で、めんどうです。そのため今回は、Dexie.jsという、よりシンプルにIndexedDBをあつかえるJavaScriptのライブラリを利用しました。

　Dexie.jsでは、わずか数行のコードでデータの保存や参照が可能です。また、CDNも用意されていますので、scriptタグで参照するだけで利用可能です。

　index.htmlには、次のような2行を追加します。ixdb.jsは、今回作成するJavaScriptのソースファイルとなります。

［リスト1］index.html

～略～
    <script src="https://unpkg.com/dexie@latest/dist/dexie.js"></script>
    <script src="js/ixdb.js"></script>
</body>
～略～

ixdb.js

　では、JavaScriptのプログラムを作成しましょう。Dexie.jsで提供されるAPIを、使いやすいように関数にしました。JavaScriptの関数の書き方はいろいろありますが、今回はオーソドックスな方法で記述しています。

　プロジェクトのwwwrootフォルダ以下にjsフォルダを作成し、さらにその中に、ixdb.jsという名前でファイルを作成します。

［リスト2］ixdb.js

// データベースの作成①
var db = new Dexie("diarydb");

// オブジェクトストア（テーブル）の作成②
db.version(1).stores({
    diary: 'selectDay'
});

// 指定日の日記を保存する③
function putDiary(val) {
    db.diary.put(val);
}

// 指定日の日記を取得する④
function getDiary(key) {
    return db.diary.get(key);
}

// 指定範囲のキーを返す⑤
function getKeys(s,e) {
    return db.diary.where("selectDay").between(s, e).keys();
}

　MySQLなどのデータベースと同様に、まずはデータベースを作成し（①）、オブジェクトストア（いわゆるテーブル）を定義します（②）。オブジェクトストアの作成で指定するversionメソッドは、一度作成したオブジェクトストアの内容を変更したい場合などに用いるもので、その際には値を変更します。

　storesメソッドでは、diaryという名前のオブジェクトストアに、SelectDayという名前の主キーを設定しています。storesメソッドでは、キー（最初に記述すれば主キーとなります）やインデックスとなる列のみ指定します。他の列は定義不要です。なお、列名に大文字小文字の区別はありませんが、先頭を小文字にしないと、エラーになるようです。

　データの保存（③）、取得（④）は、それぞれDexie.jsのput、getメソッドを利用します。putメソッドは、キー名のプロパティを含むオブジェクトを引数に指定します。すでにキーが存在すれば、上書きする形になります。

　Dexie.jsのgetメソッドは、指定したキーの値を取得します。キーが存在しない場合は、undefinedとなります。

　最後のgetKeysメソッドは、ある範囲の日を指定して、該当するデータのキーを返す、という関数です（⑤）。

　Dexie.jsでは、SQLのwhereのように条件を設定して検索することもでき、betweenメソッドで下限と上限を指定します。デフォルトの範囲は、下限≦値<上限となります。