IndexedDBのラッパー 「localForage」を使ってみる 2019年3月20日 シックス・アパート株式会社 ⾧内毅志 

自己紹介 • ⾧内毅志(Takeshi Nick Osanai) • ディベロッパーリレーションマネージャー • Movable Type エバンジェリスト • AWS認定ソリューションアーキテクト • 趣味 ジョギング、野球観戦 英語の勉強 (TOEIC 875, 英検準1級) 家族と過ごすこと @Nick_smallworld 

PWAのストレージに関するベストプラクティス https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa?hl=ja 

IndexedDBとは • ブラウザで利用できるストレージ領域(DB) • Key-Value 形式でデータを保存 • ブラウザのデフォルトストレージになりつつある 

localForageとは • WebStorage のような書き方でIndexedDBが使えるラッパー • Mozzila財団のメンバーがメンテナンスをしている 

localForageのインストール(Web) 

書き方の違い • WebStorage • localForage 

localForage と WebStorage ? • WebStorage と localForage で パフォーマンスは異なる? • 試してみた 

パフォーマンス計測 • for文で1000件のデータを作成 • sessionStorage、localForageで回す • 書き込み、読み出しの時間をそれぞれ計測 

コード(一部) 

•デモ 

試した結果 • Chromeでは localForage＋IndexedDBの方が全体的に早い • 特に書き込みは数十倍のレベルでWebStorageより高速 • localForage いけるじゃん! • ・・・という結論にしようと思ったのですが 

あれ…? • FireFoxではsessionStorageのほうが早い…だと…? • ベンチマークのコードの問題かも • なにかわかったら今度発表します 

ありがとうございました! • シックス・アパートの⾧内でした。 • MovableType.net もよろしく お願いします。