ReactでIndexedDBにデータを保存して読み出す方法

export type Note = { id: number; text: string; createdAt: Date };

const DB_NAME = 'memo-app';
const DB_VERSION = 1;
const STORE = 'notes';

// IDBRequest の結果を Promise で受け取る
function request<T>(req: IDBRequest<T>): Promise<T> {
  return new Promise((resolve, reject) => {
    req.onsuccess = () => resolve(req.result);
    req.onerror = () => reject(req.error);
  });
}

// トランザクションが最後まで書き込まれたら解決する
function done(tx: IDBTransaction): Promise<void> {
  return new Promise((resolve, reject) => {
    tx.oncomplete = () => resolve();
    tx.onerror = () => reject(tx.error);
    tx.onabort = () => reject(tx.error);
  });
}

let dbPromise: Promise<IDBDatabase> | null = null;

// データベースは1回だけ開いて、使い回す
export function openDB(): Promise<IDBDatabase> {
  dbPromise ??= new Promise((resolve, reject) => {
    const req = indexedDB.open(DB_NAME, DB_VERSION);
    // 初めて開いたときと、DB_VERSION を上げたときだけ呼ばれる
    req.onupgradeneeded = () => {
      req.result.createObjectStore(STORE, { keyPath: 'id', autoIncrement: true });
    };
    req.onsuccess = () => {
      const db = req.result;
      // 別のタブが新しいバージョンで開こうとしたら、閉じて譲る
      db.onversionchange = () => {
        db.close();
        dbPromise = null;
      };
      resolve(db);
    };
    req.onerror = () => {
      dbPromise = null;
      reject(req.error);
    };
  });
  return dbPromise;
}

export async function getAllNotes(): Promise<Note[]> {
  const db = await openDB();
  return request(db.transaction(STORE).objectStore(STORE).getAll());
}

export async function addNote(text: string): Promise<Note> {
  const db = await openDB();
  const tx = db.transaction(STORE, 'readwrite');
  const value = { text, createdAt: new Date() };
  // 追加の結果（付いた id）と、トランザクションの完了を両方待つ
  const [id] = await Promise.all([request(tx.objectStore(STORE).add(value)), done(tx)]);
  return { ...value, id: id as number };
}

export async function deleteNote(id: number): Promise<void> {
  const db = await openDB();
  const tx = db.transaction(STORE, 'readwrite');
  const finished = done(tx);
  tx.objectStore(STORE).delete(id);
  await finished;
}

import { useEffect, useState } from 'react';
import { addNote, deleteNote, getAllNotes, type Note } from './db';

export function useNotes() {
  const [notes, setNotes] = useState<Note[] | null>(null); // null は読み込み中
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let ignore = false;
    getAllNotes().then(
      (list) => { if (!ignore) setNotes(list); },
      (e) => { if (!ignore) setError(String(e)); },
    );
    return () => { ignore = true; };
  }, []);

  const add = async (text: string) => {
    try {
      const note = await addNote(text);
      setNotes((prev) => [...(prev ?? []), note]);
    } catch (e) {
      setError(String(e));
    }
  };

  const remove = async (id: number) => {
    try {
      await deleteNote(id);
      setNotes((prev) => prev && prev.filter((n) => n.id !== id));
    } catch (e) {
      setError(String(e));
    }
  };

  return { notes, error, add, remove };
}

import { useState } from 'react';
import { useNotes } from './useNotes';

