dexie.js で簡単に Indexed DBを実装する方法

Indexed DBとは、クライアントサイド（ブラウザ側）に構築されているデータストアで、キーで紐づけられたデータを扱うことができます。

Local Storageに比べて、大容量のデータを扱うことができます。

この記事では、Indexed DBを簡単に実装できるDexie.js の使い方について紹介します。

1. Dexie.js とは

https://dexie.org/

Dexie.jsは Indexed DBの JavaScriptラッパーで、gzip圧縮で22KBという超軽量なライブラリです。

オープンソースであり、GitHubで公開されています。

https://github.com/dfahlander/Dexie.js

2. Dexie.js のインクルード方法

インクルード方法はとっても簡単です。

headタグの中に以下を追加するだけでOKです🙆‍♀️🙆‍♂️

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

3. データベースとストアの作成

データベースを作成するには、以下のように記述します。

var db = new Dexie("NoteDataBase");

データストアを作成するには、以下のように記述します。

db.version(1).stores({
    Note: '++id, NoteID, SavedDateTime, Title, Contents'
});

このデータストアの定義は以下になります。

• バージョン番号：1
• データストア名：Note
• キー：id （オートインクリメント）
• データ：NoteID, SavedDateTime, Title, Contents

クライアントサイドのバージョン番号が古い場合、自動的にデータストア定義が更新されます。

4. レコード作成・更新

レコードを作成・更新するには、以下のコードで実現できます。

await db.Note.put({
        NoteID: 1,
        SavedDateTime: Date.now(),
        Title: "はじめてのノート",
        Contents: "はじめてのノートです。サクサク快適にメモできます。"
    })

Noteというデータストアに対してレコードを更新しています。
キーにしていた「id」はここでは指定していません。オートインクリメントですので、自動的に採番されます。

5. 全件取得

データストアのレコードを全件取得するには以下のようにコーディングします。

let allrec = await db.Note.toArray();

6. レコード検索

whereメソッドを使用して検索することも可能です。

let NoteRecord = await db.Note
                            .where({
                                NoteID : parseInt(_NoteID),
                                SavedDateTime: parseInt(_SavedDateTime)
                            }).toArray();

7. ソート・並び替え

並び替えするには、sortByメソッドを使用します。
reverseメソッドと組み合わせると、降順ソートも可能です。

let NoteRecords = await db.Note.where('NoteID').equals(parseInt(_NoteID)).reverse().sortBy('SavedDateTime');

8. レコード削除

削除するには、deleteメソッドを使用します。

whereメソッドを使用してレコードを絞り込み、最後にdeleteメソッド呼び出してレコード削除します。

await db.Note
            .where({
                NoteID : parseInt(_NoteID),
                SavedDateTime: parseInt(_SavedDateTime)
            }).delete();