\

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です🙆‍♀️🙆‍♂️

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

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

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

1
var db = new Dexie("NoteDataBase");

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

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

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

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

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

4. レコード作成・更新

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

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

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

5. 全件取得

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

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

6. レコード検索

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

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

7. ソート・並び替え

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

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

8. レコード削除

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

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

1
2
3
4
5
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や個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