IndexedDBとは？ブラウザ内で使えるデータベースの基本と活用法

1. はじめに

Web開発をしていると、「データをブラウザに保存したい」と思うことはありませんか？

例えば、ログイン情報を保持したり、ユーザーの設定を記録したりする際には、cookieやlocalStorageを使うのが一般的です。しかし、localStorageは約5MBの制限があり、大量のデータを保存するには不向きです。

そこで登場するのがIndexedDBです。IndexedDBは、cookieやlocalStorageと同じくブラウザのストレージ機能ですが、大容量データを保存でき、検索やインデックス機能も備えているのが特徴です。

• オフラインでもデータを保存・利用できる
• 数百MB〜数GBのデータを管理できる
• 検索やフィルタリングが高速

そのため、オフライン対応のWebアプリや、大規模なデータを扱うアプリ（タスク管理、メモ帳、データ解析ツールなど）に最適です。Googleの「Gmail」や「Google Keep」もIndexedDBを活用しており、スムーズなデータ管理を実現しています。

ただし、IndexedDBには非同期処理の扱いが少し難しい、ブラウザごとに動作が異なる場合があるといった注意点もあります。

この記事では、IndexedDBの基本概念から具体的な使い方、localStorageとの違い、活用方法、注意点まで詳しく解説していきます。

2. IndexedDBとは

IndexedDB（インデックスド・データベース）は、ブラウザ内で使用できる非同期型のデータベース です。Webアプリケーションがローカルにデータを保存・管理するための仕組みであり、大量のデータを扱うことができます。IndexedDBの最大の特徴は、キーと値のペアでデータを管理し、高速な検索が可能なこと です。

従来の localStorage や sessionStorage とは異なり、IndexedDBは以下のような特徴を持っています。

• 大容量のデータ保存が可能 localStorage は約5MBのデータしか保存できませんが、IndexedDBは数百MB以上のデータを扱うことが可能 です（一部のブラウザではユーザー許可が必要）。
• 非同期処理によるパフォーマンス向上 localStorage は同期的にデータを処理するため、大量のデータを扱うとアプリの動作が遅くなります。一方、IndexedDBは非同期処理を採用しており、メインスレッドのブロックを防ぐ ことができます。
• 構造化データの保存が可能 localStorage は文字列（String）のみしか保存できませんが、IndexedDBはオブジェクトデータをそのまま保存 できます。これにより、JSONデータなどを直接扱うことが可能になります。
• トランザクション機能 IndexedDBはデータの一貫性を保つためのトランザクション機能 を備えています。データの追加・更新・削除をまとめて処理し、一部が失敗した場合は自動的にロールバック（元の状態に戻す）されるため、データの整合性を保ちやすくなります。

これらの特徴から、IndexedDBは単なる一時的なデータストレージではなく、本格的なクライアントサイドのデータベース として利用されています。

2-1. IndexedDBでできること

IndexedDBは、単なるデータの保存場所ではなく、高度なデータ管理が可能なクライアントサイドのデータベース です。ここでは、IndexedDBで具体的にできることを紹介します。

1. 大容量データの保存

IndexedDBの最大の利点は、大量のデータを保存できること です。一般的な localStorage や sessionStorage は約5MB程度のデータしか保存できませんが、IndexedDBでは数百MBから数GBレベルのデータを保存可能 です。ただし、ブラウザによっては一定の容量を超えるとユーザーの許可が必要になる場合があります。

2. 複雑なデータ構造の保存

localStorage では文字列（String）のみ しか保存できませんが、IndexedDBはオブジェクト形式のデータ をそのまま保存できます。そのため、JSONデータを扱うような場合に便利です。

const data = { id: 1, name: "Taro", age: 30 };
store.add(data);

3. インデックスを活用した高速検索

IndexedDBはインデックスを作成することで、高速なデータ検索 が可能です。例えば、以下のように name や age をキーとしてインデックスを作成すれば、SQLデータベースのように特定の条件で素早くデータを取得できます。

const store = db.createObjectStore("users", { keyPath: "id" });
store.createIndex("name", "name", { unique: false });
store.createIndex("age", "age", { unique: false });

