<h2 data-sourcepos="1:1-1:17">
<a></a>Dexie.jsとは</h2>
Dexie.jsは、IndexedDBのラッパーライブラリであり、JavaScriptでデータベースを簡単に扱えるようにするためのツールです。
<h2 data-sourcepos="4:1-4:18">
<a></a>IndexedDBとは</h2>
Web Storageの一種であり、JavaScriptでデータベースを扱うことができます。オブジェクト指向データベース(OODB)で、JavaScriptで表現可能なオブジェクト（論理値、数値、文字列、date、オブジェクト、配列、正規表現、undefined、null）や画像データなども保存できてしまいます。
5MBくらいまでであれば localStorage や sessionStorage のような WEB Storage API を使うことで実装できますが、大量のデータを扱うのには不向きです。そこで、大量のデータをブラウザ上で扱えるように IndexedDB という仕組みを作りました。ただ、IndexedDBのAPIは使いにくく複雑なため、Dexie.jsが開発されています。
<h2 data-sourcepos="9:1-9:32">
<a></a>Dexie.jsのユースケース</h2>
Dexie.jsは、Webアプリに最適なツールです。クライアント側で大量のデータを扱う場合や、オフラインでもアプリが動作させたい場合にDexie.jsを活用します。例えば、カレンダーアプリでイベントを追加する場合や、タスク管理アプリでタスクを追加する場合などです。
<h2 data-sourcepos="12:1-12:20">
<a></a>Dexie.jsの特徴</h2>
IndexedDBのAPIをより簡単に扱えます。また、Promiseベースなので、非同期処理を扱えます。ただ、IndexedDB に依存しているため、IndexedDBの仕様に則って動作させます。
<h2 data-sourcepos="15:1-15:9">
<a></a>記述</h2>
例えばタスク管理アプリを作成する場合、Dexie.jsを使用してデータベースを作成することもできます。以下は、Dexie.jsを使用してタスクデータを格納するオブジェクトストアを作成する方法です。
<div data-lang="js" data-sourcepos="17:1-64:3"><div><pre><code>import Dexie from 'dexie';

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

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

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

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

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

// タスクを削除する関数
const deleteTask = async (taskId) =&gt; {
 try {
 await db.tasks.delete(taskId);
 } catch (error) {
 console.log(error);
 }
};
</code></pre></div></div>
まずはDexieオブジェクトを作成し、タスクを格納するためのオブジェクトストアを定義しています。その後、タスクを追加・取得・更新・削除する関数を定義しています。
※ストアはテーブルのようなものです。
<table data-sourcepos="69:1-72:54">
<thead>
<tr data-sourcepos="69:1-69:56">
<th data-sourcepos="69:2-69:9">++id</th>
<th data-sourcepos="69:11-69:55">オートインクリメントな主キー</th>
</tr>
</thead>
<tbody>
<tr data-sourcepos="71:1-71:67">
<td data-sourcepos="71:2-71:7">name</td>
<td data-sourcepos="71:9-71:66">タスク名を格納するためのフィールド</td>
</tr>
<tr data-sourcepos="72:1-72:54">
<td data-sourcepos="72:2-72:10">completed</td>
<td data-sourcepos="72:12-72:53">タスク完了状況を示すブール値</td>
</tr>
</tbody>
</table>
<h4 data-sourcepos="74:1-74:33">
<a></a>データ追加(add/bulkAdd)</h4>
<div data-lang="js" data-sourcepos="75:1-82:3"><div><pre><code>db.notes.add({
 title: "タイトル",
 body: '本文',
 tags: ["IndexedDB", "Dexie.js"],
 updated_at: new Date()
});
</code></pre></div></div>
<h4 data-sourcepos="84:1-84:28">
<a></a>データ更新(update)</h4>
<div data-lang="js" data-sourcepos="85:1-92:3"><div><pre><code>let id = 2;

db.notes.update(id, {
 body: '本文を更新',
 updated_at: new Date()
});
</code></pre></div></div>
<h4 data-sourcepos="94:1-94:40">
<a></a>データ追加/更新(put/bulkPut)</h4>
<div data-lang="js" data-sourcepos="95:1-102:3"><div><pre><code>db.notes.put({
 id: 2,
 title: "タイトル",
 body: '本文',
 updated_at: new Date()
});
</code></pre></div></div>
<h4 data-sourcepos="104:1-104:26">
<a></a>データ全件取得</h4>
<div data-lang="js" data-sourcepos="105:1-111:3"><div><pre><code>db.notes
 .toArray()
 .then(function (notes) {
 console.log(notes);
 });
</code></pre></div></div>
<h4 data-sourcepos="113:1-113:39">
<a></a>データ削除(delete/bulkDelete)</h4>
<div data-lang="js" data-sourcepos="114:1-117:3"><div><pre><code>let id = 1;
db.notes.delete(id);
</code></pre></div></div>
<h3 data-sourcepos="120:1-120:10">
<a></a>参考</h3>
<iframe frameborder="0" scrolling="no" height="29">
</iframe>

JavaScriptでデータベースを簡単に扱えるようにするためのツール

Webサイトのデザインを簡単にするためのツール

サーバーサイドのデータベースを管理するためのツール

リアルタイムデータ処理のためのライブラリ

JavaScriptで表現可能なオブジェクトや画像データなど

クライアント側で大量のデータを扱う場合やオフラインでの動作

サーバーサイドのデータベースの管理

ユーザーインターフェースのデザイン

Promiseベースで非同期処理を扱える

SQLを使用してデータを管理する

データの暗号化が自動で行われる

タスクの追加、取得、更新、削除が可能

タスクの優先順位を設定することができる

タスクの期限を設定することができる