ブラウザだけで動く「シンプルなTODOタスク管理アプリ」を作成しました。
特徴は、ローカルストレージではなく IndexedDB を使ってデータを保存できる点です。
IndexDBは、普通にあるものなのに初めて知ったということで、実装までに苦労したことや工夫した部分を中心にお話しします。
実際に動くアプリの仕組みや、WordPress環境での工夫も含めてまとめました。
なぜIndexedDBか
localStorageでは足りない理由
localStorageはシンプルですが、容量が数MB程度と限られており、文字列しか保存できず、タスクが増えたり、より多様な情報を扱いたくなった場合には不便です。
一方でIndexedDBは、オブジェクトをそのまま保存でき、容量も比較的大きく、構造化データを扱うのに向いています。
IndexedDBの特徴と対応ブラウザ
IndexedDBは非同期で動作し、トランザクションを使って安全にデータを扱うことができ、主要ブラウザ（Chrome、Firefox、Safari、Edgeなど）に対応しており、今後も安定して利用できる仕組みです。
また、最近では「永続化ストレージ（Persistent Storage）」にも対応し、ブラウザが自動でデータを削除しにくくする工夫も可能になっています。
設計・実装の流れと苦労した点
初期構成と基本操作
HTML＋CSSの設計
最初にフォーム（タイトル、完了予定日、登録ボタン）と一覧テーブルを用意しました。
WordPressでの利用を想定し、IDの重複を避けるために wpidb- という接頭辞を付けて管理しました。
デザインはシンプルさを優先し、CSS変数で色やテーマを統一しました。
IndexedDBラッパの設計
IndexedDBはネイティブAPIが少し複雑なため、Promiseで扱いやすいラッパ関数を自作しました。openDB、addTask、updateTask、deleteTask、getAllTasks のような構成にし、画面処理とDB処理を分離しています。
苦労したのは、onupgradeneeded の設計とトランザクションの扱い、バージョンアップ時のスキーマ変更や、処理タイミングによるエラーを避けるための工夫が必要でした。
並び替えと表示の工夫
並び替えのルール
タスクの並び順は「進行中 → 未着手 → 完了」の順にし、期日とタイトルでもソートしています。
このため、タスク一覧が自然な順序で並ぶようになっています。
日本語タイトルのソートでは localeCompare を使いましたが、同じ期日のときに順序が安定しない問題があり、細かい条件分岐を入れて調整しました。
完成したTODOアプリ
| タイトル | 完了予定日 | ステータス | 操作 |
|---|