用語集 › 🕸️ Web › IndexedDB
【いんでっくすどでぃーびー】

IndexedDB とは？

💡 ブラウザの中の「本格的なデータベース」
📌 このページのポイント
IndexedDB — ブラウザ内の構造化データストア ブラウザ Webアプリ JavaScript API IndexedDB users ストア key:1 → {"{name:田中}"} key:2 → {"{name:鈴木}"} key:3 → {"{name:佐藤}"} index: name orders ストア key:1 → {"{item:本}"} key:2 → {"{item:PC}"} index: userId 特徴: ・大容量保存 ・非同期API ・トランザクション ・オフライン対応 サーバーを介さず、ブラウザ内に構造化データを永続保存できる
IndexedDBのイメージ
ひよこ ひよこ

localStorageと何が違うの？

ペンギン先生 ペンギン先生

localStorageは文字列しか保存できず容量は5MB程度。IndexedDBはオブジェクトをそのまま保存でき、容量は数百MB〜GBレベル。インデックスを張って検索もできるし、トランザクションもサポートする。localStorageは設定値の保存、IndexedDBは本格的なデータ管理向けだよ

ひよこ ひよこ

APIが難しいって聞いたけど？

ペンギン先生 ペンギン先生

確かに生のAPIはイベントベースで冗長なんだ。oniongenerateやonsuccess、onerrorをコールバックで書く必要がある。だからDexie.jsやidb（Jake Archibald作）のようなラッパーライブラリを使うのが一般的。PromiseベースのAPIで、IndexedDBの恩恵をシンプルに受けられるよ

ひよこ ひよこ

どんな用途に使われてる？

ペンギン先生 ペンギン先生

①オフライン対応アプリ（PWA）のデータキャッシュ、②メールクライアントやチャットアプリのメッセージ保存、③画像やファイルのクライアントサイドキャッシュ、④ゲームのセーブデータ。Google DocsやNotionもオフライン機能でIndexedDBを活用しているよ

ひよこ ひよこ

容量制限はあるの？

ペンギン先生 ペンギン先生

ブラウザごとに異なるけど、Chromeはディスク空き容量の最大80%、Firefoxは最大50%まで。ただしオリジンごとの制限もある。StorageManager APIのnavigator.storage.estimate()で使用量と上限を確認できる。永続化したい場合はnavigator.storage.persist()でブラウザの自動削除を防げるよ

ペンギン
まとめ：ざっくりこれだけ覚えればOK！
「IndexedDB」って出てきたら「ブラウザに組み込まれた大容量データベース」と思えればだいたいOK！
📖 おまけ：英語の意味
「Indexed Database」 ＝ インデックス付きデータベース
💬 Indexed（索引付き）なDatabase。ブラウザ内で検索もできるDBだよ
🔗 あわせて読みたい
← 用語集にもどる