❯❯❯ 低コスト・低リスクでグローバル展開!
「アジア越境ECの補助金・助成金プラン」
はこちら

LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

【React】Dexie.jsでIndexedDBを使ってみました

テクニック

【React】Dexie.jsでIndexedDBを使ってみました

最近はかつてネイティブアプリでしかできなかったような複雑な作業をWEBブラウザ上で可能なWEBアプリが増えてきています。
そういった、複雑な作業を行うWEBアプリでは、ブラウザ側、つまりフロントエンドで大量のデータを扱う必要も出てきます。

多量のデータをブラウザ上で扱う場合、通信が途中で切れてしまった場合などに備えて、ブラウザにデータを保存しておき、次にアクセスしたときにそのデータを読み出して、これまでの作業を引き継ぐという動作も多く求められるようになるので、
ブラウザにどういった形でデータを保存するかということも、フロントエンド開発では工夫していく必要があります。

ある程度(5MBくらい)までであれば localStorage や sessionStorage のような WEB Storage API を使うことで簡単に実装ができますが、
大量のデータを扱うのには不向きです。

大量のデータをブラウザ上で扱えるようにした仕組みが IndexedDB です。
IndexedDB は、オブジェクト指向データベース(OODB)で、
JavaScriptで表現可能なオブジェクト(論理値、数値、文字列、date、オブジェクト、配列、正規表現、undefined、null を含む)をそのままの値で保存することができ、
画像データなどのBlobやファイルなども保存できてしまいます。

WEB Storage では、保存できるデータは文字列のみなので、それ以外のデータは文字列に変換して保存し、読み取るときにも文字列から元のデータに変換する処理が必要になりますが、IndexedDBでは、そのまま扱うことができるので、JavaScriptとの相性は抜群です。

しかしながら、IndexedDB API は そのまま扱おうとすると XMLHTTPRequest と同様のイベントハンドラーを使った構文で、若干わかりづらいプログラムになってしまいます。

例)IndexedDBの仕様|MDN より

そのため、多くの IndexedDB を扱うためのラッパーやライブラリが有志達によって開発されており、
その中でも比較的人気なのが、今回ご紹介する Dexie.js です。

Dexie.jsによる記述

Dexie.js を使うと、シンプルな構文で IndexedDB を扱うことができます。
例えば先程の例であれば、以下のように記述します。

DBの構造もかんたんに定義でき、接続の流れも Promiseオブジェクトを使った、より自然な流れでプログラミングできます。

DexieをReactで扱う

Dexie は React をサポートしており、React 用のHooksなども用意されているため、
React Hooks のような記述方法で Dexieを使うことができます。

React 環境への Dexie のインストール方法はこちらを参照してください。

DBを定義したファイルを用意する

db.ts

コンポーネントにDBのデータを読み込む

React用のHooksである、useLiveQuery を使って、コンポーネントの中でDBのデータを読み込むことができます。

DBにデータを追加する

db.items.add(<データ>) でデータを追加できます。

Dexie.jsを使えば、怖がらずにIndexedDBを利用した開発ができそうです。

↓Dexie.jsを使って作ってみたDEMO
https://codesandbox.io/s/react-dexie-js-mui-j4k3n3

参考にさせていただいたサイト

この記事を書いた人
Ninomiyaのアイコン

Ninomiya

Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。