dexiejs

1. Dexie.js
@4245Ryomt

2. IAM
鈴木
大学生
@4245Ryomt

3. Dexie.js

4. こんな人へ
ブラウザ等閉じても状態が消えないようにしたい！
簡単に！

5. Dexie.js
A Minimalistic Wrapper for indexedDB
‑> indexedDBのラッパーライブラリ
http://dexie.org/

6. IndexedDB
ファイルやblobを含む構造化された多くのデータを保存するAPI
オブジェクト指向データベース
構造家された多くのデータを保存するのに有用
DOM Storage ‑> 少量データの保存に有用
https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API

7. IndexedDB
主観
つかうのが割と難しい
コネクション...トランザクション...
カーソル？？
もっと簡単に使いたい
客観
非同期をコールバックで扱うので辛い
Promiseで扱いたい

8. Dexie.js
わかりやすいAPI
使うのは簡単
非同期はPromise

9. どんだけ簡単なんだ

10. データベースの定義
IndexedDB
let db = null;
let dbOpenRequest = window.indexedDB.open(databaseName, version);
dbOpenRequest.onsuccess = (event) => {
db = event.target.result;
};
dbOpenRequest.onupgradeneeded = (event) => {
const db = event.target.result;
const objectStore =
db.createObjectStore('todos', { keyPath: 'id' });
objectStore.createIndex('text', 'text', { unique: false });
};

11. データベースの定義
Dexie.js
const db = new Dexie(databaseName);
const version = 2;
db.version(version).stores({
todos: 'id,text'
});

12. クエリー操作
IndexedDB
const sayEqualRange = IDBKeyRange.only("say");
const todoStore = db.transaction("todos").objectStore("todos");
const textIndex = todoStore.index("text");
textIndex.openCursor(sayEqualRange).onsuccess = event => {
const cursor = event.target.result;
if (cursor) {
console.log(cursor.value)
cursor.continue();
}
};

13. クエリー操作
Dexie.js
db.todos.where("text")
.equals("say")
.forEach(todos => console.log(todos))

14. いい感じ！
わかりやすいAPIドキュメント
https://github.com/dfahlander/Dexie.js/wiki
TypeScriptならこんな感じで書けるぜ！なドキュメント
https://github.com/dfahlander/Dexie.js/wiki/Typescript

15. Dexie.js