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.7k
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
160
AWS を利用した ウェブサイトホスティングと PowerCMS X
tosanai
1
950
プラットフォーム事業を推進するための開発者マーケティング
tosanai
0
57
MTクラウドハンズオン資料
tosanai
1
97
Movable Type クラウド版 ハンズオンセミナー
tosanai
0
280
20190508_DevRel_Meetup_Public.pdf
tosanai
0
760
Movable Type クラウド版 ハンズオン資料
tosanai
0
99
20190320_MTCloud_handson.pdf
tosanai
0
92
ウェブ技術者の視点から見たPWA
tosanai
0
51
Other Decks in Technology
See All in Technology
Go の analysis パッケージで自作するリファクタリングツール
kworkdev
PRO
1
410
LINEギフトのLINEミニアプリアクセシビリティ改善事例
lycorptech_jp
PRO
0
240
AI・LLM事業部のSREとタスクの自動運転
shinyorke
PRO
0
300
SpannerとAurora DSQLの同時実行制御の違いに想いを馳せる
masakikato5
0
560
銀行でDevOpsを進める理由と実践例 / 20250317 Masaki Iwama
shift_evolve
1
110
OCI見積もり入門セミナー
oracle4engineer
PRO
0
110
大規模アジャイル開発のリアル!コミュニケーション×進捗管理×高品質
findy_eventslides
0
470
SSH公開鍵認証による接続 / Connecting with SSH Public Key Authentication
kaityo256
PRO
2
210
ペアプログラミングにQAが加わった!職能を超えたモブプログラミングの事例と学び
tonionagauzzi
1
140
パスキー導入の課題と ベストプラクティス、今後の展望
ritou
7
1.2k
バックエンドエンジニアによるフロントエンドテスト拡充の具体的手法
kinosuke01
1
670
Agile TPIを活用した品質改善事例
tomasagi
0
290
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Embracing the Ebb and Flow
colly
85
4.6k
Testing 201, or: Great Expectations
jmmastey
42
7.4k
Optimising Largest Contentful Paint
csswizardry
35
3.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
Why Our Code Smells
bkeepers
PRO
336
57k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
177
52k
Building an army of robots
kneath
304
45k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
700
Scaling GitHub
holman
459
140k
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 もよろしく お願いします。