TaskFlow

React + TypeScript で構築されたモダンなタスク管理アプリケーション

✨ 主要機能

📋 タスク管理

ドラッグ&ドロップ: 直感的なタスク移動とカラム並び替え
カスタムラベル: 10種類のPrimerカラーバリアント対応
期限管理: 期限切れ・当日・明日期限の自動警告表示
時刻設定: 期限日に詳細時刻を設定（デフォルト23:59）
繰り返し設定: 毎日・毎週・毎月・毎年の自動タスク再作成・期限なし繰り返し対応
完了機能: ワンクリックでタスク完了状態を切り替え
タスク複製: 既存タスクを簡単に複製して効率的に作業
サブタスク: チェックリスト形式のサブタスク管理と進捗表示
サブタスク並び替え: ドラッグ&ドロップによるサブタスクの順序変更
リッチテキストエディタ: 太字・斜体・下線・取り消し線・リンク・コードブロック・emoji picker対応の高機能エディタ
優先度管理: Critical/High/Medium/Low 4段階優先度システム
テンプレート機能: タスクテンプレートの作成・編集・削除・お気に入り・カテゴリー管理

🤖 AI機能（GraphQL統合）

NEW! 自然言語によるタスク作成とAI推奨機能

AI自然言語タスク作成: "明日までにレポート" → 自動的に期限・優先度付きタスク生成
AI推奨タスク: コンテキスト分析に基づく次のタスク提案
リアルタイム通知: WebSocket経由でタスクの作成・更新をリアルタイム受信

セットアップ:

# 1. GraphQLバックエンド起動（必須）
cd taskflow-graphql
npm run dev
# → http://localhost:4000/graphql

# 2. 環境変数設定
echo "VITE_GRAPHQL_URL=http://localhost:4000/graphql" >> .env

# 3. フロントエンド起動
npm start

詳細は GraphQL統合ガイドを参照してください。

📎 ファイル機能

ファイル添付: ドラッグ&ドロップによるファイルアップロード（5MBまで）
プレビュー: 画像・テキストファイルのフルスクリーンプレビュー
ダウンロード: Base64エンコード形式でブラウザ内保存・ダウンロード

📅 カレンダービュー

月次表示: タスクをカレンダー形式で視覚的に管理
期限ベース: 期限日ごとにタスクを整理して表示
インタラクティブ: カレンダーから直接タスクの詳細確認・編集
フィルタリング: カレンダー内でもラベルやステータスでフィルタ可能
ソート機能: 各日付内でタスクの並び順をカスタマイズ

📋 カンバンビュー

ドラッグ&ドロップ: 直感的なタスク移動とステータス変更
カラム移動: kebabメニューからカラムを左右に移動
デフォルトカラム設定: 新しいボード作成時のカラム設定をカスタマイズ
完了タスク配置: 完了タスクを自動的にカラムの最上部に配置

📊 テーブルビュー

カラム管理: 表示カラムの表示/非表示切り替え機能
豊富な表示項目: タスク名・ステータス・期限・ラベル・サブタスク・ファイル・進捗・作成日・更新日・完了日・説明・繰り返し設定
タスク件数表示: リアルタイムなタスク数カウンター
進捗表示: サブタスクの完了状況を視覚的なプログレスバーで表示

🔍 フィルタリング・ソート

スマートフィルタ: 期限別・ラベル別・優先度別の高度なフィルタリング
多軸ソート: 作成日・更新日・期限・名前・優先度順の5種類ソート
統計表示: 未完了タスク数・期限警告の集計表示

💾 データ管理

ローカル保存: ブラウザのlocalStorageでオフライン対応
データインポート: JSONファイルによるデータ一括インポート
ボード選択エクスポート: 任意のボードを選択してデータエクスポート
複数ボード: プロジェクト別のボード管理
ラベル管理: ラベルの作成・編集・削除・ソート機能付きテーブル表示
ごみ箱機能: 削除されたタスクの一時保存・復元機能（ソフトデリート対応）
テンプレート管理: テンプレートのインポート・エクスポート・バックアップ機能
データアクセスポリシー: IndexedDB（ローカル）とGraphQL（リモート）の明確な役割分離

