モダンTodoリストアプリ

ReactとViteで構築されたモダンなTodoリストアプリケーションです。タスク管理をシンプルかつ効率的に行うための多くの機能を実装しています。

機能

• 基本的なタスク管理: タスクの追加・編集・削除・完了状態の切り替え
• カテゴリ分類: 「仕事」と「プライベート」でタスクを分類
• 検索機能: タスク名でリアルタイム検索
• フィルタリング: 完了状態によるフィルタリング（すべて・未完了・完了済み）
• 期限設定: タスクに期限を設定し、期限切れのタスクを強調表示
• データ永続化: ローカルストレージを使用したデータの永続化
• 編集機能: タスクをインラインで編集可能

使用技術

• フロントエンド: React 18、JSX、CSS
• ビルドツール: Vite
• 状態管理: React Hooks (useState, useEffect)
• アイコン: React Icons
• データ保存: LocalStorage API
• スタイリング: モダンなCSSとレスポンシブデザイン

インストールと実行方法

1. リポジトリをクローン:

git clone https://github.com/oka031/react-todo-app.git
cd react-todo-app

2. 依存関係のインストール:

npm install

3. 開発サーバーの起動:

npm run dev

4. ブラウザで確認:

http://localhost:5173

アプリケーションの使い方

• タスクの追加: 入力フィールドにタスク名を入力し、カテゴリを選択して「追加」ボタンをクリック
• タスクの完了/未完了: チェックボックスをクリックして状態を切り替え
• タスクの編集: 鉛筆アイコンをクリックしてタスクを編集
• タスクの削除: ゴミ箱アイコンをクリックしてタスクを削除
• タスクの検索: 検索ボックスに文字を入力して該当するタスクをフィルタリング
• フィルター: プルダウンメニューから「すべて」「未完了」「完了済み」を選択してタスクをフィルタリング
• カテゴリ切替: 上部のタブから「すべて」「仕事」「プライベート」を選択してカテゴリでフィルタリング

今後の改善計画

• ドラッグ&ドロップでのタスク並び替え
• タスクの優先度設定機能
• ダークモード/ライトモードの切り替え
• 統計情報の視覚化（完了率など）
• データのエクスポート/インポート機能

開発者について

モダンなフロントエンド技術に興味を持ち、実用的なアプリケーション開発に取り組んでいます。このプロジェクトは、React、フックによる状態管理、コンポーネント設計などのスキルを活かして開発しました。

ライセンス

MIT