HTML5 Web IndexedDB データベース
IndexedDB はブラウザベースの NoSQL データベースで、クライアント側に大量の構造化データを永続的に保存するために使用されます。
IndexedDB は、キーと値のペアを使用して複雑なデータオブジェクト（オブジェクト、配列、ファイルなど）を保存でき、トランザクション、インデックス、バージョン管理、複雑なクエリ操作をサポートします。
IndexedDB は非同期であり、メインスレッドをブロックしないため、オフラインアプリケーションやキャッシュなどのシーンに適しています。
IndexedDB は、大量の構造化データを保存する必要があるアプリケーションに非常に適しています。特に、オフラインモードをサポートしたい Web アプリや複雑なクエリを処理する Web アプリに適しています。
IndexedDB の特徴
- キーと値のペアでの保存：データはキーと値のペアの形式でオブジェクトストアに格納されます。
- トランザクションサポート：すべてのデータ操作はトランザクション内で完了する必要があり、データの一貫性と完全性を保証します。
- 非同期 API：すべての操作は非同期で、UI スレッドをブロックせず、イベントコールバックまたは Promises を使用して結果を処理します。
- バージョン管理：データベースはバージョン番号を使用してデータベースのスキーマ（オブジェクトストアの作成や変更など）を管理します。
- インデックス：データのフィールドにインデックスを作成して、クエリ速度を向上させることができます。
- オフラインサポート：データは永続的に保存でき、ネットワークが切断されてもアクセスし続けることができるため、オフライン Web アプリの構築に非常に適しています。
IndexedDB の構文
IndexedDB の構文は次のとおりです。
var request = indexedDB.open('databaseName', version);
// データベースのアップグレードを処理する
request.onupgradeneeded = function(event) {
var db = event.target.result;
// オブジェクトストア（テーブル）を作成し、主キーを設定する
var objectStore = db.createObjectStore('storeName', { keyPath: 'id' });
// インデックスを作成する
objectStore.createIndex('fieldName', 'fieldName', { unique: false });
};
// データベースのオープン成功時のコールバック
request.onsuccess = function(event) {
var db = event.target.result;
// トランザクション操作を実行する
var transaction = db.transaction('storeName', 'readwrite');
var objectStore = transaction.objectStore('storeName');
// データを挿入する
objectStore.add({ id: 1, name: 'John Doe', age: 30 });
// データをクエリする
var query = objectStore.get(1);
query.onsuccess = function(event) {
console.log(event.target.result);
};
};
// エラーハンドリング
request.onerror = function(event) {
console.error('Database error:', event.target.error);
};
IndexedDB のメソッド
1、indexedDB.open()：既存のデータベースを開く、または新しいデータベースを作成するために使用します。
var request = indexedDB.open('databaseName', version);
2、db.createObjectStore()：onupgradeneeded イベントでオブジェクトストア（テーブルのようなもの）を作成します。
var objectStore = db.createObjectStore('storeName', { keyPath: 'id' });
3、objectStore.add()：トランザクション内でオブジェクトストアにデータを追加します。
objectStore.add({ id: 1, name: 'John Doe' });3、objectStore.get()：キー値に基づいてオブジェクトストアからデータを取得します。
var request = objectStore.get(1);
4、objectStore.put()：既存のレコードを更新し、レコードが存在しない場合は挿入します。
objectStore.put({ id: 1, name: 'John Updated' });5、objectStore.delete()：キー値に基づいてレコードを削除します。
objectStore.delete(1);
6、db.transaction()：トランザクションを作成し、オブジェクトストア名とトランザクションモード（readonly または readwrite）を指定します。
var transaction = db.transaction(['storeName'], 'readwrite');
7、objectStore.createIndex()：より高速なクエリのために、オブジェクトストア内のフィールドにインデックスを作成します。
objectStore.createIndex('nameIndex', 'name', { unique: false });
IndexedDB の応用例
以下は、データベースの作成、データの挿入、データのクエリ、データの更新を行う完全な IndexedDB の例です。
例
var request = indexedDB.open('myDatabase', 1);
// データベースのバージョンが変更された場合、または初回作成時にトリガーされる
request.onupgradeneeded = function(event) {
var db = event.target.result;
// オブジェクトストア（テーブル）を作成し、主キーを 'id' に設定する
var objectStore = db.createObjectStore('customers', { keyPath: 'id' });
// 'name' フィールドにインデックスを作成する
objectStore.createIndex('name', 'name', { unique: false });
};
// データベースのオープンに成功
request.onsuccess = function(event) {
var db = event.target.result;
// データを挿入する
var transaction = db.transaction(['customers'], 'readwrite');
var objectStore = transaction.objectStore('customers');
objectStore.add({ id: 1, name: 'John Doe', email: '[email protected]' });
objectStore.add({ id: 2, name: 'Jane Doe', email: '[email protected]' });
transaction.oncomplete = function() {
console.log('Transaction completed: data added.');
};
transaction.onerror = function(event) {
console.error('Transaction failed:', event);
};
// データをクエリする
var queryTransaction = db.transaction(['customers']);
var queryObjectStore = queryTransaction.objectStore('customers');
var query = queryObjectStore.get(1);
query.onsuccess = function(event) {
console.log('Customer:', event.target.result);
};
// データを更新する
var updateTransaction = db.transaction(['customers'], 'readwrite');
var updateObjectStore = updateTransaction.objectStore('customers');
var updatedCustomer = { id: 1, name: 'John Smith', email: '[email protected]' };
updateObjectStore.put(updatedCustomer);
updateTransaction.oncomplete = function() {
console.log('Transaction completed: data updated.');
};
};
// エラーハンドリング
request.onerror = function(event) {
console.error('Database error:', event.target.error);
};
IndexedDB の使用シーン
オフラインストレージ：IndexedDB を使用すると、ネットワーク接続がないときにアクセスできるようにデータを保存できます。これはオフライン Web アプリにとって非常に重要です。
キャッシュ：大量のキャッシュデータ（ファイル、画像、動画など）の保存に使用でき、アプリの読み込み速度を向上させます。
複雑なデータ処理：大量の構造化データを保存・処理する必要があるシーンに適しています。特にインデックスやクエリ機能が必要な場合に適しています。
ローカルデータベース：IndexedDB はフロントエンドアプリケーションのローカルデータベースとして使用でき、ユーザーデータ、設定情報、アプリケーションの状態などを保存できます。
IndexedDB の利点
大容量ストレージ：より大規模なデータ保存をサポートします（多くの場合、数百 MB 以上に達することがあります）。localStorage の 5MB の制限よりもはるかに大きいです。
豊富なデータ操作：トランザクション、インデックス、クエリ、バッチ処理などの複雑な操作をサポートします。
オフラインサポート：データはユーザーのデバイスに保存され、オフラインでアクセスしてサーバーに同期できます。
IndexedDB の欠点
API が複雑：localStorage などの単純なクライアント側ストレージと比較して、IndexedDB API は比較的複雑で、より多くのコードが必要です。
非同期処理：操作が非同期で実行されるため、初心者はコールバックや Promise の処理に慣れていない可能性があります。
IndexedDB は、大量の構造化データを保存する必要があるアプリケーションに非常に適しています。特に、オフラインモードをサポートしたい Web アプリや複雑なクエリを処理する Web アプリに適しています。