トランザクションと CRUD
レコードの追加、読み取り、更新、削除を行います。
「トランザクションと CRUD」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
すべてはトランザクション
IndexedDBでは、すべての読み取りと書き込みをトランザクション内で行います。トランザクションは複数の操作をまとめ、すべて成功するか、すべてロールバックされるようにすることで、データの整合性を保ちます。
トランザクションを開始する
db.transaction(storeNames, mode)で作成します。モードには'readonly'（デフォルト）と、変更を行う'readwrite'があります。
const tx = db.transaction('notes', 'readwrite');
const store = tx.objectStore('notes');オブジェクトストアを取得する
トランザクションから、tx.objectStore(name)を使って操作対象のオブジェクトストアを取得します。すべてのCRUDメソッドはこのストアに用意されています。
const tx = db.transaction('notes', 'readwrite');
const store = tx.objectStore('notes');
// store.add / get / put / deleteレコードを追加する
store.add(value)は新しいレコードを挿入します。同じキーを持つレコードがすでに存在する場合は失敗するため、誤った上書きを防げます。
const store = tx.objectStore('notes');
const req = store.add({ id: 1, text: 'Buy milk' });
req.onsuccess = () => console.log('added with key', req.result);レコードを読み取る
store.get(key)は、キーを使って1件のレコードを取得します。結果はリクエストのonsuccessでrequest.resultとして取得できます（見つからない場合はundefinedです）。
const req = store.get(1);
req.onsuccess = () => {
console.log('record:', req.result);
};putで更新する
store.put(value)はレコードを挿入または置き換えます。addとは異なり、同じキーを持つ既存のレコードを上書きするため、更新に適しています。
store.put({ id: 1, text: 'Buy milk and eggs' });
// Replaces the existing record with id 1.レコードを削除する
store.delete(key)は、指定したキーを持つレコードを削除します。そのようなレコードが存在しない場合でも成功します。
const req = store.delete(1);
req.onsuccess = () => console.log('deleted');ストアを空にする
store.clear()は、オブジェクトストア内のすべてのレコードを一度に削除します。キャッシュデータをリセットするときに使用します。
store.clear();
// All records in 'notes' are removed.トランザクションの完了
トランザクション自体は、すべての操作がコミットされるとoncompleteを発生させ、何らかの問題が起きるとonerrorまたはonabortを発生させます。書き込みが永続化されたことを確認するにはoncompleteを使用します。
tx.oncomplete = () => console.log('all changes saved');
tx.onerror = () => console.log('transaction failed');自動コミットの動作
保留中のリクエストがない状態で制御がイベントループに戻ると、トランザクションは自動的にコミットされます。関係のない非同期処理に対するawaitをまたいでトランザクションを開いたままにはできないため、ストア操作はまとめて行ってください。
// Queue operations synchronously within the same tx:
store.add({ id: 2, text: 'A' });
store.add({ id: 3, text: 'B' });
// Both commit together when tx completes.CRUDのまとめ
4つの基本操作は、次のように対応します。
- 作成：
add - 読み取り：
get - 更新：
put - 削除：
delete
これらはすべて、整合性を保証するトランザクション内で行います。
理解度チェック
トランザクションとCRUDについての理解度を確認しましょう。
まとめ
トランザクションとCRUDについて学びました。
db.transaction(store, mode)で開始します。tx.objectStore(name)でストアを取得します。addは挿入、getは読み取り、putはupsert、deleteは削除を行います。- 各リクエストの
onsuccessで結果を受け取ります。 tx.oncompleteで変更が保存されたことを確認できます。
次は、インデックスとクエリです。
よくある質問
「トランザクションと CRUD」レッスンは無料ですか？
はい。「トランザクションと CRUD」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「トランザクションと CRUD」で何を学びますか？
レコードの追加、読み取り、更新、削除を行います。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「トランザクションと CRUD」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- データベースを開く
- トランザクションと CRUD
- インデックスとクエリ
- バージョン管理とアップグレード