4. トランザクション処理

IndexedDBはトランザクションをサポート しており、データの追加・更新・削除を安全に管理できます。万が一、途中でエラーが発生しても、処理をロールバック（元の状態に戻す）できるため、データの整合性を保ちやすいのが特徴です。

5. オフライン環境でのデータ利用

IndexedDBに保存したデータは、インターネットに接続していなくても利用可能です。そのため、オフライン対応のWebアプリケーションを開発する際に活用できます。例えば、PWA（Progressive Web Apps）では、IndexedDBを利用してオフライン時にデータを一時保存し、オンライン復帰後に同期するといった処理が可能です。

このように、IndexedDBは単なる一時的なデータストレージではなく、高度なデータ管理を可能にするクライアントサイドデータベース です。

2-2. IndexedDBが利用される場面

IndexedDBは、主にWebアプリケーションのパフォーマンス向上 や オフライン機能の実現 を目的として活用されます。ここでは、具体的なユースケースをいくつか紹介します。

1. オフライン対応アプリ（PWA）

PWA（Progressive Web Apps）の普及により、Webアプリがオフラインでも動作することが求められています。IndexedDBを活用することで、オフライン時にデータを保存し、オンラインに戻ったときにサーバーと同期する 仕組みを作ることができます。

使用例

• オフライン時にユーザーが入力したデータを一時保存し、オンライン時に自動でサーバーへ送信
• APIから取得したデータをIndexedDBにキャッシュし、次回のアクセス時に素早く表示

2. ブラウザベースのデータ管理

IndexedDBは、Webアプリケーション内でデータを管理するためのローカルデータベース としても利用されます。特に、大量のデータを扱う場合や、複雑な検索を行う場合に有効 です。

使用例

• Todoアプリやメモアプリなど、ユーザーが作成したデータをローカルに保存
• 表計算ソフトのように、大量のデータをブラウザ内で管理するアプリ
• Webベースのゲームで、プレイヤーの進行状況や設定情報をローカルに保存

3. パフォーマンス向上のためのデータキャッシュ

Webアプリでは、サーバーからデータを取得するたびにネットワーク通信が発生し、ページの読み込み速度に影響を与えます。IndexedDBを活用すれば、一度取得したデータをローカルに保存し、次回以降はキャッシュを利用して高速表示が可能 です。

使用例

• ニュースアプリで、記事データをIndexedDBに保存し、次回アクセス時に即座に表示
• Eコマースサイトで、商品一覧データをキャッシュし、スムーズな閲覧を実現
• 動画・音楽ストリーミングアプリで、一時的なメディアデータを保存し、スムーズな再生を可能にする

4. ゲームや画像編集ツール

ブラウザ上で動作するゲームや画像編集ツールでは、IndexedDBを利用してユーザーの設定や進行状況を保存 できます。また、Web上での大容量データの管理が求められる場面でも活用されています。

使用例

• Webゲームでのセーブデータ保存（プレイヤーの進行状況やスコア）
• 画像編集ツールでの編集中データの一時保存
• 3Dモデリングツールのプロジェクトデータの管理

5. フォームの一時保存

長文入力が必要なフォームやアンケートでは、途中でブラウザを閉じたり通信が切れたりすると、入力データが失われることがあります。IndexedDBを使うことで、ユーザーが入力したデータを一時的に保存し、再開時に復元できる ようになります。

使用例

• 問い合わせフォームやブログの投稿フォームの下書きを自動保存
• チャットアプリで、送信前のメッセージを一時保存
• 学習アプリで、テストの解答データを保存し、途中から再開できるようにする

このように、IndexedDBは大容量データの保存 や オフライン対応、データのキャッシュ など、さまざまな用途で活用されています。

次のセクションでは、IndexedDBのデータ保存容量と破棄基準 について詳しく解説します。

2-3. データの保存容量と破棄基準

IndexedDBは、大容量データを扱うことができるのが強みですが、保存できるデータの上限 や 削除される条件 についても理解しておく必要があります。ブラウザごとに異なる仕様を持つため、Webアプリケーション開発においては、これらの要件を考慮した設計が求められます。

