Executive Manager - Elegant Task Management

エグゼクティブマネージャー - 洗練されたタスク管理

)

React と Vite で構築された洗練されたタスク管理ウェブアプリケーションです。落ち着いた明るい色調と上品なダークタイポグラフィを特徴とする、限定感のあるハイエンドなデザインを備えています。

🚀 ライブデモ

• 本番環境: https://stargrrlmoonlight.github.io/SettingUpMcpServers

特長

• ✨ 洗練されたデザイン：落ち着いた明るいカラーパレットと上質なタイポグラフィ
• 📱 レスポンシブ対応：モバイルファーストのデザインで、あらゆるデバイスで快適に使えます
• 🎯 タスク管理：タスクの追加、編集、完了、削除
• 📅 期限：期限の設定と追跡ができ、期限超過の検出とスタイル表示にも対応
• ⭐ 優先度：視覚的なバッジで、高・中・低の優先度ごとにタスクを整理
• 🔄 スマートな並べ替え：優先度、期限、アルファベット順、作成日でタスクを並べ替え
• 🔍 フィルタリング：すべてのタスク、進行中のタスク、完了したタスクを表示
• 💾 データの永続化：タスクは自動的に localStorage に保存されます
• 💫 滑らかなアニメーション：さりげないトランジションとホバーエフェクト
• ♿ アクセシブル：適切なコントラスト比とキーボード操作に対応

デザインの理念

このアプリケーションでは、以下を特徴とするミニマルなデザインを採用しています。

• 落ち着いたカラーパレット（明るいグレー、オフホワイト、控えめな暖色）
• クラシカルなダークフォント（見出しには Crimson Text、本文には Inter）
• すっきりとした余白とタイポグラフィの階層構造
• 控えめなシャドウと上品な余白
• 洗練されたインタラクションを備えたモダンな UI コンポーネント

技術スタック

• React - 関数コンポーネントとフックを備えたモダンな UI ライブラリ
• Vite - 高速なビルドツールおよび開発サーバー
• CSS3 - CSS 変数とモダンな手法を使ったカスタムスタイル
• Google Fonts - 上品なタイポグラフィのための Crimson Text と Inter

🔄 高度なデュアルフロー CI/CD ワークフロー

このプロジェクトでは、インテリジェントな最適化により約 60% のパフォーマンス向上を実現する、高度な 2 フロー構成の CI/CD システムを採用しています。

最適化されたテスト、ビルド、デプロイのパイプライン

• デュアルフローアーキテクチャ：高速な PR テストと包括的な本番ワークフローを分離
• スマートなパフォーマンス：フローのインテリジェントな分離とキャッシュにより、実行時間を約 60% 短縮
• マトリックステスト：依存関係を最適化し、Node.js 18.x と 20.x で並列テスト
• 7 層のセーフガード：無限ループの包括的な防止とエラー回復システム
• 品質ゲート：ESLint によるリンティング、カバレッジ付き自動テスト、アクセシビリティ検証
• GitHub Pages へのデプロイ：すべてのテスト合格後にヘルス検証を行う自動デプロイ
• リリース管理：自動アーティファクト生成（.tar.gz、.zip）に対応したセマンティックバージョニング
• カバレッジインテリジェンス：実際のカバレッジ率を使って README バッジを自動更新

ワークフローの特長

• フロー 1（PR テスト）：開発者にすぐフィードバックを提供する高速な品質ゲート
• フロー 2（本番）：マージ後にビルド、デプロイ、リリースを行う完全なパイプライン
• 自動復旧：包括的なエラー処理を備えた自己修復メカニズム
• 状態検証：多層検証によってデプロイの問題を防止
• ブランチ保護：GitHub Copilot との連携により、必須のステータスチェックでコード品質を確保

はじめに

前提条件

• Node.js（v16 以上）
• npm または yarn

インストール

1. リポジトリをクローンします

2. 依存関係をインストールします。

   npm install
   

3. 開発サーバーを起動します。

   npm run dev
   

4. ブラウザーを開き、http://localhost:5173 にアクセスします

🤝 コントリビュート

皆さまからのコントリビュートを歓迎します！始めるには、コントリビューションガイドラインをご覧ください。

• 🔄 開発ワークフロー - 開発プロセス全体と GitHub Copilot との連携
• 📋 コントリビューションガイド - コントリビューター向けの総合ガイド
• 🛠 開発環境のセットアップ - 詳細なセットアップ手順
• 🧪 テストガイド - テストフレームワークとカバレッジ要件
• 🚀 デプロイガイド - CI/CD パイプラインとリリース管理
• 📝 プルリクエストテンプレート - PR のガイドライン

コントリビューター向けクイックスタート