export function Memo() {
  const { notes, error, add, remove } = useNotes();
  const [text, setText] = useState('');

  if (error) return <p role="alert">保存先を開けませんでした：{error}</p>;
  if (!notes) return <p>読み込み中…</p>;

  return (
    <div>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          if (!text.trim()) return;
          add(text.trim());
          setText('');
        }}
      >
        <input aria-label="メモ" value={text} onChange={(e) => setText(e.target.value)} />
        <button>追加</button>
      </form>
      <p className="count">{notes.length}件</p>
      <ul>
        {notes.map((n) => (
          <li key={n.id}>
            <span>{n.text}</span>
            <time>{n.createdAt.toLocaleTimeString('ja-JP')}</time>
            <button onClick={() => remove(n.id)} aria-label={`「${n.text}」を削除`}>削除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

開いた直後:
0件
3件追加した:
3件
  - 牛乳を買う (9:00:00)
  - 本を返す (9:01:01)
  - 鍵を探す (9:02:02)
再読み込みした:
3件
  - 牛乳を買う (9:00:00)
  - 本を返す (9:01:01)
  - 鍵を探す (9:02:02)
再読み込みした（IndexedDB の中身）:
  version=1 indexNames=[]
  id=1 text=牛乳を買う createdAt: [object Date] 2026-11-02T00:00:00.173Z
  id=2 text=本を返す createdAt: [object Date] 2026-11-02T00:01:01.245Z
  id=3 text=鍵を探す createdAt: [object Date] 2026-11-02T00:02:02.309Z
「本を返す」を削除した:
2件
  - 牛乳を買う (9:00:00)
  - 鍵を探す (9:02:02)
もう一度再読み込みした:
2件
  - 牛乳を買う (9:00:00)
  - 鍵を探す (9:02:02)
別のブラウザコンテキストで開いた:
0件
エラーと警告: なし

Date       IndexedDB → [object Date] ／ localStorage(JSON) → [object String] "2026-11-02T00:00:00.000Z"
Map        IndexedDB → [object Map] get("a")=1 ／ localStorage(JSON) → [object Object] {}
Set        IndexedDB → [object Set] ／ localStorage(JSON) → [object Object] {}
Blob       IndexedDB → [object Blob] 中身="こんにちは" type=text/plain ／ localStorage(JSON) → [object Object] {}
Uint8Array IndexedDB → [object Uint8Array] ／ localStorage(JSON) → [object Object] {"0":1,"1":2,"2":3}
関数を含むオブジェクト: DataCloneError: Failed to execute 'put' on 'IDBObjectStore': () => {} could not be cloned.
クラスのインスタンス: 戻した値 [object Object] instanceof Point=false x=3 double=undefined

IndexedDB の要求の結果を待つ → 続けて put できた
解決済みの Promise を待つ → 続けて put できた
setTimeout(0) を待つ → TransactionInactiveError: Failed to execute 'put' on 'IDBObjectStore': The transaction is not active.
fetch を待つ → TransactionInactiveError: Failed to execute 'put' on 'IDBObjectStore': The transaction has finished.

const DB_VERSION = 2;

// …（openDB の中）
    req.onupgradeneeded = (event) => {
      const db = req.result;
      if (event.oldVersion < 1) {
        db.createObjectStore(STORE, { keyPath: 'id', autoIncrement: true });
      }
      if (event.oldVersion < 2) {
        // バージョン2で、作った日時の索引を足す
        req.transaction!.objectStore(STORE).createIndex('byCreatedAt', 'createdAt');
      }
    };

タブB（バージョン2）:
2件
  - 牛乳を買う (17:42:15)
  - 本を返す (17:42:15)
タブBを開いたあと（IndexedDB の中身）:
  version=2 indexNames=[byCreatedAt]
  id=1 text=牛乳を買う createdAt: [object Date] 2026-11-02T08:42:15.097Z
  id=2 text=本を返す createdAt: [object Date] 2026-11-02T08:42:15.175Z
タブAでメモを追加しようとした:
保存先を開けませんでした：VersionError: The requested version (1) is less than the existing version (2).

  タブBのコンソール: blocked: oldVersion=1 newVersion=2
タブBを開いて3秒後:
読み込み中…
タブBに届いた blocked イベント: 1回
タブAを閉じたあとのタブB:
2件
  - 牛乳を買う (17:42:15)
  - 本を返す (17:42:15)