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.5k
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
110
AWS を利用した ウェブサイトホスティングと PowerCMS X
tosanai
1
800
プラットフォーム事業を推進するための開発者マーケティング
tosanai
0
46
MTクラウドハンズオン資料
tosanai
1
87
Movable Type クラウド版 ハンズオンセミナー
tosanai
0
240
20190508_DevRel_Meetup_Public.pdf
tosanai
0
720
Movable Type クラウド版 ハンズオン資料
tosanai
0
84
20190320_MTCloud_handson.pdf
tosanai
0
80
ウェブ技術者の視点から見たPWA
tosanai
0
42
Other Decks in Technology
See All in Technology
フルカイテン株式会社 採用資料
fullkaiten
0
32k
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
220
PDF Viewer作成の今までとこれから
hunachi
0
470
学術機関におけるID連携とOpenID Connect
fujie
0
250
リアルお遍路+SORACOM IoT
ozk009
1
140
AI活用したくてもできなかった不動産SaaSの今とこれから
nealle
0
330
なにもしてないのにNew Relicのデータ転送量が増えていたときに確認したこと
tk3fftk
2
230
社内の学びの場・コミュニティ形成とエンジニア同士のリレーションシップ構築/devreljapan2024
nishiuma
3
290
【株式会社ELYZA】|GENIAC成果報告会 自社開発モデルプレゼンテーション
elyza
1
270
20240911_New_Relicダッシュボード活用例
speakerdeckfk
0
110
Analytics-Backed App Widget Development - Served with Jetpack Glance
miyabigouji
0
610
Agile in Automotive Industry, puzzles and lights.
hiranabe
3
1.4k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
691
190k
The World Runs on Bad Software
bkeepers
PRO
64
11k
A designer walks into a library…
pauljervisheath
201
24k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
How STYLIGHT went responsive
nonsquared
93
5.1k
Side Projects
sachag
451
42k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
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 もよろしく お願いします。