> npx create-react-app indexeddb-app

import React, { Component } from "react";
import "./App.css";
import mydb from "./mydb";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      rows: [],
      users: [
        { name: "戸山香澄", musicalInstrument: "Gt.&Vo.", nickname: "星のカリスマ" },
        { name: "花園たえ", musicalInstrument: "Gt.", nickname: "兎追いし花園" },
        { name: "牛込りみ", musicalInstrument: "Ba.", nickname: "これでいちコロネ" },
        { name: "山吹沙綾", musicalInstrument: "Dr.", nickname: "発酵少女" },
        { name: "市ヶ谷有咲", musicalInstrument: "Key.", nickname: "甘辛パーソナリティ" }
      ]
    };
    this.renderTable();
  }

  // dbにあるデータを全件表示する。
  async renderTable() {
    const users = await mydb.getAll();
    this.setState({ rows: users });
  }

  // データを1件追加する。
  async addUser(index) {
    const user = Object.assign({}, this.state.users[index]);
    const id = await mydb.add(user);
    user.id = id;
    this.state.rows.push(user);
    this.setState({ rows: this.state.rows });
  }

  // データを1件削除する。
  async deleteUser(key) {
    await mydb.delete(key);
    const rows = this.state.rows.filter(user => user.id !== key);
    this.setState({ rows });
  }

  // 行のDOMを作る。
  renderRow(user) {
    return (
      <tr key={user.id}>
        <td>{user.name}</td>
        <td>{user.musicalInstrument}</td>
        <td>{user.nickname}</td>
        <td><button onClick={() => this.deleteUser(user.id)}>delete</button></td>
      </tr>
    );
  }

  render() {
    return (
      <div>
        <p>
          <button onClick={() => this.addUser(0)}>戸山香澄</button>
          <button onClick={() => this.addUser(1)}>花園たえ</button>
          <button onClick={() => this.addUser(2)}>牛込りみ</button>
          <button onClick={() => this.addUser(3)}>山吹沙綾</button>
          <button onClick={() => this.addUser(4)}>市ヶ谷有咲</button>
        </p>
        <table border="1">
          <thead>
            <tr>
              <td>名前</td>
              <td>楽器</td>
              <td>二つ名</td>
              <td></td>
            </tr>
          </thead>
          <tbody>
            {this.state.rows.map(user => this.renderRow(user))}
          </tbody>
        </table>
      </div>
    );
  }
}

const db_constants = {
  name: "mydb",
  version: 1,
}
const store_constants = {
  name: "users",
  storeOptions: { keyPath: "id", autoIncrement: true },
  indexes: [
    { indexName: "name", unique: false },
    { indexName: "musicalInstrument", unique: false },
    { indexName: "nickname", unique: false }
  ]
};

// IDBに接続する
const connectIDB = (resolve, reject) => {
  const request = indexedDB.open(db_constants.name, db_constants.version);
  request.onsuccess = event => {
    resolve(event.target.result);
  };
  request.onerror = event => {
    reject(new Error("なぜ私のウェブアプリでIndexedDBを使わせてくれないのですか?!"));
  };
  request.onupgradeneeded = event => {
    const db = event.target.result;
    if (!Array.from(db.objectStoreNames).includes(store_constants.name)) {
      // store"users"が存在しないとき、新規作成する。
      const objectStore = db.createObjectStore(store_constants.name, store_constants.storeOptions);
      for (const index of store_constants.indexes) {
        objectStore.createIndex(index.indexName, index.indexName, { unique: index.unique });
      }
    }
  }
}

class mydb extends Promise {
  // 全件取得する
  getAll() {
    return new Promise((resolve, reject) => {
      this.then(db => {
        const transaction = db.transaction(store_constants.name, "readonly");
        const objectStore = transaction.objectStore(store_constants.name);
        const request = objectStore.getAll();
        request.onsuccess = event => {
          resolve(event.target.result);
        };
      });
    });
  }
  // 1行追加する。成功したとき、idを返す。
  add(user) {
    return new Promise((resolve, reject) => {
      this.then(db => {
        const transaction = db.transaction(store_constants.name, "readwrite");
        const objectStore = transaction.objectStore(store_constants.name);
        const request = objectStore.add(user);
        request.onsuccess = event => {
          resolve(event.target.result);
        };
      });
    });
  }
  // 1行削除する。
  delete(key) {
    return new Promise((resolve, reject) => {
      this.then(db => {
        const transaction = db.transaction(store_constants.name, "readwrite");
        const objectStore = transaction.objectStore(store_constants.name);
        const request = objectStore.delete(key);
        request.onsuccess = event => {
          resolve(event.type);
        };
      });
    });
  }
}

export default new mydb(connectIDB);

> npm i dexie

import Dexie from "dexie";

const db_constants = {
  name: "mydb",
  version: 1,
}
const store_constants = {
  name: "users",
  indexes: "++id, name, musicalInstrument, nickname"
};

import Dexie from "dexie";

const db_constants = {
  name: "mydb",
  version: 1,
}
const store_constants = {
  name: "users",
  indexes: "++id, name, musicalInstrument, nickname"
};

class mydb {
  constructor() {
    const db = new Dexie(db_constants.name);
    db.version(db_constants.version).stores({
      [store_constants.name]: store_constants.indexes
    });
    this.db = db;
  }
  // 全件取得する
  getAll() {
    return this.db[store_constants.name].toArray();
  }
  // 1行追加する。成功したとき、idを返す。
  add(user) {
    return this.db[store_constants.name].add(user);
  }
  // 1行削除する。
  delete(key) {
    return this.db[store_constants.name].delete(key);
  }
}

export default new mydb();