1. IndexedDBのデータ保存容量

IndexedDBのデータ保存容量はブラウザやデバイスによって異なる ため、一概に「〇〇MBまで保存可能」とは言えません。ただし、一般的なルールとして以下のような制約が存在します。

• クォータ制限（Quota Limit） IndexedDBは、ブラウザごとに特定の割合（クォータ） までしか使用できません。多くのブラウザでは、ストレージ全体の一定割合 を超えると、ユーザーの許可が必要になります。
• ストレージの種類による制限
  • 永続的（persistent）ストレージ：ユーザーが手動で削除しない限り、データは保持される（オプトイン方式）。
  • 一時的（temporary）ストレージ：デバイスのストレージが不足した際に、自動で削除される可能性がある（デフォルト設定）。

📌 注意点

• モバイル端末では、PCよりも保存容量が制限されることが多い。
• navigator.storage.estimate() を使うと、現在の使用量と残りの容量を取得できる。

navigator.storage.estimate().then(({ quota, usage }) => {
  console.log(`使用量: ${usage} バイト`);
  console.log(`利用可能な最大容量: ${quota} バイト`);
});

2. IndexedDBのデータ削除（破棄基準）

IndexedDBのデータは通常、ユーザーが手動で削除するまで保持 されます。しかし、以下の状況では自動的に削除される可能性があります。

• ブラウザのストレージ管理による削除
  • 一時的ストレージ（temporary）を使用している場合、ストレージが逼迫するとブラウザが自動で削除する ことがある。
  • 特に、モバイル端末では、ストレージが不足するとIndexedDBのデータが消える可能性が高い。
• プライベートブラウジングモード（シークレットモード）
  • ChromeやFirefoxでは、シークレットモードでIndexedDBにデータを保存してもブラウザを閉じると消去 される。
• ユーザーがストレージを削除
  • ブラウザの「サイトデータの消去」機能を利用すると、IndexedDBのデータも削除される。

Safariの制限（ITPの影響）

Safariでは、Intelligent Tracking Prevention（ITP） により、IndexedDBのデータが最長7日間で削除 されることがある（詳細は後述）。

3. データ削除を防ぐための対策

IndexedDBのデータが意図せず削除されることを防ぐため、以下の対策を検討するとよいでしょう。

永続的（persistent）ストレージをリクエストする

Chromeでは、navigator.storage.persist() を利用することで、IndexedDBのデータを「永続的ストレージ」に保存できます。これにより、ストレージ逼迫時の自動削除を防ぐことができます。

navigator.storage.persist().then((persistent) => {
  console.log(persistent ? "永続的ストレージとして設定されました" : "永続的ストレージのリクエストが拒否されました");
});

データを定期的にバックアップする

IndexedDBのデータはブラウザの仕様により削除されることがあるため、定期的にサーバーに同期を取る のがベストです。特に、重要なデータはIndexedDBだけでなく、クラウドストレージやサーバーにも保存するように設計しましょう。

ストレージ使用量を定期的に監視する

navigator.storage.estimate() を活用して、IndexedDBのデータ量を監視し、ユーザーに通知する仕組みを組み込むと、意図しない削除を防ぐことができます。

2-4. IndexedDBとlocalStorageの違い

IndexedDBとlocalStorageは、どちらもクライアントサイドでデータを保存するための仕組みですが、それぞれの特徴や用途には大きな違いがあります。どちらを選ぶべきか適切に判断するために、それぞれの特性を比較してみましょう。

1. 基本的な違い

2. データ容量とパフォーマンス

• IndexedDB は数百MBから数GB に及ぶ大容量データを保存でき、複雑なデータ構造 にも対応しています。そのため、画像、動画、JSONデータなどの保存にも適している 。
• localStorage は約5MB程度 しか保存できず、容量を超えるとエラーが発生する。小規模なデータ（例えば、ユーザーの設定情報やテーマ設定など）を扱うのに適している。

📌 注意点

• localStorageは同期的に処理される ため、処理が完了するまでJavaScriptの実行がブロックされる。そのため、大量のデータを保存・取得するとパフォーマンスの低下 を招く可能性がある。
• IndexedDBは非同期で処理 されるため、データ操作時にメインスレッドをブロックしない。

3. データ構造の違い

• IndexedDB はリレーショナルデータベースのように、オブジェクトストア を使用してデータを管理する。各データはキーと値のペアで保存されるが、値にはオブジェクト（JSON形式） を含めることができる。
• localStorage は単純なキーと値のペア でデータを保存する。しかし、値はすべて文字列 として保存されるため、オブジェクトを保存する際は JSON.stringify() で変換する必要がある。

例：localStorage

localStorage.setItem("user", JSON.stringify({ name: "Alice", age: 25 }));
console.log(JSON.parse(localStorage.getItem("user"))); // { name: "Alice", age: 25 }

例：IndexedDB

let request = indexedDB.open("MyDatabase", 1);

request.onsuccess = function(event) {
  let db = event.target.result;
  let transaction = db.transaction(["users"], "readwrite");
  let store = transaction.objectStore("users");
  store.put({ id: 1, name: "Alice", age: 25 });
};

4. トランザクションとデータの整合性

• IndexedDB は ACID（原子性、一貫性、独立性、耐久性） を保証するトランザクションをサポートしているため、データの整合性を保ちつつ安全に操作できる。
• localStorage にはトランザクションの概念がないため、複数の処理が同時に行われた場合にデータの競合が発生する可能性がある。

5. ユースケース別の選択

3. IndexedDBの基本的な使い方

IndexedDBはWebブラウザ上で大容量データを保存・管理できるデータベースですが、使い方にはいくつかのポイントがあります。

ここでは、データベースの作成方法、データの追加・取得・削除、そして簡単なサンプルコード を紹介します。

3-1. データベースの作成の仕方

IndexedDBを使用するには、まずデータベースを作成する必要があります。

データベースはバージョン管理 されており、後からスキーマ変更（テーブル追加・削除）を行う場合にはバージョンを更新する仕組みです。

データベース作成の基本手順

1. indexedDB.open("データベース名", バージョン番号) でデータベースを開く。
2. onupgradeneeded イベントで、オブジェクトストア（テーブルに相当）を作成。
3. onsuccess でデータベースのインスタンスを取得。
4. onerror でエラーハンドリング。

具体的なコード

// データベースを開く（MyDatabaseという名前、バージョン1）
let request = indexedDB.open("MyDatabase", 1);

request.onupgradeneeded = function(event) {
  let db = event.target.result;

  // users というオブジェクトストア（テーブル）を作成し、主キーとして "id" を指定
  let store = db.createObjectStore("users", { keyPath: "id" });

  console.log("データベースを作成しました");
};

request.onsuccess = function(event) {
  let db = event.target.result;
  console.log("データベースを開きました");
};

request.onerror = function(event) {
  console.error("データベースの作成に失敗しました", event.target.error);
};

ポイント

• indexedDB.open() でデータベースを開く。初回またはバージョン変更時に onupgradeneeded が実行 される。
• createObjectStore() でオブジェクトストア（テーブル）を作成。keyPath を指定すると、各オブジェクトの特定のプロパティが主キーになる。

3-2. データの追加、読み取り、削除

IndexedDBでは、データを操作するためにトランザクション を使います。

トランザクションはデータの整合性を保つためにあり、読み取り専用 (readonly) と読み書き可能 (readwrite) の2種類があります。

データの追加

データを追加または更新するには、トランザクションを作成し、オブジェクトストアの add() または put() を使う。

function addUser(db, user) {
  let transaction = db.transaction(["users"], "readwrite"); // 書き込み可能なトランザクションを作成
  let store = transaction.objectStore("users");

  let request = store.add(user); // 新規データを追加

  request.onsuccess = function() {
    console.log("データを追加しました:", user);
  };

  request.onerror = function(event) {
    console.error("データの追加に失敗しました", event.target.error);
  };
}

