TodoLog - タスク管理アプリケーション

概要

TodoLogは、シンプルで使いやすいタスク管理アプリケーションです。各タスクにメモを追加する機能を備え、データはローカルファイルに保存されるため、可搬性と利便性を両立しています。

開発状況

• ✅ Issue01: フロントエンドとバックエンドの分離 (2025-04-18完了)
• ✅ Issue02: バックエンド実装 (2025-04-19完了)
  • ✅ フェーズ1: プロジェクト構造とベース実装 (2025-04-18完了)
  • ✅ フェーズ2: データ永続化レイヤーの実装 (2025-04-18完了)
  • ✅ フェーズ3: APIエンドポイントの実装（基本機能）(2025-04-18完了)
  • ✅ フェーズ4: APIエンドポイントの実装（拡張機能）(2025-04-18完了)
  • ✅ フェーズ5: セキュリティと最適化 (2025-04-18完了)
  • ✅ フェーズ6: テストとドキュメント (2025-04-19完了)
    • ✅ テスト環境の整備 (2025-04-19完了)
    • ✅ 単体テストの実装 (2025-04-19完了)
    • ✅ 統合テストの実装 (2025-04-19完了)
    • ✅ テストカバレッジの向上 (2025-04-19完了)
    • ✅ API仕様書の作成 (2025-04-19完了)
    • ✅ 開発者向けドキュメントの作成 (2025-04-19完了)
• ✅ Issue03: フロントエンド実装 (2025-04-20完了)
  • ✅ フェーズ1: プロジェクト構造とベース実装 (2025-04-19完了)
  • ✅ フェーズ2: 基本機能のUI実装 (2025-04-19完了)
    • ✅ タスク一覧表示画面 (2025-04-19完了)
    • ✅ タスク詳細表示画面 (2025-04-19完了)
    • ✅ タスク作成/編集フォーム (2025-04-19完了)
    • ✅ タスク削除機能 (2025-04-19完了)
    • ✅ タスク完了状態の切り替え機能 (2025-04-19完了)
  • ✅ フェーズ3: 拡張機能のUI実装 (2025-04-19完了)
    • ✅ タスクのメモ編集機能 (2025-04-19完了)
    • ✅ カテゴリ管理機能 (2025-04-19完了)
    • ✅ タスクのフィルタリング機能 (2025-04-19完了)
    • ✅ タスクのソート機能 (2025-04-19完了)
    • ✅ タスクの検索機能 (2025-04-19完了)
  • ⬜ フェーズ4: バックアップと復元のUI (実装見送り)
  • ✅ フェーズ5: UI/UXの改善 (2025-04-19完了)
    • ✅ レスポンシブデザインの最適化 (2025-04-19完了)
    • ✅ ダークモード/ライトモードの切り替え (2025-04-19完了)
    • ✅ アニメーションとトランジション (2025-04-19完了)
    • ✅ キーボードショートカット (2025-04-19完了)
    • ✅ ユーザー設定の保存 (2025-04-19完了)
  • ✅ フェーズ6: テストとドキュメント (2025-04-20完了)
    • ✅ テスト環境のセットアップ (2025-04-19完了)
    • ✅ 共通コンポーネントのテスト (2025-04-19完了)
    • ✅ カスタムフックとユーティリティのテスト (2025-04-19完了)
    • ✅ 統合テスト (2025-04-19完了)
    • ✅ アクセシビリティテスト (2025-04-20完了)
    • ✅ ドキュメント作成 (2025-04-20完了)
• ✅ Issue04: タスクアーカイブ機能の実装 (2025-04-20完了)
  • ✅ フェーズ1: 基本実装 (2025-04-19完了)
  • ✅ フェーズ2: 機能拡張 (2025-04-19完了)
  • ✅ フェーズ3: テストとドキュメント (2025-04-20完了)
• ✅ Issue07: キーボードショートカット機能の修復 (2025-04-23完了)
  • ✅ フェーズ1: 問題の特定と原因分析 (2025-04-23完了)
  • ✅ フェーズ2: 解決策の設計 (2025-04-23完了)
  • ✅ フェーズ3: 実装 (2025-04-23完了)
  • ✅ フェーズ4: テストと検証 (2025-04-23完了)
• ✅ Issue08: リッチタスクメモビューアーの開発 (2025-04-23完了)
  • ✅ フェーズ1: 基本実装 (2025-04-22完了)
  • ✅ フェーズ2: 拡張機能の実装 (2025-04-22完了)
  • ✅ フェーズ3: ヘルプ機能とプレビュー機能 (2025-04-23完了)
  • ✅ フェーズ4: テストと最適化 (2025-04-23完了)
• ✅ Issue09: タグベースのタスク関連付け機能の実装 (2025-04-25完了)
  • ✅ フェーズ1: 基本データモデルとAPI (2025-04-24完了)
  • ✅ フェーズ2: フロントエンドの基本コンポーネント (2025-04-24完了)
  • ✅ フェーズ3: タグ管理機能 (2025-04-25完了)
  • ✅ フェーズ4: タグベースのフィルタリングと検索 (2025-04-25完了)
  • ✅ フェーズ5: UI/UXの最適化とテスト (2025-04-25完了)
  • ✅ フェーズ6: ドキュメントとフィードバック対応 (2025-04-25完了)
