IndexedDB の使い方完全な CRUD 操作に関するガイド

IndexedDB の包括的なガイド: クライアント側ストレージのブラウザーのパワーハウス

Web アプリケーションがより洗練されるにつれて、効率的なクライアント側のストレージ ソリューションの必要性が高まっています。 IndexedDB は、大量の構造化データを保存するための低レベル API であり、堅牢でオフライン対応のアプリケーションを作成したい Web 開発者、ソフトウェア エンジニア、Web 愛好家にとって強力なツールです。

このブログでは、IndexedDB とは何なのか、どのように機能するのか、そしてそれを効果的に使用する方法を実際の例とともに探っていきます。プログレッシブ Web アプリ (PWA)、複雑なダッシュボード、ゲームのいずれを構築している場合でも、IndexedDB はデータをシームレスに管理するのに役立ちます。

---

IndexedDB とは何ですか?

IndexedDB は、ファイルや BLOB などの大量の構造化データを保存するために設計されたブラウザベースの NoSQL データベースです。 Cookie や localStorage とは異なり、IndexedDB ではデータを構造化形式で保存し、インデックスを使用してクエリを実行できるため、複雑なユースケースに最適です。

IndexedDB の主な機能:

• 非同期操作: IndexedDB との対話はノンブロッキングであり、スムーズなパフォーマンスを保証します。
• 構造化データ ストレージ: データをキーと値のペアで保存し、インデックスを使用した効率的なクエリを可能にします。
• オフライン機能: データはローカルに保存されるため、インターネット接続がなくてもアクセスできます。
• 大容量ストレージ制限: Cookie や localStorage と比較して、より多くのストレージ容量を提供します。

IndexedDB の使用例:

• プログレッシブ Web アプリ: シームレスなエクスペリエンスのためにオフライン データを保存します。
• 大規模データ ストレージ: ユーザー設定やアプリケーションの状態などの大規模なデータセットを保存します。
• キャッシュ: パフォーマンスを向上させるために API 応答をキャッシュします。

---

IndexedDB の使用を開始する

IndexedDB はどのように機能しますか?

IndexedDB は、以下で構成されるデータベース構造上で動作します。

• データベース: データの最上位コンテナ。
• オブジェクト ストア: データが保存されるテーブル。それぞれは一意の名前で識別されます。
• インデックス: オブジェクト ストア内のクエリを最適化する構造。

IndexedDB API: 基本操作

IndexedDB の主な操作は次のとおりです。

1. データベースを開く: データベースを作成またはアクセスします。
2. オブジェクト ストアの作成: データのストレージを定義します。
3. CRUD 操作の実行: データの追加、読み取り、更新、削除。
4. トランザクションの使用: データ操作をアトミックに管理します。

---

例 1: データベースを作成して開く

ここでは、オブジェクト ストア ユーザーを使用して MyDatabase という IndexedDB データベースを作成する方法を説明します。

const dbName = "MyDatabase";
const dbVersion = 1; // Versioning is required for schema updates.

const request = indexedDB.open(dbName, dbVersion);

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

  // Create an object store named 'users' with 'id' as the keyPath
  if (!db.objectStoreNames.contains("users")) {
    db.createObjectStore("users", { keyPath: "id" });
  }
  console.log("Database setup complete");
};

request.onsuccess = function (event) {
  const db = event.target.result;
  console.log("Database opened successfully");
};

request.onerror = function (event) {
  console.error("Error opening database:", event.target.errorCode);
};

説明:

• indexedDB.open メソッドはデータベースを開くか作成します。

• onupgradeneeded イベントは、新しいデータベースを作成するとき、またはそのバージョンをアップグレードするときにトリガーされます。

• users という名前のオブジェクト ストアが、主キーとして id を使用して作成されます。

---

例 2: オブジェクト ストアへのデータの追加

トランザクションを使用してオブジェクト ストアにデータを追加できます。

function addUser(id, name, email) {
  const request = indexedDB.open("MyDatabase", 1);

  request.onsuccess = function (event) {
    const db = event.target.result;
    const transaction = db.transaction("users", "readwrite");
    const objectStore = transaction.objectStore("users");

    const user = { id, name, email };
    const addRequest = objectStore.add(user);

    addRequest.onsuccess = function () {
      console.log("User added:", user);
    };

    addRequest.onerror = function (event) {
      console.error("Error adding user:", event.target.errorCode);
    };
  };
}

// Add a new user
addUser(1, "John Doe", "john.doe@example.com");

説明:

• トランザクションは、データを変更するために読み書きモードで作成されます。

• add メソッドは、ユーザーのオブジェクト ストアにデータを挿入します。

---

例 3: オブジェクト ストアからのデータの読み取り

get メソッドを使用してデータを取得するか、すべてのエントリを反復処理します。

function getUser(id) {
  const request = indexedDB.open("MyDatabase", 1);

  request.onsuccess = function (event) {
    const db = event.target.result;
    const transaction = db.transaction("users", "readonly");
    const objectStore = transaction.objectStore("users");

    const getRequest = objectStore.get(id);

    getRequest.onsuccess = function () {
      if (getRequest.result) {
        console.log("User found:", getRequest.result);
      } else {
        console.log("User not found");
      }
    };

    getRequest.onerror = function (event) {
      console.error("Error retrieving user:", event.target.errorCode);
    };
  };
}

// Get user with ID 1
getUser(1);

説明:

• get メソッドは、キーによって特定のレコードを取得します。

• データの取得は非同期であるため、成功ハンドラーとエラー ハンドラーが使用されます。

---

例 4: IndexedDB 内のデータの更新

put メソッドを使用して既存のレコードを更新します。

function updateUser(id, updatedData) {
  const request = indexedDB.open("MyDatabase", 1);

  request.onsuccess = function (event) {
    const db = event.target.result;
    const transaction = db.transaction("users", "readwrite");
    const objectStore = transaction.objectStore("users");

    const putRequest = objectStore.put({ ...updatedData, id });

    putRequest.onsuccess = function () {
      console.log("User updated:", { ...updatedData, id });
    };

    putRequest.onerror = function (event) {
      console.error("Error updating user:", event.target.errorCode);
    };
  };
}

// Update user with ID 1
updateUser(1, { name: "Johnathan Doe", email: "johnathan.doe@example.com" });

---

例 5: IndexedDB のデータの削除

delete メソッドを使用してレコードを削除します。

function deleteUser(id) {
  const request = indexedDB.open("MyDatabase", 1);

  request.onsuccess = function (event) {
    const db = event.target.result;
    const transaction = db.transaction("users", "readwrite");
    const objectStore = transaction.objectStore("users");

    const deleteRequest = objectStore.delete(id);

    deleteRequest.onsuccess = function () {
      console.log("User deleted with ID:", id);
    };

    deleteRequest.onerror = function (event) {
      console.error("Error deleting user:", event.target.errorCode);
    };
  };
}

// Delete user with ID 1
deleteUser(1);

---

IndexedDB と他のストレージ ソリューションの比較

Feature	IndexedDB	localStorage	sessionStorage
Storage Limit	Several MB to GB	5 MB (approx)	5 MB (approx)
Data Format	Key-value pairs	Key-value pairs	Key-value pairs
Asynchronous	Yes	No	No
Structured Data	Yes	No	No

---

IndexedDB を使用するためのベスト プラクティス

• トランザクションを適切に使用する: 原子性を確保するために、トランザクション内のデータ操作を常に管理します。

• エラーを適切に処理する: デバッグとユーザー フィードバックを改善するためにエラー ハンドラーを実装します。

• バージョン管理: スキーマの変更を管理するために、データベースのバージョンを慎重に増加させます。

• オフラインのテスト シナリオ: IndexedDB はオフライン機能によく使用されます。インターネット接続がなくても期待どおりに機能することを確認してください。

---

結論

IndexedDB は、クライアント側のデータ ストレージ用の強力なツールであり、localStorage などの従来のストレージ方法をはるかに上回る機能を提供します。構造化データ、大容量ストレージ、オフライン機能をサポートする IndexedDB は、最新の Web アプリケーションを構築するために不可欠なテクノロジーです。

重要なポイント:

• IndexedDB は、大規模で複雑なデータセットをローカルに保存するのに最適です。

• トランザクションは、IndexedDB でのデータ操作管理の中心となります。

• 堅牢なオフライン サポートを提供し、Progressive Web Apps の基礎となります。

IndexedDB をマスターすることで、優れたパフォーマンスとユーザー エクスペリエンスを備えた、スケーラブルなオフライン ファーストのアプリケーションを構築できます。今すぐプロジェクトで IndexedDB の実験を始めてください!

以上がIndexedDB の使い方完全な CRUD 操作に関するガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。