⚙️ 設定機能

デフォルトカラム設定: 新しいボード作成時のカラム設定をカスタマイズ
ごみ箱機能: ソフトデリートされたタスクの管理・復元・設定機能
テンプレート設定: テンプレートカテゴリー・お気に入り・使用統計管理

🎨 UI/UX

Shadcn/UI: モダンで統一されたデザインシステム採用
Tailwind CSS: ユーティリティファーストによる柔軟なスタイリング
レスポンシブ: モバイル・デスクトップ対応
アクセシビリティ: WCAG準拠のアクセシブルUI
ダークモード: ユーザー設定に応じたテーマ対応

📱 PWA機能

オフライン対応: ネットワーク接続なしでもアプリケーション使用可能
インストール可能: デスクトップ・モバイルのホーム画面に追加可能
自動更新: 新バージョンの自動検出と更新通知
高速起動: Service Workerによるキャッシュで高速なアプリケーション起動
アプリショートカット: 新規タスク・カンバン・カレンダーへのクイックアクセス
通知基盤: 将来的なタスク期限リマインダー通知に対応

詳細は PWA機能ドキュメントを参照してください。

🌐 デモ

本番環境: https://tflow-app.vercel.app

🚀 クイックスタート

環境要件

Node.js 18.0.0以上
npm 8.0.0以上

インストール

# リポジトリのクローン
git clone git@github.com:sanae-abe/task-flow.git
cd task-flow

# 依存関係のインストール
npm install

# 開発サーバーの起動
npm start

アプリケーションは http://localhost:3000 で起動します。

AI機能を使用する場合（オプション）

# 1. GraphQLバックエンドのセットアップ
cd taskflow-graphql
npm install
npm run dev
# → http://localhost:4000/graphql

# 2. フロントエンドの環境変数設定
cd ../taskflow-app
echo "VITE_GRAPHQL_URL=http://localhost:4000/graphql" >> .env

# 3. GraphQL型定義の生成
npm run codegen

# 4. フロントエンド起動
npm start

詳細は GraphQL統合ガイドを参照してください。

🛠️ 利用可能なスクリプト

開発

npm start              # 開発サーバー起動
npm run typecheck      # TypeScript型チェック
npm run typecheck:watch # TypeScript型チェック（ウォッチモード）
npm run lint           # ESLintによるコード品質チェック・自動修正
npm run lint:check     # ESLintチェックのみ（修正なし）
npm run format         # Prettierによるコード整形
npm run format:check   # Prettierチェックのみ（整形なし）

GraphQL開発

npm run codegen        # GraphQL型定義生成（.graphqlファイルから）
npm run codegen:watch  # GraphQL型定義生成（ウォッチモード）

使用例:

src/graphql/*.graphql でクエリ/ミューテーション定義
npm run codegen で型安全なReact Hooks生成
src/generated/graphql.ts から自動生成されたhooksをインポート

テスト

単体テスト（Vitest）

npm test               # インタラクティブテスト実行（Vitest）
npm run test:run       # 単発テスト実行
npm run test:coverage  # カバレッジレポート生成
npm run test:ci        # CI用テスト実行
npm run test:ui        # Vitest UIダッシュボード

E2Eテスト（Playwright）

npm run test:e2e           # すべてのE2Eテスト実行
npm run test:e2e:ui        # Playwright UIモードで実行（推奨）
npm run test:e2e:debug     # デバッグモードで実行
npm run test:e2e:headed    # ヘッド付きモードで実行
npm run test:e2e:chromium  # Chromiumのみ実行
npm run test:e2e:firefox   # Firefoxのみ実行
npm run test:e2e:webkit    # WebKit (Safari)のみ実行
npm run test:e2e:mobile    # モバイルブラウザで実行
npm run test:e2e:report    # テストレポート表示
npm run test:e2e:codegen   # テストコード生成（録画）

詳細は E2Eテストガイドを参照してください。

ビルド・デプロイ

npm run build         # プロダクションビルド
npm run build:prod    # プロダクションビルド + サイズ解析
npm run analyze       # バンドルサイズ解析（ビルド後実行）
npm run analyze:size  # ビルド済みファイルのサイズ解析

コード品質

npm run quality        # 全品質チェック実行
npm run quality:fix    # 自動修正付き品質チェック
npm run audit          # セキュリティ監査
npm run audit:fix      # セキュリティ脆弱性の自動修正
npm run audit:security # 高レベルセキュリティチェック
npm run lint:security  # セキュリティ特化ESLintチェック
npm run check-deps     # 依存関係の更新チェック
npm run pre-commit     # コミット前品質チェック

パフォーマンス・SEO

npm run lighthouse     # Lighthouseパフォーマンス監査
npm run seo:validate   # SEO検証（ビルド + Lighthouse）

🏗️ 技術スタック

フロントエンド

React 19.2.0: UIライブラリ
TypeScript 5.7.3: 型安全性とDX向上
Vite 7.1.12: 高速ビルドツール・開発サーバー
Shadcn/UI: モダンなUIコンポーネントライブラリ
Tailwind CSS 4.1.16: ユーティリティファーストCSS（最新版）
@radix-ui: アクセシブルなプリミティブコンポーネント
@dnd-kit: ドラッグ&ドロップ機能
Lexical 0.35.0: 高性能リッチテキストエディタ
emoji-picker-react: リッチテキストエディタ用絵文字ピッカー
date-fns 4.1.0: 日付処理ライブラリ
lucide-react: 統一アイコンライブラリ
DOMPurify: HTMLサニタイズによるセキュリティ強化

バックエンド・API

Apollo Client 4.0.9: GraphQL クライアント（キャッシング・型安全性）
GraphQL 16.12.0: API クエリ言語
GraphQL Code Generator: 型安全なReact Hooks自動生成
taskflow-graphql: Apollo Server 4.x バックエンド（AI機能・リアルタイム通知）

データ管理

IndexedDB: オフライン優先のローカルストレージ（プライマリ）
GraphQL API: AI機能・リアルタイム更新（セカンダリ）

データアクセスポリシー:

IndexedDB直接アクセス: タスク/ボード/ラベルのCRUD、オフライン操作
GraphQL経由: AI自然言語タスク作成、推奨タスク、WebSocket購読
詳細: data-access-policy.ts

PWA技術

Service Worker: オフライン対応・キャッシング戦略
Web App Manifest: インストール機能・アプリショートカット
Notifications API: 通知機能基盤
Share Target API: 外部からのタスク共有対応

開発ツール

Vite: 超高速ビルドシステム・HMR対応
Vitest 4.0.3: 高速単体テストフレームワーク
Playwright: E2Eテスト・クロスブラウザテスト
ESLint: コード品質・セキュリティチェック
Prettier: コード整形
React Testing Library: UIテスト

アーキテクチャ

Context API: グローバル状態管理
Custom Hooks: ロジック再利用
Component-based: 再利用可能なコンポーネント設計
TypeScript Strict: 厳密な型チェック

📁 プロジェクト構造

src/
├── components/                          # 再利用可能なUIコンポーネント
│   ├── CalendarView/                   # カレンダービュー（モジュラー分割）
│   │   ├── components/                 # カレンダー専用コンポーネント
│   │   ├── hooks/                      # カレンダーロジック
│   │   └── styles/                     # カレンダースタイル
│   ├── DataManagement/                 # データ管理パネル
│   ├── LabelManagement/                # ラベル管理システム
│   │   ├── components/                 # ラベル管理コンポーネント
│   │   └── hooks/                      # ラベル管理ロジック
│   ├── LabelSelector/                  # ラベル選択システム
│   ├── NotificationContainer/          # 通知システム
│   ├── RecycleBin/                     # ごみ箱機能（詳細ダイアログ付き）
│   │   ├── components/                 # ごみ箱専用コンポーネント
│   │   │   └── DetailDialog/          # 詳細ダイアログシステム
│   │   └── settings/                   # ごみ箱設定
│   ├── RecurrenceDetailDialog/         # 繰り返し設定ダイアログ
│   │   ├── components/                 # 繰り返し設定コンポーネント
│   │   ├── hooks/                      # 繰り返し設定ロジック
│   │   └── types/                      # 繰り返し設定型定義
│   ├── RichTextEditor/                 # リッチテキストエディタ（12モジュール分割）
│   │   ├── components/                 # エディタコンポーネント
│   │   ├── hooks/                      # エディタロジック
│   │   └── utils/                      # エディタユーティリティ
│   ├── SubTaskItem/                    # サブタスクアイテム（詳細分割）
│   │   ├── components/                 # サブタスク専用コンポーネント
│   │   ├── hooks/                      # ドラッグ&ドロップロジック
│   │   └── styles/                     # サブタスクスタイル
│   ├── TableView/                      # テーブルビュー（23ファイル分割）
│   │   ├── components/                 # テーブル専用コンポーネント
│   │   ├── hooks/                      # テーブルロジック
│   │   └── utils/                      # テーブルユーティリティ
│   ├── TaskCreateDialog/               # タスク作成ダイアログ（8モジュール分割）
│   │   ├── components/                 # タスク作成コンポーネント
│   │   └── hooks/                      # タスク作成ロジック
│   ├── TemplateManagement/             # テンプレート管理システム
│   ├── shared/                         # 共有コンポーネント
│   │   ├── Dialog/                     # ダイアログシステム
│   │   ├── Form/                       # フォームシステム
│   │   │   └── fields/                 # フォームフィールド
│   │   └── Menu/                       # メニューシステム
│   ├── PWAInstallPrompt.tsx            # PWAインストールプロンプト
│   ├── ServiceWorkerUpdateNotification.tsx  # Service Worker更新通知
│   └── ...                             # その他のコンポーネント
├── contexts/                            # React Context (状態管理)
├── hooks/                               # カスタムフック
│   ├── usePWA.ts                       # PWA状態管理フック
│   ├── useAITaskCreation.ts            # AI自然言語タスク作成（未実装）
│   ├── useAIRecommendations.ts         # AI推奨タスク（未実装）
│   └── useTaskSubscriptions.ts         # リアルタイム通知（未実装）
├── graphql/                             # GraphQL クエリ定義
│   ├── ai-features.graphql             # AI機能（mutation/query）
│   └── subscriptions.graphql           # リアルタイム購読
├── generated/                           # 自動生成ファイル
│   └── graphql.ts                      # 型安全なReact Hooks（1,420行）
├── lib/                                 # ライブラリ・ユーティリティ
│   ├── apollo-client.ts                # Apollo Client設定（206行）
│   ├── data-access-policy.ts           # データアクセスポリシー（384行）
│   └── graphql-error-handler.ts        # GraphQLエラーハンドリング（未実装）
├── types/                               # TypeScript型定義
├── utils/                               # ユーティリティ関数
│   ├── notifications.ts                # 通知管理
│   ├── serviceWorker.ts                # Service Worker管理
│   ├── settingsStorage.ts              # 設定永続化
│   └── templateStorage.ts              # テンプレート管理
└── App.tsx                              # メインアプリケーション

🔧 設定

ESLintカスタマイズ

# セキュリティ重視の設定
npm run lint:security

# 自動修正
npm run lint -- --fix

TypeScript設定

strict: true - 厳密な型チェック
noEmit: true - 型チェックのみ実行

テストカバレッジ目標

Branches: 80%
Functions: 80%
Lines: 80%
Statements: 80%

🤝 コントリビューション

フォークを作成
フィーチャーブランチを作成 (git checkout -b feature/amazing-feature)
変更をコミット (git commit -m 'Add amazing feature')
ブランチにプッシュ (git push origin feature/amazing-feature)
プルリクエストを作成

開発ガイドライン

TypeScript strictモード必須
ESLint + Prettier準拠
テストカバレッジ80%以上
セキュリティファーストの設計

📝 ライセンス

MIT License - 詳細は LICENSE ファイルを参照

🙏 謝辞

Vite - 高速ビルドツール・開発サーバー
Vitest - 高速テストフレームワーク
Shadcn/UI - モダンなUIコンポーネントライブラリ
Tailwind CSS - ユーティリティファーストCSS
Radix UI - アクセシブルなプリミティブコンポーネント
Lucide - 美しいアイコンライブラリ
dnd kit - ドラッグ&ドロップライブラリ
Apollo GraphQL - GraphQLクライアント・サーバー

📚 ドキュメント

GraphQL統合ガイド - AI機能・リアルタイム通知の使い方
GraphQLアーキテクチャ - システムアーキテクチャ詳細
PWA機能ドキュメント - PWA機能の詳細説明
E2Eテストガイド - Playwrightテストの書き方
データアクセスポリシー - IndexedDB vs GraphQLのルール

💡 Pro Tip: npm run quality:fix でコード品質を一括改善できます！

Name		Name	Last commit message	Last commit date
Latest commit History 866 Commits
.claude		.claude
.github		.github
.serena		.serena
.vscode		.vscode
docs		docs
e2e		e2e
public		public
scripts		scripts
src		src
taskflow-graphql		taskflow-graphql
--check		--check
.editorconfig		.editorconfig
.env.example		.env.example
.gitignore		.gitignore
.lighthouserc.cjs		.lighthouserc.cjs
.mcp.json		.mcp.json
.prettierignore		.prettierignore
.prettierrc.json		.prettierrc.json
E2E_IMPLEMENTATION_SUMMARY.md		E2E_IMPLEMENTATION_SUMMARY.md
E2E_TEST_REPORT.md		E2E_TEST_REPORT.md
I18N_IMPLEMENTATION_SUMMARY.md		I18N_IMPLEMENTATION_SUMMARY.md
PERFORMANCE_MONITORING_SETUP.md		PERFORMANCE_MONITORING_SETUP.md
PWA_E2E_TEST_IMPLEMENTATION.md		PWA_E2E_TEST_IMPLEMENTATION.md
README.md		README.md
TODO.md		TODO.md
codegen.yml		codegen.yml
commands.toml		commands.toml
components.json		components.json
eslint.config.js		eslint.config.js
i18n-implementation-report.md		i18n-implementation-report.md
i18n-verification.sh		i18n-verification.sh
index.html		index.html
lighthouserc.js		lighthouserc.js
package-lock.json		package-lock.json
package.json		package.json
performance-budget.json		performance-budget.json
playwright.config.ts		playwright.config.ts
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
todos.md		todos.md
tsconfig.json		tsconfig.json
vercel.json		vercel.json
vite.config.ts		vite.config.ts
vitest.config.ts		vitest.config.ts

Folders and files

Latest commit

History

Repository files navigation

TaskFlow

✨ 主要機能

📋 タスク管理

🤖 AI機能（GraphQL統合）

📎 ファイル機能

📅 カレンダービュー

📋 カンバンビュー

📊 テーブルビュー

🔍 フィルタリング・ソート

💾 データ管理

⚙️ 設定機能

🎨 UI/UX

📱 PWA機能

🌐 デモ

🚀 クイックスタート

環境要件

インストール

AI機能を使用する場合（オプション）

🛠️ 利用可能なスクリプト

開発

GraphQL開発

テスト

単体テスト（Vitest）

E2Eテスト（Playwright）

ビルド・デプロイ

コード品質

パフォーマンス・SEO

🏗️ 技術スタック

フロントエンド

バックエンド・API

データ管理

PWA技術

開発ツール

アーキテクチャ

📁 プロジェクト構造

🔧 設定

ESLintカスタマイズ

TypeScript設定

テストカバレッジ目標

🤝 コントリビューション

開発ガイドライン

📝 ライセンス

🙏 謝辞

📚 ドキュメント

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages