シンプルな“TODOタスク管理アプリ”を作成しました – IndexedDB

WordPress埋め込みとキャッシュの壁

プレビューで動かない問題

WordPressのプレビュー環境ではスクリプトが動作せず、登録ボタンを押しても反応しない状態がありました。

原因は、最適化プラグインがインラインスクリプトを削除・圧縮していたことです。

対策として、スクリプトを外部ファイル化し、次のような工夫をしました。

• <script src="..."></script> 形式に変更
• <!--nooptimize--> タグで最適化を無効化
• クエリパラメータ（例：?ver=20251016-2）を付けてキャッシュを更新

この対応で、更新が反映されない問題も解消されました。

構文エラー “Unexpected token ‘)’” の原因

IndexedDB復元処理に ?? や includes を使っていたため、一部の環境で構文エラーが発生しました。

これを三項演算子や従来のfunction表記に書き換え、互換性を確保しました。

---

実用性を高める工夫

• JSON形式でのバックアップと復元を実装
• 「未着手」「進行中」「完了」のフィルタボタンを追加
• 期限超過タスクの自動赤色表示
• CSSクラス設計を整理し、テーマ変更や拡張がしやすい構造に変更

今後は、通知機能やPWA化などの拡張も検討しています。

---

あるある・疑問・質問

Q. IndexedDBのデータは消えることがありますか？
通常の利用では削除されませんが、ストレージ不足やブラウザのキャッシュ削除時に消える可能性があります。
Persistent Storage設定を利用することで、より安全に保持できます。

Q. どのブラウザでも動きますか？
主要ブラウザでは動作しますが、古いバージョンやInternet Explorerでは非対応です。
互換性を重視する場合はlocalStorageを併用する方法もあります。

Q. 他のデータベースとの違いは？
FirebaseやSQLiteのような外部DBは共有や同期に強みがあります。
一方でIndexedDBはローカル専用で、オフラインでも動作する点が大きな利点です。

---

ローカルDBだけで十分か？

ローカルDBで完結する仕組みは軽量で使いやすい反面、いくつかの課題もあります。

• 複数デバイス間の同期ができない
• バックアップや暗号化などの保護は自前で必要
• ブラウザの設定によっては削除されることもある

個人利用や簡易管理には最適ですが、チーム運用や長期保存を考える場合は、サーバー側との同期を組み合わせるのが理想です。

出典：ピーターのりお

---

まとめ

前から作ってみたかった、ブラウザのみで動作する軽量タスク管理アプリを作成しました。

実装ではキャッシュや最適化の壁、構文エラーなど多くの課題に直面しましたが、一つずつ解決していく過程で多くの学びがありました。

IndexedDBを使うことで、リロードしてもデータが残る快適なタスク管理が可能になりました。

今後はPWA対応や通知連携など、さらに便利な方向へ発展させていく予定です。

---

参考リンク

• IndexedDB API 基本用語（MDN）
• IndexedDBの使い方（MDN）
• IndexedDB 永続ストレージ解説（tool-place.net）

---