スキルアップを始める!

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

JavaScript(ジャバスクリプト)
この記事は約7分で読めます。
\ワードプレスのスキルアップはこちら!/ WordPress入門読本

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

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

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);
};
}

まとめ

これらの基本的な操作を理解することで、IndexedDB を使ってブラウザ内でより複雑なデータ管理タスクを行うことができます。

URLをコピーしました!