IndexedDBの概要

IndexedDBは、ブラウザが提供するローカルストレージの仕組みであり、大量の構造化されたデータを効率的に保存および検索するために設計されています。この技術は、非同期処理をサポートしており、オブジェクトや配列、バイナリデータまで保存可能で、インデックスを用いて高速なクエリ処理が行えます。

IndexedDBの主な特徴

• 大容量データの保存：localStorageよりも大規模なデータ（数十MBからGB単位）を保存できます。
• 非同期処理：UIスレッドをブロックしない非同期処理を採用。
• オブジェクトベースの保存：JavaScriptオブジェクトを直接保存可能。
• トランザクション対応：複数の操作を一括して実行し、整合性を保証。
• インデックスのサポート：特定のフィールドにインデックスを設定することで検索性能を向上。

IndexedDBの基本的な使い方

1. データベースのオープン

indexedDB.open() を使用して、データベースを開くか新規に作成します。

const dbOpenRequest = indexedDB.open('sampleDB', 1);
  

イベントハンドラ

• onupgradeneeded：データベース作成またはバージョンアップ時に発生。
• onsuccess：データベースのオープン成功時に発生。
• onerror：エラー発生時に発生。

コード例

const dbOpenRequest = indexedDB.open('sampleDB', 1);

dbOpenRequest.onupgradeneeded = (e) => {
  const db = e.target.result;
  if (!db.objectStoreNames.contains('userData')) {
    const store = db.createObjectStore('userData', { keyPath: 'userId' });
    store.createIndex('userName', 'name', { unique: false });
  }
};

dbOpenRequest.onsuccess = (e) => {
  const db = e.target.result;
  console.log('データベース接続成功');
};

dbOpenRequest.onerror = (e) => {
  console.error('データベース接続失敗', e.target.error);
};
  

2. データの追加

トランザクションを開始し、オブジェクトストアにデータを追加します。

function addUserData(db, user) {
  const tx = db.transaction('userData', 'readwrite');
  const store = tx.objectStore('userData');
  const request = store.put(user);

  request.onsuccess = () => {
    console.log('データ追加成功');
  };

  request.onerror = (e) => {
    console.error('データ追加失敗', e.target.error);
  };
}
  

3. データの取得

主キーを指定してデータを取得します。

function fetchUser(db, userId) {
  const tx = db.transaction('userData', 'readonly');
  const store = tx.objectStore('userData');
  const request = store.get(userId);

  request.onsuccess = (e) => {
    const result = e.target.result;
    if (result) {
      console.log('取得データ:', result);
    } else {
      console.log('該当データなし');
    }
  };

  request.onerror = (e) => {
    console.error('データ取得失敗', e.target.error);
  };
}
  

4. データの削除

主キーを指定してデータを削除します。

function removeUser(db, userId) {
  const tx = db.transaction('userData', 'readwrite');
  const store = tx.objectStore('userData');
  const request = store.delete(userId);

  request.onsuccess = () => {
    console.log('データ削除成功');
  };

  request.onerror = (e) => {
    console.error('削除失敗', e.target.error);
  };
}
  

5. カーソルによる全データの取得

カーソルを使用して、オブジェクトストア内の全データを走査します。

function listAllUsers(db) {
  const tx = db.transaction('userData', 'readonly');
  const store = tx.objectStore('userData');
  const request = store.openCursor();

  request.onsuccess = (e) => {
    const cursor = e.target.result;
    if (cursor) {
      console.log('データ:', cursor.value);
      cursor.continue();
    } else {
      console.log('全データ取得完了');
    }
  };

  request.onerror = (e) => {
    console.error('走査失敗', e.target.error);
  };
}
  

まとめ

IndexedDBは、大量の構造化データを効率的に保存・検索するための強力な仕組みです。トランザクションやインデックスにより、複雑なデータ操作が可能で、オフラインアプリケーションの実装にも適しています。