blob: 1d08f26cc896001c106cb43665d00f5f35844b75 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
---
title: IndexedDB API
slug: Web/API/IndexedDB_API
tags:
- API
- Advanced
- Database
- IndexedDB
- Landing
- Reference
- Storage
translation_of: Web/API/IndexedDB_API
---
<div>{{DefaultAPISidebar("IndexedDB")}}</div>
<p>IndexedDB は、ファイルや blob を含む大量の構造化データをクライアント側で保存するための低レベル API です。この API はインデックスを使用して、高パフォーマンスなデータの検索を行うことができます。<a href="/ja/docs/Web/API/Web_Storage_API">Web Storage</a> は比較的少量のデータを保存するのに有用ではありますが、構造化された非常に多くのデータを扱うには不十分です。IndexedDB が解決策を提供します。ここでは、完全な API リファレンスと使用ガイド、ブラウザーの対応の詳細、および重要な概念の説明へのリンクを提供します。</p>
<p>{{AvailableInWorkers}}</p>
<div class="note">
<p><strong>メモ</strong>: IndexedDB API は強力ですが、シンプルな用途にはとても複雑に見えるかもしれません。シンプルな API が好ましいのであれば、<a href="#see_also">関連情報</a>の節にある IndexedDB をプログラマーにとって扱いやすくするライブラリーを試してみてください。</p>
</div>
<h2 id="Key_concepts_and_usage">主要概念と使用法</h2>
<p>IndexedDB は SQL ベースの RDBMS に似たトランザクショナルデータベースシステムです。しかし、SQL ベース の RDBMS が固定された列を持つテーブルを使用するのに対して、IndexedDB は JavaScript ベースのオブジェクト指向データベースです。IndexedDB では、<strong>キー</strong>でインデックス付けされたオブジェクトを保存および取り出すことができます。<a href="/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">構造化クローンアルゴリズム</a>に対応した、任意のオブジェクトを保存することができます。データベースのスキーマを定義し、データベースへの接続を確立し、そして一連の<strong>トランザクション</strong>でデータの取り出しや更新を行う必要があります。</p>
<ul>
<li><a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology">IndexedDB の主な特徴と基本用語</a>についてはこちらをご覧ください。</li>
<li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDB の使用</a>のガイドで、で、非同期的に IndexedDB を使用する方法を基本原理から学びます。</li>
<li>データをオフラインで保存するための IndexedDB と、資産をオフラインで保存するためのサービスワーカーを組み合わせる方法は、 <a href="/ja/docs/Web/Progressive_web_apps/Offline_Service_workers">サービスワーカーにより PWA をオフラインで動作させる</a>で概説しています。</li>
</ul>
<div class="note">
<p><strong>メモ</strong>: たいていのウェブストレージ技術と同様に、IndexedDB も<a href="https://www.w3.org/Security/wiki/Same_Origin_Policy">同一オリジンポリシー</a>に従います。よって、保存済みデータは同一ドメイン内からアクセスできますが、異なるドメインにまたがってデータへアクセスすることはできません。</p>
</div>
<h3 id="Synchronous_and_asynchronous">同期と非同期</h3>
<p>IndexedDB を扱う操作は非同期に実行しますので、他のアプリケーションを妨げません。 IndexedDB は元々同期 API と非同期 API の両方を提供していました。同期 API は<a href="/ja/docs/Web/API/Web_Workers_API/Using_web_workers">ウェブワーカー</a>内でのみの使用を意図していましたが、必要性に疑問があったため仕様から削除されました。ただし、同期 API はウェブ開発者から十分な要望がある場合は、将来再び導入される可能性があります。</p>
<h3 id="Storage_limits_and_eviction_criteria">ストレージの上限と破棄基準</h3>
<p>クライアント側 (すなわちローカルディスク) に何らかのデータを保存するウェブ技術はいくつかあります。IndexedDB はそのような技術としてもっともよく語られます。ブラウザーがどれだけの容量をウェブデータストレージに割り当てるかや、容量の上限に達したときにどのデータを削除するかのプロセスは単純ではなく、またブラウザーにより異なります。<a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">ブラウザーのストレージ制限と削除基準</a>で、少なくとも Firefox ではどのようにしているかの解説を試みています。</p>
<h2 id="Interfaces">インターフェイス</h2>
<p>データベースへのアクセスを行いたい場合は、<a href="/ja/docs/Web/API/Window">window</a> オブジェクトの <a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB"><code>indexedDB</code></a> 属性上で <a href="/ja/docs/Web/API/IDBFactory/open"><code>open()</code></a> を呼び出してください。このメソッドは {{domxref("IDBRequest")}} オブジェクトを返します。{{domxref("IDBRequest")}} オブジェクト上で発行されたイベントによってアプリケーションが呼び出されることにより、非同期操作が行われます。</p>
<h3 id="Connecting_to_a_database">データベースへの接続</h3>
<dl>
<dt>{{domxref("IDBEnvironment")}}</dt>
<dd>IndexedDB 機能へのアクセスを提供します。{{domxref("window")}} および {{domxref("worker")}} オブジェクトによって実装されています。このインターフェイスは 2.0 仕様の一部ではありません。</dd>
<dt>{{domxref("IDBFactory")}}</dt>
<dd>データベースへのアクセスを提供します。{{domxref("WindowOrWorkerGlobalScope/indexedDB", "indexedDB")}} グローバルオブジェクトによって実装されており、従って API へのエントリーポイントになります。</dd>
<dt>{{domxref("IDBOpenDBRequest")}}</dt>
<dd>データベースを開くリクエストを表します。</dd>
<dt>{{domxref("IDBDatabase")}}</dt>
<dd>データベース接続を表します。データベースとのトランザクション処理を行うためのみに使用されます。</dd>
</dl>
<h3 id="Retrieving_and_modifying_data">データの取り出しと変更</h3>
<dl>
<dt>{{domxref("IDBTransaction")}}</dt>
<dd>トランザクションを表します。(アクセスしたいオブジェクトストアの) スコープを指定し、(読み取り専用または読み書き可能といった) アクセスの種類を定義して、データベースへのトランザクションを作成します。</dd>
<dt>{{domxref("IDBRequest")}}</dt>
<dd>データベースへのリクエストの処理、および結果へのアクセスを提供する汎用インターフェイスです。</dd>
<dt>{{domxref("IDBObjectStore")}}</dt>
<dd>IndexedDB 内のデータセットにアクセスできるオブジェクトストアを表し、主キーを使用して探索します。</dd>
<dt>{{domxref("IDBIndex")}}</dt>
<dd>こちらも IndexedDB データベース内のデータのサブセットにアクセスできますが、レコードの探索に主キーではなくインデックスを使用します。{{domxref("IDBObjectStore")}} より高速に動作する場合があります。</dd>
<dt>{{domxref("IDBCursor")}}</dt>
<dd>オブジェクトストアとインデックスを反復処理します。</dd>
<dt>{{domxref("IDBCursorWithValue")}}</dt>
<dd>オブジェクトストアとインデックスを反復処理して、カーソルの現在の値を返します。</dd>
<dt>{{domxref("IDBKeyRange")}}</dt>
<dd>データベースから一定の範囲のデータを取り出すために使用可能な、キーの範囲を定義します。</dd>
<dt>{{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}</dt>
<dd>データベースから一定の範囲のデータを取り出すために使用可能な、インデックス用に指定したロケール (<a href="/ja/docs/Web/API/IDBObjectStore/createIndex#parameters"><code>createIndex()</code> の optionalParameters</a> をご覧ください) の規則によって並べ替えたキーの範囲を定義します。</dd>
</dl>
<h3 id="Custom_event_interfaces">カスタムイベントインターフェイス</h3>
<p>本仕様では、以下のカスタムインターフェイスでイベントが発生します。</p>
<dl>
<dt>{{domxref("IDBVersionChangeEvent")}}</dt>
<dd><code>IDBVersionChangeEvent</code> インターフェイスは、{{domxref("IDBOpenDBRequest.onupgradeneeded")}} イベントハンドラー関数によってデータベースのバージョンが変更されたことを表します。</dd>
</dl>
<h3 id="Obsolete_interfaces">廃止インターフェイス</h3>
<p>仕様の早期段階では、以下のようなインターフェイスを定義していましたが、既に削除されています。以前書かれたコードを更新する必要がある場合のために、ドキュメントを残しています。</p>
<dl>
<dt>{{domxref("IDBDatabaseException")}} {{deprecated_inline}}</dt>
<dd>データベース操作が実行されている間に発生した例外状況を表します。</dd>
<dt>{{domxref("IDBTransactionSync")}} {{deprecated_inline}}</dt>
<dd>同期版の {{domxref("IDBTransaction")}} です。</dd>
<dt>{{domxref("IDBObjectStoreSync")}} {{deprecated_inline}}</dt>
<dd>同期版の {{domxref("IDBObjectStore")}} です。</dd>
<dt>{{domxref("IDBIndexSync")}} {{deprecated_inline}}</dt>
<dd>同期版の {{domxref("IDBIndex")}} です。</dd>
<dt>{{domxref("IDBFactorySync")}} {{deprecated_inline}}</dt>
<dd>同期版の {{domxref("IDBFactory")}} です。</dd>
<dt>{{domxref("IDBEnvironmentSync")}} {{deprecated_inline}}</dt>
<dd>同期版の {{domxref("IDBEnvironment")}} です。</dd>
<dt>{{domxref("IDBDatabaseSync")}} {{deprecated_inline}}</dt>
<dd>同期版の {{domxref("IDBDatabase")}} です。</dd>
<dt>{{domxref("IDBCursorSync")}} {{deprecated_inline}}</dt>
<dd>同期版の {{domxref("IDBCursor")}} です。</dd>
</dl>
<h2 id="Examples">例</h2>
<ul>
<li><a href="https://marco-c.github.io/eLibri/">eLibri:</a> Marco Castelluccio が作成した、高度なライブラリおよび電子書籍リーダーアプリケーションです。IndexedDB Mozilla DevDerby の最優秀作品です。</li>
<li><a href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">ライブデモ</a>): リファレンスドキュメントで例示している、参考アプリケーションです。</li>
<li><a href="https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Storing images and files in IndexedDB</a></li>
</ul>
<h2 id="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://w3c.github.io/IndexedDB/">Indexed Database API</a></td>
</tr>
</tbody>
</table>
<h2 id="See_also">関連情報</h2>
<ul>
<li><a href="https://localforage.github.io/localForage/">localForage</a>: クライアント側のデータストレージ向けに、シンプルな name:value 形式の構文を提供するポリフィルです。バックグラウンドで IndexedDB を使用しますが、IndexedDB をに対応していないブラウザーでは WebSQL や localStorage にフォールバックします。</li>
<li><a href="https://dexie.org/">Dexie.js</a>: 優良でシンプルな構文により高速なコード開発を可能にする、IndexedDB のラッパーです。</li>
<li><a href="https://github.com/erikolson186/zangodb">ZangoDB</a>: IndexedDB の MongoDB ライクなインターフェイスで、MongoDB でおなじみのフィルターリング、射影、ソート、アップデート、集計をサポートしています。</li>
<li><a href="https://jsstore.net/">JsStore</a>: SQL 風の構文による IndexedDB のラッパーです。</li>
<li><a href="https://github.com/mWater/minimongo">MiniMongo</a>: クライアント側のインメモリーの mongodb で localstorage と server sync over http を元にしたもの。MiniMongo は MeteorJS で使われています。</li>
<li><a href="https://pouchdb.com">PouchDB</a>: クライアント側のブラウザー内の CouchDB 実装で IndexedDB を使っています。</li>
<li><a href="https://www.npmjs.com/package/idb">idb</a>: IndexedDB API をほぼ反映した小さな (~1.15k) ライブラリーですが、使いやすさを大きく変える小さな改良が加えられています。</li>
<li><a href="https://www.npmjs.com/package/idb-keyval">idb-keyval</a>: IndexedDB で実装された超シンプルで小さな (~600B) プロミスベースのキーバリューストア</li>
<li><a href="https://www.npmjs.com/package/@sifrr/storage">sifrr-storage:</a> クライアントサイドのキーバリューストレージ用の小さな (~2kB) プロミスベースのライブラリーです。IndexedDB、localStorage、WebSQL、Cookie で動作します。優先度に基づいて、対応しているストレージを自動的に使用できます。</li>
<li><a href="https://github.com/google/lovefield">lovefield</a>: Lovefield は、ウェブアプリケーション用のリレーショナルデータベースです。 JavaScript で書かれており、クロスブラウザーで動作します。SQL ライクな API を提供しており、高速で安全、かつ簡単に使用できます。</li>
<li><a href="https://github.com/hyoo-ru/mam_mol/tree/master/db">$mol_db</a>: 小さな (~1.3kB) TypeScript のファサードで、プロミスベースの API と自動マイグレーションを備えています。</li>
</ul>
|