// データベースを開いてデータを追加する
let request = indexedDB.open("MyDatabase", 1);
request.onsuccess = function(event) {
  let db = event.target.result;
  addUser(db, { id: 1, name: "Alice", age: 25 });
};

ポイント

• add() はキーが重複するとエラー になる。
• 既存データを更新する場合は put() を使用 する。

データの読み取り

データを取得するには、オブジェクトストアの get() を使う。

function getUser(db, userId) {
  let transaction = db.transaction(["users"], "readonly"); // 読み取り専用トランザクション
  let store = transaction.objectStore("users");

  let request = store.get(userId); // id でデータを取得

  request.onsuccess = function() {
    console.log("取得したデータ:", request.result);
  };

  request.onerror = function(event) {
    console.error("データの取得に失敗しました", event.target.error);
  };
}

// データベースを開いてデータを取得する
let request = indexedDB.open("MyDatabase", 1);
request.onsuccess = function(event) {
  let db = event.target.result;
  getUser(db, 1);
};

ポイント

• get() は指定したキー（id）に対応するデータを取得する。
• request.result にデータが入る。

データの削除

データを削除するには、オブジェクトストアの delete() を使う。

function deleteUser(db, userId) {
  let transaction = db.transaction(["users"], "readwrite"); // 書き込み可能なトランザクション
  let store = transaction.objectStore("users");

  let request = store.delete(userId); // id でデータを削除

  request.onsuccess = function() {
    console.log("データを削除しました:", userId);
  };

  request.onerror = function(event) {
    console.error("データの削除に失敗しました", event.target.error);
  };
}

// データベースを開いてデータを削除する
let request = indexedDB.open("MyDatabase", 1);
request.onsuccess = function(event) {
  let db = event.target.result;
  deleteUser(db, 1);
};

ポイント

• delete() を使うと、指定したキーのデータが削除される。

3-3. サンプルコード

ここまでの処理をまとめて、データベースの作成、データの追加・取得・削除を一つのコードで実装 します。

let db;

function initDB() {
  let request = indexedDB.open("MyDatabase", 1);

  request.onupgradeneeded = function(event) {
    db = event.target.result;
    db.createObjectStore("users", { keyPath: "id" });
  };

  request.onsuccess = function(event) {
    db = event.target.result;
    console.log("データベースを開きました");

    addUser({ id: 1, name: "Alice", age: 25 });
    getUser(1);
    deleteUser(1);
  };

  request.onerror = function(event) {
    console.error("データベースの作成に失敗しました", event.target.error);
  };
}

function addUser(user) {
  let transaction = db.transaction(["users"], "readwrite");
  let store = transaction.objectStore("users");
  store.add(user);
}

function getUser(userId) {
  let transaction = db.transaction(["users"], "readonly");
  let store = transaction.objectStore("users");
  let request = store.get(userId);
  request.onsuccess = () => console.log("取得:", request.result);
}

function deleteUser(userId) {
  let transaction = db.transaction(["users"], "readwrite");
  let store = transaction.objectStore("users");
  store.delete(userId);
}

initDB();

4. IndexedDBを使う上での注意点

IndexedDBは便利なクライアントサイドのデータベースですが、ブラウザごとの実装差や制限 に注意が必要です。

ここでは、ブラウザ別の違い、端末別の影響、SafariのITP（Intelligent Tracking Prevention）の影響 について詳しく解説します。

4-1. 端末別の違い

デスクトップとモバイルでIndexedDBの動作には違いがある ため、特にモバイル端末では注意が必要です。

モバイル端末でのIndexedDBの制限

1. ストレージの制限が厳しい
   • モバイルでは、データ保存量がPCよりも少ない（詳細は「2-3. データの保存容量と破棄基準」で解説）。
   • 一定量を超えると、ブラウザが自動的にデータを削除することがある。
2. バックグラウンドでデータが削除される可能性
   • iOS（特にSafari）では、IndexedDBのデータがシステムによって自動的にクリアされる ことがある。
   • 特にストレージ不足のときに削除されやすい。
