IndexedDBとは
クライアントサイドにデータを保存するWeb APIのひとつであるIndexedDBは、キー/バリュー形式で保存したデータを高速に検索できるオブジェクト指向データベースです。私のなかでは「大量かつ複雑なデータを管理できるlocalStorageの近親」と解釈しています。データはドメイン単位で管理されるため、異なるアプリケーションから保存データへアクセスすることはできません。
今回の実装では、よりシンプルな構文でIndexedDBを扱えるようになるライブラリ「Dexie.js」を使用しました。
技術選定に至った経緯
動画事業では、ありがたいことに数百、数千単位で商品を購入されているヘビーユーザーの方々がおり、購入済み動画の検索機能を強化してほしいという要望を以前から多くいただいておりました。
一般的な検索機能であれば検索APIを使用するところですが、動画事業は20年以上続いている長寿サービスだけに、品質を追求すると、コスト/デリバリーの面から検索APIの実装は現実的でありませんでした。
iOS/Androidでは上記理由から、商品データをアプリ内に保存し、ローカルで検索してもらう方法で検索APIに頼らず検索機能を実現していました。そこで、PCでもアプリに近い方法で検索機能を実現できないか検討していくなかで、IndexedDBが候補に挙がりました。
IndexedDBの技術検証を行なった結果、以下の利点が得られました。
- キーワード検索やページング、ソートなどを高速に行うことができる
- 一度データを読み込めば再度DBへアクセスする必要がなく、DBに負荷がかかりにくい
- 動画事業でサポートしている動作環境をカバーできる
よって、PCの購入済み動画一覧画面にはIndexedDBを採用し、検索機能を実装することになりました。
技術検証で得た知見
IndexedDBを使用して検索機能が実装可能なのか、技術検証を行なって得た知見についてまとめます。必ずしも正確なパフォーマンスではないことをご了承のうえ、あくまで数台のPCで検証した結果としてご覧ください。
検証を行ったものに近いコードはこちらで確認できます: ブラウザごとのINSERT&SELECT速度検証 - CodeSandbox
実行速度はブラウザに依存する
1000件〜10000件のJSONデータをIndexedDBへINSERTした際の速度検証を行いました。その結果、実行速度はブラウザに強く依存することがわかりました。
ほとんどのブラウザで10000件のデータのINSERT処理に5秒と掛からず、想定以上にパフォーマンスが高い結果となりました。Edgeのみ極端に実行速度が遅い結果が出て不安を覚えましたが、検証時点（2019年8月頃）ではDeveloper向けに公開されていたChromium版Edgeを使用した場合、Chromeプラスアルファほどの速度になることが確認できました。
INSERT処理にかかる時間 >>>>> SELECT処理にかかる時間
1000件〜10000件のJSONデータに対し、INSERT処理に掛かったタイムとSELECT処理に掛かったタイムを測りその平均値を出した結果、以下のようになりました。
ほとんどのブラウザで、SELECT処理はINSERT処理の1/4程度の速度で実行できることがわかりました。ただしEdgeのみ逆転し、INSERT処理よりSELECT処理に時間が掛かるという結果になりましたが、こちらもChromium版EdgeではChromeプラスアルファほどの速度になることが確認できました。
大量INSERTの場合は分割せず一度に実行したほうが早い
「1000件×10回のINSERT処理」より「10000件×1回のINSERT処理」のほうが圧倒的に処理速度が速い結果となりました。一度に大量のデータをINSERTするためには、Dexie.jsのバルクインサートを使用するのが良いようです。
Edge / IE11のプライバシーモードでは使用できない
EdgeとIE11のプライバシーモードで動作検証を行ったところ、IndexedDBが動作しないことを確認できました。どちらも通常モードでの使用時には問題なく動作します。
検索機能デモ
IndexedDBを使用しキーワード検索が行えるデモを作成しました。
実際に触って、INSERT処理やSELECT処理の速度を体感してみてください。
おわりに
IndexedDBは使用事例が少なく苦労したので、この記事が誰かの開発の参考になれば幸いです。
今回この機能をリリースできたのは、最初に「IndexedDBを使用した検索機能の実装が実現可能か」について技術検証する時間をしっかり取れたためだと思っています。
私は中途入社後すぐにこの施策を担当したのですが、DMMには社歴に関係なく新しいこと・興味のあることに挑戦できる風土があると実感しました。
弊社の採用情報に興味のある方はぜひ下記募集ページをご確認下さい。
