JavaScript - IndexedDB: Your Gateway to Client-Side Data Storage

こんにちは、将来の開発者たち！今日は、IndexedDBの世界に興味深い旅をすることになります。あなたの近所の親切なコンピュータサイエンスの先生として、私はこの強力な技術を案内してくれることを楽しみにしています。これが、ウェブアプリケーションについて考える方法を革命させるかもしれません。お気に入りの飲み物を手に取り、一番リラックスできる椅子に座って、一緒に潜りましょう！

JavaScript - IndexedDB

IndexedDBとは？

IndexedDBは、あなたのウェブブラウザの中に存在するミニデータベースです。デジタルの書類 cabinets で、シンプルなテキストから複雑なオブジェクト、画像、乃至ファイルまで様々な情報を保存できることを思い浮かべてください。それがIndexedDBなのです！

しかし、ここでの面白い部分は：遠く離れたサーバーにある伝統的なデータベースとは異なり、IndexedDBはユーザーのデバイス上に存在します。これは、あなたのウェブアプリがインターネット接続がないときでもデータを扱うことができることを意味します。すごくないですか？

IndexedDBの主要な機能

非同期性: データを扱う間にアプリが固まらない。
オブジェクト指向: JavaScriptオブジェクトを直接保存できる。
大容量のデータ: 他のクライアントサイドストレージオプションよりも遥かに多くのデータを保存できる。

IndexedDBを使う理由

さて、あなたはおそらく思っているでしょう、「localStorageがあるのに、なぜ IndexedDBを煩雑にする必要があるのか？」素晴らしい質問です！少しの話で説明してみましょう。

想象して見てください、メモアプリを作成しているとします。localStorageを使うと、シンプルな文字列しか保存できません。これは、各本が一文的な内容しか持たない図書館を整理するようなものです。あまり便利ではありませんよね？

一方、IndexedDBは、各本が全文小説、画像、乃至動画を含むことができる魔法の図書館のようなものです。この図書館を超高速で検索でき、通常の書棚よりも遥かに多くの情報を保持できます。

以下は、IndexedDBを使うべきする動機となるいくつかの理由です：

オフライン機能: インターネット接続がないときでもアプリを動作させる。
パフォーマンス: 大量の構造化データを効率的に処理する。
複雑なデータ構造: JavaScriptオブジェクトを簡単に保存し、検索する。
トランザクションデータベースモデル: 何かが間違った場合でもデータの整合性を保つ。

CRUD操作

では、実際のコードで手を汚してみましょう！データベースの世界では、しばしばCRUD操作について話します。CRUDはCreate（作成）、Read（読み取り）、Update（更新）、Delete（削除）の略です。これらはIndexedDBで行う基本的な操作です。

以下にそれぞれの例を示します：

1. Create（データの追加）

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

request.onupgradeneeded = (event) => {
db = event.target.result;
const objectStore = db.createObjectStore("notes", { keyPath: "id", autoIncrement: true });
};

request.onsuccess = (event) => {
db = event.target.result;

const transaction = db.transaction(["notes"], "readwrite");
const objectStore = transaction.objectStore("notes");

const note = { title: "My First Note", content: "Hello, IndexedDB!" };
const request = objectStore.add(note);

request.onsuccess = () => {
console.log("Note added successfully");
};
};

この例では、「MyNotes」というデータベースを作成し、メモを追加しています。これは日記に新しい項目を書くようなものです。

2. Read（データの検索）

const transaction = db.transaction(["notes"]);
const objectStore = transaction.objectStore("notes");
const request = objectStore.get(1);

request.onsuccess = (event) => {
if (request.result) {
console.log("Note:", request.result);
} else {
console.log("No note found with id 1");
}
};

ここでは、IDが1のメモを検索しています。これは日記の特定のページを開いて書かれたことを読むようなものです。

3. Update（データの修正）

const transaction = db.transaction(["notes"], "readwrite");
const objectStore = transaction.objectStore("notes");
const request = objectStore.get(1);