3. プライベートブラウジングモードではIndexedDBが無効
   • iOSのSafariでは、プライベートモードでIndexedDBが完全に無効 になる。
   • ChromeのシークレットモードではIndexedDBのデータがブラウザ終了時に削除 される。

4-2. SafariのITPの影響

AppleのIntelligent Tracking Prevention（ITP） は、ユーザーのプライバシー保護を目的とした仕組みですが、IndexedDBにも影響を与える ため注意が必要です。

ITPによるIndexedDBの制限

1. 一定期間アクセスがないとデータが削除される
   • Safariでは、IndexedDBのデータが7日間アクセスがないと削除される可能性 がある。
   • ユーザーがサイトを訪れなくなると、自動的にIndexedDBのデータも失われる。
2. サードパーティの環境ではIndexedDBが制限される
   • クロスサイト（異なるドメイン間）のデータ保存が制限 される。
   • 例えば、example.com のページから another-site.com のIndexedDBを使うことはブロックされる。
3. プライベートモードではIndexedDBが完全無効
   • iOSのSafariでは、プライベートブラウジング中にIndexedDBが一切動作しない。

IndexedDBを安全に使うための対策

上記の制限を考慮し、IndexedDBを安定して運用するための方法を紹介します。

対策①：データのバックアップを取る

IndexedDBのデータはブラウザによって削除される可能性がある ため、ローカルファイルやサーバーにバックアップ する仕組みを用意すると安心です。

例えば、データのエクスポート機能 を作成し、ユーザーにダウンロードさせる方法があります。

function exportData(db, storeName) {
  let transaction = db.transaction([storeName], "readonly");
  let store = transaction.objectStore(storeName);
  let request = store.getAll();

  request.onsuccess = function() {
    let data = JSON.stringify(request.result);
    let blob = new Blob([data], { type: "application/json" });
    let link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = "backup.json";
    link.click();
  };
}

このコードを実行すると、IndexedDBのデータがJSON形式でダウンロード可能に なる。

対策②：ストレージの使用状況を監視する

IndexedDBが削除されるリスクを減らすため、ストレージの使用状況を定期的に監視 するとよい。

以下のコードで使用可能なストレージ容量を確認 できる。

navigator.storage.estimate().then(estimate => {
  console.log(`使用中: ${estimate.usage} バイト`);
  console.log(`最大容量: ${estimate.quota} バイト`);
});

ストレージの上限が近づいたら、データ整理やバックアップを促すUIを表示するのも有効。

対策③：Safariの制限を考慮した設計

• 7日間ルールを回避するために、定期的にIndexedDBへアクセス する（例えば、サイト訪問時にデータを読み書きする）。
• サーバー側でデータを同期できる設計にする（IndexedDBのデータが削除されても復元できるようにする）。
• シークレットモードではIndexedDBが無効になることを想定し、エラーハンドリングを実装 する。

let db;
let request = indexedDB.open("MyDatabase", 1);

request.onerror = function(event) {
  console.error("IndexedDBが利用できません。別の方法を試してください。");
};

IndexedDBが無効な場合は、localStorageやサーバー保存に切り替える設計を検討するのがよい。

5. まとめ

ここまでIndexedDBの基本から応用、利用上の注意点まで解説してきました。

最後に、IndexedDBの実用性について考えながら、「結局IndexedDBは使えるのか？」 という点をまとめていきます。

5-1. IndexedDBは使える？

IndexedDBは、ブラウザ上で大量のデータを扱う 必要がある場合に非常に有用な技術です。

特に、以下のような場面では、IndexedDBの活用が推奨されます。

IndexedDBが適しているケース

• オフライン対応が必要なWebアプリ → 例：Google Docs、TrelloなどのPWA（プログレッシブウェブアプリ）
• 大量のデータをローカルに保存して扱いたい場合 → 例：ローカルでキャッシュを活用するニュースアプリや、ゲームのセーブデータ
• Webアプリで高速な検索を実現したい場合 → 例：クライアントサイドでフィルタリングやインデックス検索を行うデータ管理ツール

IndexedDBが向いていないケース

一方で、IndexedDBを使うことで逆に不都合が生じる場合もあります。

