1. 導入: なぜIDBIndexが必要なのか
Webアプリで「ブラウザ上にデータを保存したい」と考えたとき、localStorageは便利ですが、容量制限や検索の遅さがネックになります。そこで登場するのがIndexedDBです。しかし、IndexedDBはデータを探すのが少し大変です。そんな時、特定のキーで高速に検索を可能にするのがIDBIndexです。これを使うことで、大量のデータから目的の項目を一瞬で見つけ出し、快適なユーザー体験を実現できます。
2. 基礎知識: IDBIndexとは？
IndexedDBは「オブジェクトストア」という箱にデータを入れます。通常、検索は「プライマリキー（IDなど）」でしか行えません。しかし、IDBIndexを使うと、氏名やメールアドレスなど、別の属性に対しても「インデックス（索引）」を張ることができます。本棚に例えるなら、プライマリキーが「本の管理番号」、IDBIndexが「著者の名前順リスト」のような役割を果たします。これにより、番号を知らなくても著者名で素早く本を探せるようになるのです。
3. 実装/解決策: インデックスの作成手順
IDBIndexを作成するタイミングは、データベースのバージョンアップ時（onupgradeneededイベント）に限られます。
1. データベースを開く。
2. バージョンアップ時にcreateObjectStoreでストアを作成。
3. 作成したストアに対してcreateIndexメソッドを呼び出し、検索したいプロパティを指定する。
4. サンプルプログラム: ユーザー名で検索する例
以下のコードは、ユーザー名（name）にインデックスを張り、特定の名前のユーザーを探すサンプルです。
// 1. データベース接続を開く
const request = indexedDB.open("MyDatabase", 1);
// 2. データベースの初期設定（インデックス作成）
request.onupgradeneeded = (event) => {
const db = event.target.result;
// 'users'という名前のストアを作成し、'id'をキーにする
const store = db.createObjectStore("users", { keyPath: "id" });
// 'name'プロパティに対してインデックスを作成（重複を許可しない場合はunique: true）
store.createIndex("nameIndex", "name", { unique: false });
};
// 3. データの検索を実行
request.onsuccess = (event) => {
const db = event.target.result;
const transaction = db.transaction("users", "readonly");
const store = transaction.objectStore("users");
// インデックスを使って検索
const index = store.index("nameIndex");
const searchRequest = index.get("山田太郎");
searchRequest.onsuccess = () => {
console.log("見つかったデータ:", searchRequest.result);
};
};
5. 応用・注意点: 現場で役立つポイント
注意点1: インデックスは後から追加できない
一度作成したデータベースの構造（インデックス）を変えるには、バージョン番号を上げて再構築する必要があります。設計段階でどのデータで検索するかをしっかり計画しましょう。
注意点2: 大量データでのパフォーマンス
IDBIndexは非常に高速ですが、インデックスを増やしすぎるとデータの書き込み速度が低下します。本当に検索が必要な項目だけに絞って作成するのが、パフォーマンス維持のコツです。
ヒント: 範囲検索も可能
IDBKeyRangeというオブジェクトと組み合わせれば、「Aから始まる名前の人」といった範囲指定での検索も可能です。応用範囲が広いので、ぜひ組み合わせて使ってみてください。