Web App

Todoリスト管理アプリ

期限が近いタスクの優先度の自動変更や、定期タスクの自動生成など、「うっかり忘れ」を防ぐ仕組みを備えた個人用のTodoアプリです。

Todoリスト管理アプリのPC表示
Todoリスト管理アプリのスマートフォン表示
Client
自主制作
Category
Web App
Role
企画 / デザイン方向性の指示 / AIへの実装指示 / 動作確認
Tech
HTML / CSS / JavaScript / PHP / Claude Code

概要

日々のタスク管理を自分で使いやすくするために作った、個人用のTodoリストアプリです。単なるチェックリストではなく、期限が近づいたタスクの優先度が自動で上がる、毎月決まった日に発生する作業を自動でリスト化するなど、「うっかり忘れる」を防ぐ仕組みを重視しました。

PC・スマートフォンのどちらからも同じデータにアクセスでき、スマートフォンではホーム画面に追加してアプリのように使っています。

主な機能

  • 優先度(急・高・中・低・停滞中)を背景色でひと目で判別でき、期限が近づくと自動で「急」に切り替わる
  • 「毎月◯日」と指定するだけで、定期的に発生するタスクを自動生成。完了すると次回分が自動で表示される
  • 完了したタスクは削除されず年別の履歴として残り、誤って完了にした場合も元に戻せる
  • Todoとは別に、備忘録を残せるメモ欄を用意(PC・スマートフォンそれぞれで使いやすいレイアウト)
  • PINコードによるログインで、本人以外は閲覧・編集できないようにしている

工夫したポイント

  • データベースを使わず、PHPとJSONファイルだけでサーバーにデータを保存。複数の端末から同じデータを参照・編集できるようにしつつ、運用コストと保守の手間を最小限に抑えた
  • 期限が近いタスクや定期タスクの「次回分」を自動で計算するロジックを実装。自分でリマインドしなくても、開くたびに今やるべきことが優先度順に並ぶようにした
  • ホーム画面から起動した状態では使えない「引っ張って更新」を独自に実装。あわせて、更新内容が反映されないキャッシュの問題にも対策した

使用技術

制作環境・開発支援

  • Claude Code

言語

  • HTML
  • CSS
  • JavaScript
  • PHP

サーバー

  • Xserver(レンタルサーバー)