• 短期間しか保持しないデータ（一時的なユーザーデータなど） → localStorageやsessionStorageの方が適している
• シンプルなキー・バリューストアが必要なだけ → localStorageで十分
• すべてのデバイスや環境で安定した動作を保証したい → IndexedDBはSafariやモバイル環境で制限があるため、サーバー側でデータ管理した方がよい場合も

今後IndexedDBを使うべきか？

IndexedDBは非常に強力なデータベースですが、すべてのケースで最適とは限りません。

「どのデータをどこに保存すべきか？」を考え、用途に応じた適切なストレージを選択すること が重要です。

IndexedDBの活用を検討すべきポイント

• 大量データの保存が必要か？
• クライアントサイドでの検索・フィルタリングが必要か？
• オフラインでの動作が求められるか？

これらの条件に当てはまる場合、IndexedDBは優れた選択肢となるでしょう。

逆に、データの永続性や互換性に不安がある場合は、サーバーサイドのデータベースや他のストレージ技術を併用することも検討すべき です。

5-2.最後に

IndexedDBは、ブラウザ環境でリッチなWebアプリを構築するための強力なツール ですが、ブラウザごとの仕様や制限もあるため、適切な使い方を考える必要があります。

特に、SafariのITPの影響やモバイル環境でのデータ削除 などを考慮し、データのバックアップや代替手段を用意することが重要 です。

IndexedDBを正しく活用すれば、快適でスムーズなユーザー体験を実現できる ため、目的に応じて最適な設計を行いましょう。

Q&A

Q1. IndexedDBって、どんな技術を参考にして作られたの？

A: IndexedDBは、従来のリレーショナルデータベース（SQL）とは違い、NoSQL型のデータベースの考え方をベースに作られています！

• SQLのように「テーブル」を作らず、オブジェクトストア（キー・バリュー型のデータ管理）を使う。
• トランザクション（データの一括処理）をサポートしているので、安全にデータを管理できる。
• インデックス機能を持ち、検索の高速化が可能！

IndexedDBの発想は、Googleが開発した「Bigtable」や「MongoDB」といったNoSQLデータベースの概念に近いものです！

Q2. IndexedDBのデータって、どこに保存されているの？

A: IndexedDBのデータは、ブラウザごとの専用ストレージに保存されています。

保存される場所（ブラウザ別）

• Google Chrome → C:\\Users\\ユーザー名\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\IndexedDB
• Firefox → C:\\Users\\ユーザー名\\AppData\\Roaming\\Mozilla\\Firefox\\Profiles\\プロファイル名\\storage\\default
• Safari → ~/Library/Safari/Databases
• Edge → Chromeと同じ場所

• ブラウザをアンインストールするとIndexedDBのデータも消える ので、重要なデータはサーバー側にも保存するのが安全！
• 「シークレットモード（プライベートブラウジング）」ではIndexedDBは動作しない（保存されない）。

Q3. IndexedDBの「バージョン番号」って何のためにあるの？

A: IndexedDBは、バージョン番号を使ってデータ構造の変更を管理します。

バージョンの役割

• 最初にデータベースを作るとき → indexedDB.open("MyDatabase", 1);（バージョン1）
• データの構造を変更したいとき（例: 新しいオブジェクトストアを追加） バージョンを上げると onupgradeneeded イベントが実行され、データ構造の変更ができる！

let request = indexedDB.open("MyDatabase", 2); // バージョンを2にアップグレード 
request.onupgradeneeded = function(event) { 
  let db = event.target.result; 
  db.createObjectStore("newStore", { keyPath: "id" }); 
};

• 一度設定したバージョン番号は元に戻せない（例: 3 → 2 にはできない）。
• データ構造を変更したい場合は、必ずバージョンを上げる 必要がある。
• 複数のタブで同じIndexedDBを開くと「バージョン競合」が起こる ので、注意が必要！

IndexedDBは、ただのデータ保存機能ではなく、進化し続ける「ブラウザ内データベース」！
バージョン管理をうまく活用すると、より柔軟なデータ管理ができます！