バージョン管理とアップグレード
バージョン変更に合わせてスキーマを移行します。
「バージョン管理とアップグレード」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
なぜバージョン管理を行うのか
アプリは進化します。ストアやインデックスを追加したり、データの構造を変更したりします。IndexedDBではバージョン番号を使って、すべてのユーザーのブラウザーでスキーマの変更を安全に管理します。
バージョン番号
openの2番目の引数は、正の整数であるバージョンです。これを大きくすると、ブラウザーにスキーマが変更されたことを伝え、アップグレードを開始します。
// Bumping from 1 to 2 triggers onupgradeneeded:
const request = indexedDB.open('app-db', 2);アップグレードは増加のみ
バージョンは増加させることしかできません。保存されているバージョンより小さい番号で開くと、エラーが発生して失敗します。決して減少させないでください。
// If the stored DB is version 3:
const req = indexedDB.open('app-db', 2);
req.onerror = () => console.log('cannot open older version');oldVersionとnewVersion
onupgradeneeded内では、イベントからoldVersionとnewVersionを取得できます。これらを使って、まだ実行されていないマイグレーションだけを適用します。
request.onupgradeneeded = (e) => {
console.log('upgrading from', e.oldVersion, 'to', e.newVersion);
};段階的なマイグレーション
堅牢なパターンは、oldVersionを使ったフォールスルーです。各ブロックが前のブロックの変更を引き継ぐため、どの古いバージョンのユーザーでも最新のスキーマに到達できます。
request.onupgradeneeded = (e) => {
const db = e.target.result;
if (e.oldVersion < 1) {
db.createObjectStore('notes', { keyPath: 'id' });
}
if (e.oldVersion < 2) {
db.createObjectStore('tags', { keyPath: 'name' });
}
};後からインデックスを追加する
アップグレード中に既存のストアへインデックスを追加するには、アップグレード用トランザクションからストアを取得し、そのストアでcreateIndexを呼び出します。
request.onupgradeneeded = (e) => {
if (e.oldVersion < 3) {
const store = e.target.transaction.objectStore('notes');
store.createIndex('byDate', 'createdAt');
}
};バージョン変更トランザクション
onupgradeneeded中のイベントのtransactionは、特殊なversionchangeトランザクションです。スキーマの変更とデータのマイグレーションの両方を実行できるのは、このコンテキストだけです。
request.onupgradeneeded = (e) => {
const tx = e.target.transaction; // versionchange tx
const store = tx.objectStore('notes');
// migrate existing records here if needed
};既存データのマイグレーション
スキーマの変更にレコードの構造変更が必要な場合は、アップグレード中にカーソルでストアを反復処理し、変換した値をputで書き戻します。
const store = e.target.transaction.objectStore('notes');
store.openCursor().onsuccess = (ev) => {
const cursor = ev.target.result;
if (cursor) {
const note = cursor.value;
note.archived = false; // new field
cursor.update(note);
cursor.continue();
}
};versionchangeイベント
あるタブがアップグレードすると、古いバージョンを保持しているほかのタブでは、dbに対してversionchangeイベントが発生します。アップグレードがブロックされないように、これらのタブは接続を閉じる必要があります。
db.onversionchange = () => {
db.close(); // let the other tab upgrade
console.log('database is outdated, please reload');
};ストアの削除
アップグレード中にdb.deleteObjectStore(name)を使うと、不要になったストアを削除できます。ストアとそのデータは完全に削除されます。
request.onupgradeneeded = (e) => {
const db = e.target.result;
if (e.oldVersion < 4 && db.objectStoreNames.contains('temp')) {
db.deleteObjectStore('temp');
}
};アップグレードのベストプラクティス
マイグレーションはべき等にし、oldVersionの順序に従って実行します。versionchangeでは古い接続を閉じ、過去のすべてのバージョンからのアップグレードをテストしてください。これにより、既存ユーザーのデータを維持できます。
理解度チェック
バージョン管理とアップグレードについての理解度を確認しましょう。
まとめ
バージョン管理とアップグレードについて学びました。
- バージョン番号を上げて
onupgradeneededを発生させます。 oldVersionを使って、段階的でべき等なマイグレーションを行います。- アップグレードの
versionchangeトランザクションで、スキーマとデータを変更します。 - カーソルと
cursor.updateでレコードをマイグレーションします。 versionchangeイベントで古いタブを閉じます。
IndexedDBはこれで終了です。次は、Service Workerです。
よくある質問
「バージョン管理とアップグレード」レッスンは無料ですか？
はい。「バージョン管理とアップグレード」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「バージョン管理とアップグレード」で何を学びますか？
バージョン変更に合わせてスキーマを移行します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「バージョン管理とアップグレード」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- データベースを開く
- トランザクションと CRUD
- インデックスとクエリ
- バージョン管理とアップグレード