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();

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