1. Issue を確認する：オープン Issueを確認します
2. フォークしてクローンする：リポジトリをフォークし、フォークしたリポジトリをクローンします
3. ブランチを作成する：git checkout -b feature/issue-{number}-{description}
4. 変更を加える：コーディング規約とデザインガイドラインに従います
5. テストする：すべてのデバイスで変更が動作することを確認します
6. PR を提出する：Issue を参照するプルリクエストを作成します

開発ワークフロー

Issue 主導の開発で GitHub Flow に従います。

• すべての変更は GitHub Issue から始まります
• すべての開発作業でフィーチャーブランチを使用します
• マージ前に、プルリクエストで GitHub Copilot によるレビューが必要です
• Conventional Commits による整理されたコミット履歴
• CI/CD の品質ゲートによるブランチ保護

📖 ワークフローの全詳細と GitHub Copilot との連携については、WORKFLOW.mdをご覧ください

🎯 現在のロードマップ

最近完了した項目

• ✅ 期限と優先度 - 視覚的なインジケーターと期限超過の検出により、ユーザーが時間と集中力を管理できるようにします

優先機能

• 🏷️ カテゴリーとタグ - プロジェクトやコンテキストごとにタスクを整理します
• 🎯 ドラッグ＆ドロップによる並べ替え - 視覚的にタスクの優先順位を設定します

詳細な機能リクエストとバグ報告については、Issuesをご覧ください。

本番環境向けのビルド

npm run build

ビルドされたファイルは dist ディレクトリに配置されます。

プロジェクト構成

src/
├── components/
│   ├── Header.jsx         # Application header with title
│   ├── TodoList.jsx       # Main todo list container
│   ├── TodoItem.jsx       # Individual todo item
│   ├── AddTodo.jsx        # Add new todo form
│   ├── SaveIndicator.jsx  # Visual save confirmation
│   └── *.css              # Component-specific styles
├── hooks/
│   └── useLocalStorage.js # Custom hook for localStorage management
├── utils/
│   └── localStorage.js    # LocalStorage utilities and constants
├── App.jsx                # Main application component
├── App.css                # Global application styles
├── index.css              # Global CSS variables and reset
└── main.jsx               # Application entry point

データの永続化

タスクはブラウザーの localStorage に自動的に保存されるため、セッションをまたいで保持されます。アプリケーションには次の機能が含まれています。

• 自動保存：すべての変更がすぐに保存されます
• 視覚的なフィードバック：データが保存されると、控えめな「保存済み」インジケーターが表示されます
• データの復元：アプリに戻ると、タスクが復元されます
• 後方互換性：既存のタスクは、新機能に対応するため自動的に移行されます
• 開発用ユーティリティ：ブラウザーのコンソールコマンドを使ってデータを管理できます

タスク管理機能

優先度

視覚的なインジケーター付きで、タスクに次の3段階の優先度を割り当てられます。

• 高優先度（赤いバッジ）：すぐに対応する必要がある重要なタスク
• 中優先度（黄色いバッジ）：通常の重要度の標準的なタスク
• 低優先度（緑のバッジ）：時間に余裕があるときに完了できるタスク

期限と期限超過の検出

• タスクの作成時または編集時に、具体的な期限を設定します
• 期限は書式設定された日付で視覚的に表示されます
• 期限超過の検出：期限を過ぎたタスクには、赤いスタイルと控えめなアニメーションで「期限超過」のインジケーターが自動的に表示されます
• 期限の早い順にタスクを並べ替えて、近づいている締め切りを優先できます

スマートな並べ替えオプション

複数の並べ替えオプションでタスクを整理できます。

• 優先度：高 → 中 → 低の順
• 期限：期限の早い順（日付のないタスクは最後に表示されます）
• アルファベット順：タスクのテキストを A-Z の順に並べ替えます
• 作成日：新しいタスクを先に表示します（デフォルト）

編集機能の強化

タスクをダブルクリックして編集できます。

• タスクのテキストを更新する
• 優先度を変更する
• 期限を変更する
• すべての変更は自動的に保存されます

開発コンソールのユーティリティ

開発モードの実行中は、次のコンソールコマンドを使用できます。

// Clear all stored data
todoUtils.clearAllData()

// Export your data as JSON
const backup = todoUtils.exportData()

// Import data from a backup
todoUtils.importData(backup)

// View current todos
todoUtils.getCurrentTodos()

// Show help
todoUtils.help()

コントリビューション

1. リポジトリをフォークします
2. フィーチャーブランチを作成します
3. 変更を加えます
4. 十分にテストします
5. プルリクエストを送信します

ライセンス

MIT License — このプロジェクトは自由にご利用いただけます。