[Portfolio] ToDoリスト DB連携版 (REACT + TypeScript + PHP + MySQL)

前回作成したReact + TypeScriptのToDoリスト拡張版を発展させ、PHP・MySQLと連携してタスクをデータベースへ保存できるDB連携版を作成しました。

これまでブラウザ内で管理していたToDoデータに加え、PHPを通じてMySQLへ保存する仕組みを追加しています。

サーバー側へデータを保存することで、1台のブラウザ内だけで完結するのではなく、複数デバイスから同じToDoデータを利用できる構成にしました。

主な機能・特徴

• ToDoの追加・編集・削除
• localStorageによるデータ保持
• PHP・MySQLと連携したDB保存
• 複数デバイスから同じToDoデータを利用可能
• 日付ごとの完了履歴を表示
• 日付順の昇順・降順切り替え
• 日付ごとの折りたたみ表示
• グループの追加・分類
• 期限の設定
• 期限間近・期限切れの通知
• ページ表示時および1分ごとの期限チェック

期限通知は、現状ではページを開いている間のみ動作する仕様です。

活用例

• 個人用のToDo・タスク管理
• PC・スマートフォン間でのタスク共有
• 期限付き作業の管理
• 案件・業務ごとのタスク整理
• グループ別の作業管理
• ReactとPHP・MySQLを連携するWebアプリの構築例

フロントエンドだけで完結するアプリから、サーバー・データベースまで連携するWebアプリへ発展させたサンプルとして制作しています。

実装の仕組み

画面側はReact + TypeScriptで構築し、タスクデータをPHPへ送信してMySQLへ保存する構成です。

ブラウザ内だけにデータを保存する構成に加え、サーバー側のDBを利用することで、異なる端末からでも同じデータを扱えるようにしています。

工夫・改善した点

• 前回のReact + TypeScript版の機能を維持しながら、PHP・MySQL連携を追加しました。
• ブラウザ内だけで完結していたデータ保存を、サーバー側へ拡張しました。
• 複数デバイスから同じToDoデータを利用できる構成にしました。
• 期限・グループ・完了履歴など、実際のタスク管理を想定した機能を組み合わせています。
• フロントエンドとバックエンド、データベースを連携させる構成を実装しました。

ReactとTypeScriptの学習・実装を主目的としているため、画面の装飾は必要最低限とし、機能やデータ連携の実装を中心にしています。

今後の拡張

現在の期限通知は、ページを開いている間のみ動作します。

今後の拡張案として、PWA・Service Worker・Push APIなどを利用し、ページを閉じている状態でも通知を受け取れる構成を検討しています。

使用技術