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.4k
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
77
AWS を利用した ウェブサイトホスティングと PowerCMS X
tosanai
1
660
プラットフォーム事業を推進するための開発者マーケティング
tosanai
0
40
MTクラウドハンズオン資料
tosanai
1
84
Movable Type クラウド版 ハンズオンセミナー
tosanai
0
200
20190508_DevRel_Meetup_Public.pdf
tosanai
0
690
Movable Type クラウド版 ハンズオン資料
tosanai
0
81
20190320_MTCloud_handson.pdf
tosanai
0
74
ウェブ技術者の視点から見たPWA
tosanai
0
40
Other Decks in Technology
See All in Technology
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
450
Azureの基本的な権限管理の勉強会
yhana
0
280
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
1.3k
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
1
460
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
2
350
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.7k
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
100
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
130
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
180
本当のAWS基礎
toru_kubota
0
510
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
440
Featured
See All Featured
What's new in Ruby 2.0
geeforr
337
31k
4 Signs Your Business is Dying
shpigford
175
21k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
Designing for humans not robots
tammielis
248
25k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Designing the Hi-DPI Web
ddemaree
276
33k
A Tale of Four Properties
chriscoyier
151
22k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
Git: the NoSQL Database
bkeepers
PRO
422
63k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
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 もよろしく お願いします。