BLOG
Webエンジニア2025年新卒採⽤ BRISKは新卒からリモートワークです。

【スマホアプリ開発】ハイブリッドアプリ開発が楽になる js のみのデータベース【indexedDB + Dexie.js】(動作例付き)

更新日:2020/07/31


システム開発にあたってMySQLなどのデータベースを用いることが多いですが、スマホアプリ開発では端末内にいわゆるデータベースを保持できないので、通常はデータベース用のサーバーを用意する必要があります。
もちろん、データベース用サーバーが必須な場合(他ユーザーと連携するようなアプリの場合)も多いのですが、オフラインで動かせるアプリの場合は無理にデータベース用サーバーを用意しなくても良いと言えます。
通信が少なくなりますし、サーバーの容量や、情報漏洩についても心配が減ります。

ハイブリッドアプリは、ブラウザ内にデータを保存する機能を利用することが出来るので、CookieやwebStorageも利用できるのですが、複雑なデータになると扱いが大変です。
このような時に重宝するのが「indexedDB」です。
MySQLなどのRDBとは構想が違うので扱いに少し戸惑うこともあるかもしれませんが、基本的にRDBより柔軟に作られていますので、すぐに慣れると思います。

利用にあたっては、「Dexie.js」というライブラリと共に利用するのが使いやすいと思います。
このブログでは、「indexedDB + Dexie.js」の使い方、基本的な記述、簡単な動作例、便利なポイントを説明していきます。
動作例は、軽快に動きますので、ぜひ触ってみてください!

全体として、BRISKで作成したスマホアプリ「スターティングメンバーを決めよう!」を例に記載していきます。

参考サイト:
MozzilaのIndexedDB APIドキュメント
Dexie.js公式ドキュメント(英語)

使い方

Dexie.jsの読み込み

indexedDB は HTML5 の機能なので特に何かを読み込まなくても使用できます。
Dexie.js を公式サイトからダウンロードして利用しましょう。ダウンロードページ

DB設定

最初にDBの設定をする必要があります。
もちろん複数作成できますが、基本的にスタンドアローンなシステムを作るわけですので、1つのシステムで作るDBは1つで十分かと思います。

ストア設定

ストアというのは、RDBにおけるテーブルのようなイメージで、データの集合体です。
しかし、RDBのようにカラムが明確に決まっているイメージではないので、箱とユニークキーとインデックスだけ設定しておけば、項目が増えたデータを追加したりすることが出来ます。
例えば野球アプリでこのようなデータを扱いたいときには以下のように設定できます。

[試合情報]

試合ID 試合名
1 地区予選1回戦
2 地区予選2回戦
3 地区予選決勝

[選手情報]

選手ID 選手名 背番号 守備可能位置 更新日時
1 佐藤 310 投手 2020/7/21 9:51:00
2 鈴木 8 内野, 外野 2020/7/22 15:23:00
3 高橋 24 捕手, 内野 2020/7/22 15:23:00

[各試合の出場選手情報]

試合ID 選手ID 守備位置
1 1 投手
1 2 遊撃
2 1 投手
2 3 捕手

この設定を見ると分かるように、データとして格納したい全ての項目を設定する必要はありません。
インデックスを貼りたい項目(検索やソートで後から利用したい項目)だけをここで設定します。
「++」のような記号をつけることにより項目に意味を追加することが出来ます。

++ Auto incremented(自動連番)で、主キー
& ユニークなキー
* 複数入力キー(カテゴリやタグのようなもので良く使う)
[A+B] 複合キー
&[A+B] ユニークな複合キー

ここまででひとまずDBを使えるようになりました。
「version(1)」という記述がありますが、こちらは後で説明します。

基本的な記述

RDBで言うところのSQLコマンドと対応させて基本的な記述を説明していきます。
それぞれ、primaryKey を基に実行するやり方と、条件を基に実行するやり方があります。

取得 – SELECT

データの取得です。「toArray」を使って、返ってくるデータをオブジェクトとして受け取ることが出来ます。

新規登録 – INSERT

追加登録です。
オートインクリメントの項目は特に指定しなくて大丈夫です。

更新 – UPDATE

