Dexie.jsはIndexedDBを超シンプルに扱えるミニマリストのためのライブラリ

ミニマリスト()にオススメのIndexedDBラッパー[Dexie.js](http://dexie.org/)を紹介します。 ブラウザアプリを作るときの永続化先としてIndexedDBを使うことが多いと思いますが、IndexedDBは少しIFが複雑なのがネック。 それをシンプルにしてくれるのが今回紹介するDexie.jsです。Dexie.jsは複雑なIndexedDBのIFを薄く包み込んで簡潔にしてくれます。 以下にDexie.jsのザックリとした使い方を載せました。 (ほとんど[Quick Reference](https://github.com/dfahlander/Dexie.js/wiki/API-Reference#quick-reference)の翻訳です) - [Dexie.jsのロード](#loaddexiejs) - [DB定義](#declare) - [DBのアップグレード](#upgrade) - [レコードの追加](#additem) - [レコードの更新](#updateitem) - [レコードの削除](#deleteitem) - [レコードの取得](#queryitem) - [トランザクション処理](#transaction) - [参考](#refs) ## Dexie.jsのロード インストールはこの一行だけでOK: ```html <script src="https://unpkg.com/dexie@latest/dist/dexie.js"></script> ``` ## DB定義 こんな感じでDBを定義します: ```javascript var db = new Dexie("MyDatabase"); db.version(1).stores({ friends: "++id, name, age, *tags", gameSessions: "id, score" }); ``` `friends: "++id, name, age, *tags"` な行の記号の意味: | 記号 | 意味 | |:--:|:--:| | ++ | Auto-incrementedな主キー | | & | ユニークキー | | * | 複数可なキー | | [A+B] | 複合Index | ## DBのアップグレード DBをマイグレーションするときは: ```javascript // バージョン1を定義 db.version(1).stores({ friends: "++id,name,age,*tags", gameSessions: "id,score" }); // バージョン2にアップグレード db.version(2).stores({ friends: "++id, [firstName+lastName], yearOfBirth, *tags", // Change indexes gameSessions: null // Delete table }).upgrade(function () { // Will only be executed if a version below 2 was installed. return db.friends.modify(function (friend) { friend.firstName = friend.name.split(' ')[0]; friend.lastName = friend.name.split(' ')[1]; friend.birthDate = new Date(new Date().getFullYear() - friend.age, 0); delete friend.name; delete friend.age; }); }); ``` ## レコードの追加 ```javascript // 単一レコードを追加 db.friends.add({name: "Josephine", age: 21}); // 複数レコードを追加 db.people.bulkAdd([{name: "Foo"}, {name: "Bar"}]); ``` ## レコードの更新 ```javascript // 単一レコードを更新または追加 db.friends.put({id: 4, name: "Foo", age: 33}); // 複数レコードを更新または追加 db.friends.bulkPut([ {id: 4, name: "Foo2", age: 34}, {id: 5, name: "Bar2", age: 44} ]); // 単一レコードを更新 db.friends.update(4, {name: "Bar"}); // 特定レコードを更新 db.customers .where("age") .inAnyRange([ [0, 18], [65, Infinity] ]) .modify({discount: 0.5}); ``` ## レコードの削除 ```javascript // 単一レコードを削除 db.friends.delete(4); // 複数レコードを削除 db.friends.bulkDelete([1,2,4]); Reference: WriteableTable.bulkDelete() // 特定レコードを削除 db.logEntries .where('timestamp').below(Date.now() - 100000) .delete(); ``` ## レコードの取得 ```javascript // 条件検索その1 db.friends .where("age").between(20, 25) .offset(150) .limit(25) .toArray() .then(function (friends) { // }); // 条件検索その2 db.friends .where("name").equalsIgnoreCase("josephine") .each(function(friend) { console.log("Found Josephine: " + JSON.stringify(friend)); }) .then(...); // 条件検索その3 db.friends .where("name") .startsWithAnyOfIgnoreCase(["a", "b", "c"]) .toArray() .then (function (friends) { ... }); // 条件検索してからの更新 db.friends .where('age') .inAnyRange([[0,18], [65, Infinity]]) .modify({discount: 0.5}); // 正規表現でのパターンマッチで検索 db.friends .filter(friend => /a/i.test(friend.name)) .toArray() .then(function (friendsContainingLetterA) { ... }); // db.friends .where('[firstName+lastName]') .equals(["Hillary", "Clinton"]) .first() .then(function (president) { ... }); // OR検索からの更新 db.friends .where('age').above(25) .or('shoeSize').below(8) .or('interests').anyOf('sports', 'pets', 'cars') .modify(friend => friend.tags.push("marketing-target")); ``` ## トランザクション処理 もちろんトランザクションも使えます: ```javascript // friendsとpetsコレクションを対象にRW(読み書き)モードでトランザクション開始 db.transaction('rw', db.friends, db.pets, function () { // Any database error event that occur will abort transaction and // be sent to the catch() method below. // The exact same rule if any exception is thrown what so ever. return db.pets.add({name: 'Bamse', kind: 'cat'}).then(function (petId) { return db.friends.add({name: 'Kate', age: 89, pets: [petId]}); }); }).then(function(result) { // // トランザクションがコミットされた // }).catch(function (error) { // トランザクションが失敗した（ロールバックされる） console.error (error.stack || error); }); ``` # 参考 - [Dexie.js](http://dexie.org/) - [dfahlander/Dexie.js](https://github.com/dfahlander/Dexie.js/wiki/Getting-started) - [Quick Reference](https://github.com/dfahlander/Dexie.js/wiki/API-Reference#quick-reference) # 追記 dexie.jsよりももっとシンプルなIFを望むなら [localForage](https://github.com/localForage/localForage) も良いかも。こちらのIFは localstorage とほとんど同じなので、localstorageを知っている人なら学習コストがほとんどかかりません。