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と一緒です。
条件によってクエリを使い分ける
ここまでわかってくると、条件によってクエリを分けることもできると想像ができます。
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();
こんな形で、件数と結果一覧を別々に出すこともできます。
上記は記事一覧ページの想定ですが、記事一覧ページを作る際は、ページング処理をするために、
- ページングした一覧結果
- 全記事数
の両方が必要になります。
別々にクエリを書いても良いですが、コード数が増える上にメンテナンス性も落ちるため、変数で処理した方が良いことは明白です。
Dexie.jsのクエリビルドについてみてきました。
気づいてしまえば当たり前のことなんですが、この使い方を知っているかいないかで使い勝手が全く変わってきます。
Dexie.jsを使っている方は、試してみてください。
新着ノート
-
NUXT3
公開日:2023年2月16日
-
NUXT3
公開日:2023年1月30日
新着コード
-
Vue.js
公開日:2022年4月18日
-
Vue.js
公開日:2022年4月13日