Dexie.jsで始めるIndexedDB

Dexie.jsとは

Dexie.jsは、IndexedDBのラッパーライブラリであり、JavaScriptでデータベースを簡単に扱えるようにするためのツールです。

IndexedDBとは

Web Storageの一種であり、JavaScriptでデータベースを扱うことができます。オブジェクト指向データベース(OODB)で、JavaScriptで表現可能なオブジェクト（論理値、数値、文字列、date、オブジェクト、配列、正規表現、undefined、null）や画像データなども保存できてしまいます。

5MBくらいまでであれば localStorage や sessionStorage のような WEB Storage API を使うことで実装できますが、大量のデータを扱うのには不向きです。そこで、大量のデータをブラウザ上で扱えるように IndexedDB という仕組みを作りました。ただ、IndexedDBのAPIは使いにくく複雑なため、Dexie.jsが開発されています。

Dexie.jsのユースケース

Dexie.jsは、Webアプリに最適なツールです。クライアント側で大量のデータを扱う場合や、オフラインでもアプリが動作させたい場合にDexie.jsを活用します。例えば、カレンダーアプリでイベントを追加する場合や、タスク管理アプリでタスクを追加する場合などです。

Dexie.jsの特徴

IndexedDBのAPIをより簡単に扱えます。また、Promiseベースなので、非同期処理を扱えます。ただ、IndexedDB に依存しているため、IndexedDBの仕様に則って動作させます。

記述

例えばタスク管理アプリを作成する場合、Dexie.jsを使用してデータベースを作成することもできます。以下は、Dexie.jsを使用してタスクデータを格納するオブジェクトストアを作成する方法です。

import Dexie from 'dexie';

// DBを作成
const db = new Dexie('TaskDatabase');

// ストアを定義
db.version(1).stores({
  tasks: '++id,name,completed'
});

// タスクを追加する関数
const addTask = async (task) => {
  try {
    await db.tasks.add(task);
  } catch (error) {
    console.log(error);
  }
};

// タスクを取得する関数
const getTasks = async () => {
  try {
    const tasks = await db.tasks.toArray();
    return tasks;
  } catch (error) {
    console.log(error);
  }
};

// タスクを更新する関数
const updateTask = async (task) => {
  try {
    await db.tasks.update(task.id, task);
  } catch (error) {
    console.log(error);
  }
};

// タスクを削除する関数
const deleteTask = async (taskId) => {
  try {
    await db.tasks.delete(taskId);
  } catch (error) {
    console.log(error);
  }
};

まずはDexieオブジェクトを作成し、タスクを格納するためのオブジェクトストアを定義しています。その後、タスクを追加・取得・更新・削除する関数を定義しています。

※ストアはテーブルのようなものです。

++id	オートインクリメントな主キー
name	タスク名を格納するためのフィールド
completed	タスク完了状況を示すブール値

データ追加(add/bulkAdd)

db.notes.add({
  title: "タイトル",
  body: '本文',
  tags: ["IndexedDB", "Dexie.js"],
  updated_at: new Date()
});

データ更新(update)

let id = 2;

db.notes.update(id, {
  body: '本文を更新',
  updated_at: new Date()
});

データ追加/更新(put/bulkPut)

db.notes.put({
  id: 2,
  title: "タイトル",
  body: '本文',
  updated_at: new Date()
});

データ全件取得

db.notes
    .toArray()
    .then(function (notes) {
      console.log(notes);
    });

データ削除(delete/bulkDelete)

let id = 1;
db.notes.delete(id);

参考