HTML - IndexedDB:ブラウザ内の個人的なデータベース

こんにちは、未来のウェブ開発者たち！今日は、IndexedDBという興味深い世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、この旅をガイドします。コードを書いたことがない方でも大丈夫です。虚拟の安全帽をかぶり、始めましょう！

HTML - IndexedDB

IndexedDBとは？

IndexedDBは、ブラウザの中に存在するミニチュアのデータベースです。コンピュータの中に小さな書類 cabinet があって、ウェブアプリケーションのためのさまざまな情報を保存し、整理できる imagine してみてください。クールですね？

IndexedDBを使う理由

「なぜまた別のデータ保存方法が必要なのか？」と思っているかもしれません。ちょっとした話をしましょう。昔は、ブラウザ内でデータを保持するためにcookieやローカルストレージに依存していました。でも、それらは像をマッチ箱に詰め込むようなもんで、限られていて柔軟性がありませんでした。

IndexedDBがブラウザストレージのスーパーヒーローである理由は以下の通りです：

機能	説明
存储容量	cookieやローカルストレージよりも多くのデータを保存できます
データ種類	ファイルやblobsを含むさまざまなデータ種類をサポート
インデックス	データの快速検索を可能に
トランザクション	トランザクションベースの操作でデータの整合性を確保
非同期	データを扱う間にアプリが固まらない

IndexedDBを始める

実際のコードから手を付けてみましょう。最初は少し難しそうに見えるかもしれませんが、ステップバイステップで説明します。

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

request.onerror = function(event) {
console.error("データベースエラー: " + event.target.error);
};

request.onsuccess = function(event) {
db = event.target.result;
console.log("データベースが正常に開かれました");
};

request.onupgradeneeded = function(event) {
db = event.target.result;
const objectStore = db.createObjectStore("students", { keyPath: "id" });
console.log("オブジェクトストアが作成されました");
};

これはすごい量の情報ですね！少し解説しましょう：

dbという変数を宣言してデータベース接続を保持します。
indexedDB.open()を使って「MyFirstDatabase」という名前のデータベースを開いたり作成したりします。
以下の3つのイベントハンドラを設定します：

onerror：何かが間違った場合に実行されます。
onsuccess：データベースが正常に開かれた場合に実行されます。
onupgradeneeded：データベースが作成されたりアップグレードされたりした場合に実行されます。

onupgradeneededはデータベースの設計者のようなもんで、データベース構造を設計します。

IndexedDBにデータを追加する

データベースが設定されたので、データを追加してみましょう。例えば、生徒管理システムを作成しています。

function addStudent(student) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.add(student);

request.onerror = function(event) {
console.log("生徒を追加する際にエラーが発生しました: " + event.target.error);
};

request.onsuccess = function(event) {
console.log("生徒が正常に追加されました");
};
}

// 使用例
addStudent({ id: 1, name: "Alice", grade: "A" });
addStudent({ id: 2, name: "Bob", grade: "B" });

以下のようになります：

トランザクションを作成します。データの安全なトンネルのように考えます。
オブジェクトストア（従来のデータベースのテーブルに相当）を取得します。
add()メソッドを使って生徒データを插入します。
成功とエラーのハンドラを設定して、操作が成功したかどうかを確認します。

IndexedDBからデータを取得する

保存したデータが何も意味がないとすれば、データを取得する方法を見てみましょう。生徒データを取得します。

function getStudent(id) {
const transaction = db.transaction(["students"]);
const objectStore = transaction.objectStore("students");
const request = objectStore.get(id);

request.onerror = function(event) {
console.log("生徒を取得する際にエラーが発生しました: " + event.target.error);
};

request.onsuccess = function(event) {
if (request.result) {
console.log("生徒が見つかりました:", request.result);
} else {
console.log("生徒が見つかりません");
}
};
}

// 使用例
getStudent(1);

これは図書館の司書が本をあなたに取り寄せるのと似ています：

読み取り専用のトランザクションを開始します（何も変更しません）。
get()メソッドを使って生徒のIDに基づいてデータを取得します。
データが見つかった場合は詳細を表示し、見つからない場合は「見つかりません」と表示します。

IndexedDBでデータを更新する

生徒たちは成長し、成績が変わります。記録を更新してみましょう。

function updateStudent(id, newGrade) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.get(id);

request.onerror = function(event) {
console.log("生徒を更新するために取得する際にエラーが発生しました: " + event.target.error);
};

request.onsuccess = function(event) {
const data = event.target.result;
data.grade = newGrade;

const updateRequest = objectStore.put(data);

updateRequest.onerror = function(event) {
console.log("生徒を更新する際にエラーが発生しました: " + event.target.error);
};

updateRequest.onsuccess = function(event) {
console.log("生徒が正常に更新されました");
};
};
}

// 使用例
updateStudent(1, "A+");

これは教師が成績帳を更新するのと似ています：

生徒の現在のデータを取得します。
成績を修正します。
put()メソッドを使って更新されたデータをデータベースに保存します。

IndexedDBからデータを削除する

時にはデータを削除する必要があります。生徒を削除する関数を追加します。

function deleteStudent(id) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.delete(id);

request.onerror = function(event) {
console.log("生徒を削除する際にエラーが発生しました: " + event.target.error);
};

request.onsuccess = function(event) {
console.log("生徒が正常に削除されました");
};
}

// 使用例
deleteStudent(2);

これは生徒記録からエントリを消去するのと似ています：

「readwrite」トランザクションを開始します（データを変更します）。
delete()メソッドを使って生徒のIDに基づいてデータを削除します。
成功とエラーのケースを処理して、操作が成功したかどうかを確認します。

結論

おめでとうございます！あなたはIndexedDBの世界の初歩を踏み出しました。データベースの作成、データの追加、取得、更新、削除をカバーしました。これらはIndexedDBを扱う際の基本的な操作です。

実践は完璧を生みます。IndexedDBを使った小さなプロジェクトを作ってみてください。例えば、タスク管理アプリや個人的な日記など。それを弄れば弄るほど、使い慣れてきます。

IndexedDBは最初は複雑に見えるかもしれませんが、ウェブアプリケーションを次のレベルに引き上げる強力なツールです。ブラウザ内で大量のデータを保存し、管理するスーパーパワーのようなものです。

codingを続け、好奇心を持ち、楽しみながら進んでください！誰かが次の大規模なウェブアプリを作るかもしれません。その手があなたかもしれません。

Credits: Image by storyset