データベースを開く
データベースとオブジェクトストアを作成します。
「データベースを開く」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
IndexedDBとは
IndexedDBは、ブラウザーに組み込まれた大容量のトランザクション対応データベースです。localStorage（容量が小さく、文字列のみを扱い、同期的に動作します）とは異なり、構造化されたオブジェクトを保存でき、インデックスに対応し、非同期で動作します。
データベースを開く
indexedDB.open(name, version)でデータベースを開く（または作成する）ことができます。成功または失敗を通知するイベントが発生するリクエストオブジェクトが返されます。
const request = indexedDB.open('notes-db', 1);リクエストイベント
データベースを開くリクエストでは、次のイベントが発生します。
onsuccess— データベースの準備が完了しましたonerror— データベースを開けませんでしたonupgradeneeded— スキーマを作成または更新する必要があります
request.onsuccess = (e) => {
const db = e.target.result;
console.log('database opened');
};
request.onerror = (e) => {
console.log('open failed:', e.target.error);
};onupgradeneeded
onupgradeneededは、データベースを初めて作成したとき、またはバージョン番号を増やしたときに実行されます。スキーマ（オブジェクトストアやインデックスの作成・削除）を変更できる唯一の場所です。
request.onupgradeneeded = (e) => {
const db = e.target.result;
// create object stores here
};オブジェクトストア
オブジェクトストアはテーブルのようなもので、レコードを格納するコンテナです。onupgradeneeded内でdb.createObjectStore(name, options)を使って作成します。
request.onupgradeneeded = (e) => {
const db = e.target.result;
db.createObjectStore('notes', { keyPath: 'id' });
};keyPath
keyPathは、各オブジェクトのどのプロパティを主キーにするかをIndexedDBに指定します。保存するオブジェクトにはそのプロパティが必要で、キーは一意でなければなりません。
db.createObjectStore('users', { keyPath: 'email' });
// Each stored user object must have a unique 'email'.自動インクリメントキー
オブジェクトに自然なキーがない場合は、autoIncrement: trueを使ってIndexedDBにキーを生成させます。新しいレコードごとに次の整数が割り当てられます。
db.createObjectStore('logs', {
keyPath: 'id',
autoIncrement: true
});
// id is assigned automatically on add().既存のストアを確認する
onupgradeneededはバージョンが上がるたびに実行されるため、再実行時のエラーを避けるにはdb.objectStoreNames.containsで作成処理を保護します。
request.onupgradeneeded = (e) => {
const db = e.target.result;
if (!db.objectStoreNames.contains('notes')) {
db.createObjectStore('notes', { keyPath: 'id' });
}
};db参照を保持する
onsuccessからデータベースオブジェクトを保存しておくと、後続の操作で利用できます。すべての読み取りと書き込みは、このdbインスタンスを通じて行います。
let db;
request.onsuccess = (e) => {
db = e.target.result; // reuse for transactions
};ブロックされたオープンを処理する
別のタブが古いバージョンを開いたままにしていると、アップグレードがblockedになることがあります。onblockedをリッスンし、ほかのタブを閉じるようユーザーに求めます。
request.onblocked = () => {
console.log('Close other tabs to upgrade the database.');
};オープンの流れ
IndexedDBを開くには、名前とバージョンを指定してopenを呼び出し、onupgradeneededでスキーマを作成し、onsuccessでdbを取得します。その後、トランザクションを使ってデータの読み書きを行います。
確認問題
データベースの開き方についての理解度を確認しましょう。
まとめ
IndexedDBデータベースの開き方を学びました。
indexedDB.open(name, version)はリクエストを返します。- オブジェクトストアは
onupgradeneeded内でのみ作成します。 keyPathで主キーを設定し、autoIncrementでキーを生成します。- 後で使えるように、
onsuccessからdbを保存します。 onerrorとonblockedを処理します。
次は、トランザクションとCRUD操作について学びます。
よくある質問
「データベースを開く」レッスンは無料ですか？
はい。「データベースを開く」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「データベースを開く」で何を学びますか？
データベースとオブジェクトストアを作成します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「データベースを開く」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。