beta

Dexie.jsでクエリビルドを使いこなす

JavaScriptのIndexed DBライブラリであるDexie.jsでは、クエリをビルドしながら使い分けができます。これを知っておくだけで使い勝手が全然違ってきます。

公開日:2022年4月25日

Dexie.jsのクエリの組み立て方の基本

Dexie.jsでは、

await db.queries.where('hoge').equals('fuga').first();

という形でデータを取得します。

実はこれは、RailsのActive RecordなどのORMラッパーに近い挙動をしていて、

db.テーブル

がSQLの「From テーブル」に該当し、

.where().equals()

がSQLのwhere句に該当します。

その後に、limitなどの制限句を追加してSQL文の組み立てが完了します。

.limit()

組み立てができたら、あとは結果を指定します。

.toArray();
.first();

ここを実行する前は、SQL文を組み立てているだけなので、実際にDBへのコールは行っていません(Promiseになります)。この考え方は、RailsのActive Recordと一緒です。

Active Record の基礎

条件によってクエリを使い分ける

ここまでわかってくると、条件によってクエリを分けることもできると想像ができます。

let list = db.articles;

if(aid !== 0){
  list = list.where('id').equals(aid);
}

const result = await list.toArray();

という形です。

これを発展させると、

let list = db.articles;

if(aid !== 0){
  list = list.where('id').equals(aid);
}

const total = await list.count();
const result = await list.offset(0).limit(10).toArray();

こんな形で、件数と結果一覧を別々に出すこともできます。

上記は記事一覧ページの想定ですが、記事一覧ページを作る際は、ページング処理をするために、

  1. ページングした一覧結果
  2. 全記事数

の両方が必要になります。

別々にクエリを書いても良いですが、コード数が増える上にメンテナンス性も落ちるため、変数で処理した方が良いことは明白です。


Dexie.jsのクエリビルドについてみてきました。

気づいてしまえば当たり前のことなんですが、この使い方を知っているかいないかで使い勝手が全く変わってきます。

Dexie.jsを使っている方は、試してみてください。

: vue3

Author

Koji Kadoma
Member of codit.work

新着ノート

新着コード