• ✅ Issue10: コードクリーンアップ (2025-04-26完了)
  • ✅ フェーズ1: バックエンドクリーンアップ (2025-04-25完了)
  • ✅ フェーズ2: フロントエンドクリーンアップ (2025-04-26完了)

詳細は CHANGELOG.md を参照してください。

機能要件

基本機能

• タスクの作成、表示、編集、削除（CRUD操作）
• タスクへのメモ追加機能
• タスクの完了状態の切り替え
• タスクの優先度設定
• タスクのタグ付け
• タスクの期限設定

データ永続化

• バックエンドでのJSON形式でのファイル保存
• アプリ起動時の自動データロード
• データ変更時の自動保存
• エクスポート/インポート機能

技術スタック

フロントエンド

• ライブラリ: React
• 言語: TypeScript
• ビルドツール: Vite
• リンター/フォーマッター: Biome
• テスト: Vitest + React Testing Library

バックエンド

• ランタイム: Node.js
• フレームワーク: Express
• 言語: TypeScript
• データ永続化: ファイルシステム (fs/promises)
• ロギング: Winston
• バリデーション: Zod

アーキテクチャ

TodoLogは、フロントエンドとバックエンドが分離されたアーキテクチャを採用しています：

• フロントエンド: ブラウザで動作するReactアプリケーション
• バックエンド: Node.js + Expressで実装されたAPIサーバー
• 通信: RESTful API

この構成により、ブラウザ環境でも動作し、かつファイルシステムを使ったデータ永続化も実現しています。

実行方法

初回セットアップ

# リポジトリのクローン
git clone https://github.com/yourusername/todolog.git
cd todolog

# 依存関係のインストール（フロントエンドとバックエンド両方）
npm run install:all

開発環境の起動

# 開発サーバーの起動（フロントエンドとバックエンド両方）
npm run dev

# フロントエンドのみ起動
npm run client:dev

# バックエンドのみ起動
npm run server:dev

ビルドと実行

# プロダクションビルド
npm run build

# バックエンドサーバーの起動
npm run start

プロジェクト構造

todolog/
├── client/             # フロントエンド
│   ├── public/
│   ├── src/
│   │   ├── components/ # UIコンポーネント
│   │   ├── hooks/      # カスタムフック
│   │   ├── services/   # APIクライアント
│   │   ├── types/      # 型定義
│   │   └── ...
│   └── ...
├── server/             # バックエンド
│   ├── src/
│   │   ├── config/     # 設定ファイル
│   │   ├── controllers/ # APIコントローラー
│   │   ├── middleware/ # ミドルウェア
│   │   ├── models/     # データモデル
│   │   ├── routes/     # APIルート
│   │   ├── services/   # ビジネスロジック
│   │   ├── types/      # 型定義
│   │   ├── utils/      # ユーティリティ
│   │   └── ...
│   └── ...
└── ...

APIエンドポイント

メソッド	エンドポイント	説明
GET	/api/tasks	タスク一覧の取得
GET	/api/tasks/:id	特定のタスクの取得
POST	/api/tasks	新しいタスクの作成
PUT	/api/tasks/:id	タスクの更新
DELETE	/api/tasks/:id	タスクの削除
PUT	/api/tasks/:id/toggle	タスクの完了状態の切り替え
PUT	/api/tasks/:id/memo	タスクのメモ更新
GET	/api/tags	タグ一覧の取得
POST	/api/backups	バックアップの作成
GET	/api/backups	バックアップ一覧の取得
POST	/api/backups/:filename/restore	バックアップからの復元
GET	/api/export	タスクデータのエクスポート
POST	/api/import	タスクデータのインポート
GET	/health	ヘルスチェック

データモデル

// タスクの型定義
interface Task {
  id: string;          // ユニークID
  title: string;       // タスクのタイトル
  completed: boolean;  // 完了状態
  priority: Priority;  // 優先度（High, Medium, Low）
  tags?: string[];     // タグ（オプション）
  dueDate?: string;    // 期限（ISO形式の文字列）
  createdAt: string;   // 作成日時（ISO形式の文字列）
  updatedAt: string;   // 更新日時（ISO形式の文字列）
  completedAt?: string; // 完了日時（ISO形式の文字列、未完了の場合はnull）
  memo?: string;       // メモ（オプション）
}

// 優先度の型定義
enum Priority {
  High = 'high',
  Medium = 'medium',
  Low = 'low'
}

環境設定

バックエンドの環境変数は .env ファイルで設定できます。サンプルとして .env.example を参照してください。

# サーバーポート
PORT=3001

# データディレクトリ
DATA_DIR=./data

# 環境
NODE_ENV=development

# ログレベル
LOG_LEVEL=info

注意事項

このアプリケーションは開発中であり、機能やAPIは変更される可能性があります。