【JavaScript】IndexedDBの基本と使い方について

JavaScript(ジャバスクリプト)

2024.06.08

この記事は約7分で読めます。

IndexedDB はウェブブラウザで大量の構造化データをクライアントサイドに保存し、ネットワーク使用が無い場合でも高速にクエリできるようにする JavaScript の低レベル API です。以下に IndexedDB の基本的な使い方を説明します：

データベースの開設とアップグレード
データの追加(addBook)
コードの説明
データの読み出し(getBook)
データの更新と削除（updateBook）
まとめ

データベースの開設とアップグレード

IndexedDB は、データベースを開く際にそのバージョンを指定します。データベースが存在しない場合は新しく作成され、存在するが開こうとしているバージョンが現在のバージョンより高い場合はアップグレードが行われます。

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

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

  // オブジェクトストアを作成
  if (!db.objectStoreNames.contains("books")) {
    db.createObjectStore("books", { keyPath: "id" });
  }
};

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

request.onerror = function(event) {
  console.error("Database error: " + event.target.errorCode);
};

データの追加(addBook)

オブジェクトストアにデータを追加するには、トランザクションを開始し、適切なオブジェクトストアを取得してデータを追加します。

function addBook(book) {
  const transaction = db.transaction(["books"], "readwrite");
  const store = transaction.objectStore("books");
  const request = store.add(book);

  request.onsuccess = function() {
    console.log("Book added to the database", book);
  };

  request.onerror = function(event) {
    console.error("Error adding book: ", event.target.error.message);
  };
}

コードの説明

変数の宣言:

let db;

データベースの開き方:

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

MyDatabaseという名前のデータベースをバージョン1で開こうとしています。
openメソッドはIDBOpenDBRequestオブジェクトを返し、そのオブジェクトを通じてデータベースに関するイベントを監視します。

データベースのアップグレード時に実行されるイベントハンドラ:

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

  // オブジェクトストアを作成
  if (!db.objectStoreNames.contains("books")) {
    db.createObjectStore("books", { keyPath: "id" });
  }
};

データベースのバージョンが上がるか、新規にデータベースが作成されるときに呼び出されます。
db変数にデータベースのインスタンスを格納します。
objectStoreNamesに「books」が含まれていない場合、新たにオブジェクトストアを作成します。
keyPath: "id"は、このオブジェクトストアのキーとしてidフィールドを使用することを指定しています。

データベースのオープンが成功したときに実行されるイベントハンドラ:

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

データベースのオープンが成功すると、onsuccessイベントハンドラが呼び出されます。
db変数にデータベースのインスタンスを格納します。
コンソールに成功メッセージを出力します。

データベースのオープンがエラーになったときに実行されるイベントハンドラ:

request.onerror = function(event) {
  console.error("Database error: " + event.target.errorCode);
};

データベースのオープンがエラーになると、onerrorイベントハンドラが呼び出されます。
コンソールにエラーメッセージを出力します。

このコードはIndexedDBの基本的な操作を示しています。データベースのアップグレードや作成、オープンの成功・失敗をハンドリングし、オブジェクトストアを作成する方法を示しています。

データの読み出し(getBook)

データを読み出すには、トランザクションを使用してオブジェクトストアからデータを取得します。

function getBook(id) {
  const transaction = db.transaction(["books"], "readonly");
  const store = transaction.objectStore("books");
  const request = store.get(id);

  request.onsuccess = function(event) {
    const book = event.target.result;
    console.log("Book retrieved:", book);
  };

  request.onerror = function(event) {
    console.error("Error retrieving book:", event.target.error.message);
  };
}

データの更新と削除（updateBook）

データを更新または削除するには、同様にトランザクションを使用しますが、put メソッドで更新、delete メソッドで削除を行います。

function updateBook(book) {
  const transaction = db.transaction(["books"], "readwrite");
  const store = transaction.objectStore("books");
  const request = store.put(book);

  request.onsuccess = function() {
    console.log("Book updated:", book);
  };

  request.onerror = function(event) {
    console.error("Error updating book:", event.target.error.message);
  };
}

function deleteBook(id) {
  const transaction = db.transaction(["books"], "readwrite");
  const store = transaction.objectStore("books");
  const request = store.delete(id);

  request.onsuccess = function() {
    console.log("Book deleted");
  };

  request.onerror = function(event) {
    console.error("Error deleting book:", event.target.error.message);
  };
}