【JS応用｜豆知識】ブラウザで本格的なDBを！IndexedDBの「IDBObjectStore」を使いこなそう

導入：ブラウザの限界を超えるデータ管理

Webアプリケーションで複雑なデータをローカルに保存したいと考えたとき、LocalStorageでは容量制限やデータ型の制約が壁になります。そこで役立つのがIndexedDBです。その中心的な役割を担うのが「IDBObjectStore」です。これは、RDBで言うところの「テーブル」に相当するもので、構造化された大量のデータをブラウザ上に安全に保存・管理するために不可欠な技術です。

基礎知識：IDBObjectStoreとは何か

IDBObjectStoreは、IndexedDBのデータベース内に作成されるデータのコンテナです。以下の特徴があります。
・キーと値のペア：各データはキーによって識別され、JavaScriptのオブジェクトをそのまま保存できます。
・トランザクション：データの操作は常にトランザクション内で行われるため、データの整合性が保たれます。
・非同期処理：重いデータ操作でもブラウザのメインスレッドをブロックしません。

実装・解決策：ストアを作成しデータを操作する

IDBObjectStoreを利用するには、まずデータベースを開き、バージョン更新イベント（onupgradeneeded）の中でストアを作成します。その後、トランザクションを開始してデータの追加や取得を行います。

サンプルプログラム：データの追加と取得の実装例

以下は、ユーザー情報を保存・取得するシンプルな実装例です。

// 1. データベースを開く
const request = indexedDB.open("MyDatabase", 1);

// 2. データベースの初期設定（ストアの作成）
request.onupgradeneeded = (event) => {
  const db = event.target.result;
  // 'users'という名前のストアを作成し、idをキーにする
  if (!db.objectStoreNames.contains("users")) {
    db.createObjectStore("users", { keyPath: "id" });
  }
};

// 3. データの追加
request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction(["users"], "readwrite");
  const store = transaction.objectStore("users");

  // データを追加
  store.add({ id: 1, name: "田中太郎", email: "tanaka@example.com" });

  // 4. データの取得
  const getRequest = store.get(1);
  getRequest.onsuccess = () => {
    console.log("取得したデータ:", getRequest.result);
  };
};

応用・注意点：現場でハマりやすいポイント

1. トランザクションのスコープ：トランザクションは「どのストアにアクセスするか」を明示する必要があります。複数のストアを操作する場合は、配列で指定しましょう。
2. 非同期の管理：IndexedDBのAPIは非常に低レイヤーで、コールバック地獄に陥りやすいです。実際のプロジェクトでは、Promiseベースでラップされたライブラリ（idbなど）を使用することを強く推奨します。
3. キーの選択：keyPath（自動でキーを生成する機能）を利用すると管理が楽になります。データの性質に合わせて、autoIncrementオプションを活用してください。

これらを理解することで、オフライン対応のWebアプリや、大量のデータを扱うフロントエンドの設計が格段に柔軟になります。ぜひ活用してみてください。