データを更新するときには、primaryKey を基に更新するのか、それ以外で更新するのか、で記載が異なります。

削除 – DELETE

こちらも更新と同じような感じで操作できます。

並べ替え – ORDER BY

並べ替えは sortBy や reverse を利用して対応します。並べ替えたい項目はストア設定のところで指定しておく必要があります。
orderBy というコマンドも公式サイトを見るとあるのですが準備中のようです。

この sortBy なのですが、検索して絞り込んだ対象に対してしか並べ替えできません。
ストア全体に対して並べ替えが出来ない、ということになります。

でも全体を並べ替えて表示したい、ということはありますよね。どうすれば良いかというと、全体を取得できるような条件で検索したものを並び替えればよい、ということになります。
例えば primarKey が 0 より大きい、という条件で検索したら全件取得できるので、sortBy を利用することができます。

逆順にする reverse は、ストアに対しても検索結果に対してもどちらでも使えます。

数限定取得 – LIMIT

最初の1件だけを取得するのは first、最後の1件だけを取得するのは last、というコマンドで出来ます。これらは条件で絞り込んだときにだけ使えて、ストア全体には使えません。
件数指定は limit ですね。こちらはストア全体にも使えます。

簡単な動作例

上の方で定義したDBに対して追加、更新、削除の動作をするようにしました。
indexedDBなので、もちろん通信は発生しません。
初期状態に戻したい場合は、下にある「リセット」を押してください。

上記実装のソースも記載します。参考にしていただければ幸いです。

ソース表示

便利なポイント

indexedDB + Dexie.js でスマホアプリを開発していて、個人的に便利だなぁと感じた点や良かった点を挙げていきます。
・ドキュメントがしっかりしている
・後からのストア構成の変更
・保持データは追加自由
・JSON形式でデータ取得できるので、連携が簡単

ドキュメントがしっかりしている

Dexie.js のサイトはドキュメントが分かりやすく纏められています。Dexie.js リファレンス(英語)
この記事で取り上げた以外にも多くのコマンドがありますので、色々とやりたいことがある場合にはここで調べながら実装していけます。

後からのストア構成の変更

アプリをリリースしてから「背番号で並び替えをしたい」、という追加仕様があったとします。
並び替えをするには、ストア定義でインデックスを貼っていなければいけないのですが、初期設定では「背番号」には貼っていませんでした。
しかし、バージョン更新機能で後からストア構成の変更を行うことができます。
最初の定義で「version(1)」の記載をしましたが、ストア定義を更新するときに、これを利用します。
version(1) の記述を消さずに、version(2) の記述を追記する形です。
これにより、データの整合性を取りつつバージョンアップしてくれます。

保持データは追加自由

「ストア設定」の部分でも少し記載しましたが、基本的に項目は定義しなくても追加自由です。
例えば、選手情報に「出身地」「身長」「体重」などのデータを入れたいだけなら、ストア定義のバージョンを変更しなくても大丈夫です。

ただ、それをキーに検索をしたりする(例えば東京都出身の選手一覧を表示する)となると、インデックスを貼る必要があるので、ストア定義をバージョンアップする必要があります。

JSON形式でデータ取得できるので、連携が簡単

toArray() コマンドを用いてJSON形式で取得できるので、例えば通信してPHPとの連携もやり易いのはポイントです。
また、データのエクスポート、インポートも簡単です。
JSON形式のデータを読み込めれば以下の記述で上書きインポートできます。

まとめ

スマホアプリ内で使用できる indexedDB と、それを便利に簡単に利用できるようにするライブラリ Dexie.js について、使い方や動作例、便利な点などを纏めてみました。
indexedDB を使いやすくするライブラリはいくつもありますが、個人的には Dexie.js が一番とっつきやすく、便利に思えました。
外部サーバーと連携するようなアプリであっても、内部DBの仕組みとして indexedDB + Dexie.js の導入は開発をやり易くすると感じました。
BRISK でも自社サービスの一環としてスマホアプリをどんどんと開発していこうと思っていますので、技術の研鑽に励みたいものです。※自社サービスについての社長日記

南本貴之

FOLLOW US