request.onsuccess = (event) => {
const data = event.target.result;
data.content = "Updated content!";
const updateRequest = objectStore.put(data);

updateRequest.onsuccess = () => {
console.log("Note updated successfully");
};
};

このコードは、既存のメモを更新しています。これは日記のどこかを消して新しい内容を書くようなものです。

4. Delete（データの削除）

const request = db.transaction(["notes"], "readwrite")
.objectStore("notes")
.delete(1);

request.onsuccess = () => {
console.log("Note deleted successfully");
};

ここでは、メモを削除しています。これは日記のページを破るようなものです（実際にはやめてくださいね）。

実装例：シンプルなメモアプリ

では、これら全てをまとめて、より完全な例を見てみましょう。シンプルなメモアプリを作成し、全てのCRUD操作を演示します。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IndexedDB Notes App</title>
</head>
<body>
<h1>My Notes</h1>
<input type="text" id="noteTitle" placeholder="Note Title">
<textarea id="noteContent" placeholder="Note Content"></textarea>
<button id="addNote">Add Note</button>
<div id="notesList"></div>

<script>
let db;
const dbName = "NotesDB";

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

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

request.onsuccess = (event) => {
db = event.target.result;
displayNotes();
};

request.onupgradeneeded = (event) => {
db = event.target.result;
const objectStore = db.createObjectStore("notes", { keyPath: "id", autoIncrement: true });
};

function addNote() {
const title = document.getElementById("noteTitle").value;
const content = document.getElementById("noteContent").value;

const transaction = db.transaction(["notes"], "readwrite");
const objectStore = transaction.objectStore("notes");
const note = { title: title, content: content };
const request = objectStore.add(note);

request.onsuccess = () => {
document.getElementById("noteTitle").value = "";
document.getElementById("noteContent").value = "";
displayNotes();
};
}

function displayNotes() {
const notesList = document.getElementById("notesList");
notesList.innerHTML = "";

const objectStore = db.transaction("notes").objectStore("notes");
objectStore.openCursor().onsuccess = (event) => {
const cursor = event.target.result;
if (cursor) {
const noteElement = document.createElement("div");
noteElement.innerHTML = `
<h3>${cursor.value.title}</h3>
<p>${cursor.value.content}</p>
<button onclick="deleteNote(${cursor.value.id})">Delete</button>
`;
notesList.appendChild(noteElement);
cursor.continue();
}
};
}

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

request.onsuccess = () => {
displayNotes();
};
}

document.getElementById("addNote").onclick = addNote;
</script>
</body>
</html>

この例では、シンプルなウェブページを作成し、メモを追加、表示、削除する機能を演示しています。これは基本的ですが、機能的なメモアプリであり、IndexedDBの強力さを示しています。

結論

そして、皆さん！IndexedDBの土地を旅しました。基本的なことを理解するから、実際の例を実装するまで、IndexedDBの旅は終わりではありません。この強力なツールを習得するには練習が必要です。最初は少し複雑に感じるかもしれませんが、続けて実験し、コードを書き続ければ、すぐにIndexedDBの達人になるでしょう！

最後に、私たちがカバーした主要なIndexedDBメソッドをまとめます：

メソッド	説明
`indexedDB.open()`	データベース接続を開く
`createObjectStore()`	新しいオブジェクトストアを作成する
`transaction()`	新しいトランザクションを開始する
`add()`	オブジェクトストアに新しいレコードを追加する
`put()`	オブジェクトストアの既存レコードを更新する
`get()`	オブジェクトストアからレコードを取得する
`delete()`	オブジェクトストアからレコードを削除する
`openCursor()`	レコードをイテレートするためのカーソルを開く

これらを手元に置いて、すぐにIndexedDBの達人になることを目指しましょう！千里的の旅は一歩から始まる。私たちの場合、IndexedDBを理解するところから、ウェブ開発者の達人になる旅が始まります。ハッピーコーディング、そしてあなたのデータベースは常にインデックス化されていますように！

Credits: Image by storyset

前のチュートリアル:

JavaScript - 参照型

次のチュートリアル:

JavaScript - クリックジャッキング攻撃