Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
IndexedDBのラッパー「localoForage」を試してみた
Search
Takeshi Nick Osanai
March 20, 2019
Technology
0
2.6k
IndexedDBのラッパー「localoForage」を試してみた
2019年3月20日 PWA Night のLT資料です。
未検証の部分があるため、将来的に資料をアップグレードする可能性があります。
Takeshi Nick Osanai
March 20, 2019
Tweet
Share
More Decks by Takeshi Nick Osanai
See All by Takeshi Nick Osanai
How DevRel should proceed with the breaking change project?
tosanai
0
120
AWS を利用した ウェブサイトホスティングと PowerCMS X
tosanai
1
840
プラットフォーム事業を推進するための開発者マーケティング
tosanai
0
46
MTクラウドハンズオン資料
tosanai
1
89
Movable Type クラウド版 ハンズオンセミナー
tosanai
0
240
20190508_DevRel_Meetup_Public.pdf
tosanai
0
730
Movable Type クラウド版 ハンズオン資料
tosanai
0
84
20190320_MTCloud_handson.pdf
tosanai
0
80
ウェブ技術者の視点から見たPWA
tosanai
0
42
Other Decks in Technology
See All in Technology
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
130
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
140
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
290k
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
470
【若手エンジニア応援LT会】AWSで繋がり、共に成長! ~コミュニティ活動と新人教育への挑戦~
kazushi_ohata
0
180
プロダクトチームへのSystem Risk Records導入・運用事例の紹介/Introduction and Case Studies on Implementing and Operating System Risk Records for Product Teams
taddy_919
1
170
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
850
独自ツール開発でスタジオ撮影をDX!「VLS(Virtual LED Studio)」 / dx-studio-vls
cyberagentdevelopers
PRO
1
180
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
1
570
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
190
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
Happy Clients
brianwarren
97
6.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
The Cult of Friendly URLs
andyhume
78
6k
Speed Design
sergeychernyshev
24
570
Designing for Performance
lara
604
68k
A designer walks into a library…
pauljervisheath
202
24k
Producing Creativity
orderedlist
PRO
341
39k
Transcript
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 もよろしく お願いします。