スケジュール管理アプリ

Reactで作成されたシンプルで使いやすいスケジュール管理アプリケーションです。

🚀 機能

📋 主要機能

• スケジュール一覧表示 - すべてのスケジュールをリスト形式で表示
• スケジュール作成・編集 - 新しいスケジュールの作成と既存スケジュールの編集
• カレンダー表示 - 月間カレンダーでスケジュールを視覚的に確認
• フィルタリング - 今日、今後の予定などでスケジュールを絞り込み

🎨 UI/UX機能

• レスポンシブデザイン - モバイルとデスクトップに対応
• 直感的なナビゲーション - ヘッダーから各ページに簡単アクセス
• 優先度表示 - 高・中・低の優先度を色分けで表示
• リアルタイム検証 - フォーム入力時のバリデーション

💾 データ管理

• ローカルストレージ - ブラウザにデータを永続保存
• CRUD操作 - 作成、読み取り、更新、削除の完全サポート

🛠 技術スタック

• React - メインのフレームワーク
• React Router - ページルーティング
• date-fns - 日付操作とフォーマット
• Lucide React - アイコンライブラリ
• CSS3 - モダンなスタイリング

📦 インストール

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

git clone https://github.com/your-username/schedule-management-1.git
cd schedule-management-1

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

npm install

3. 開発サーバーを起動

npm start

4. ブラウザで http://localhost:3000 にアクセス

🎯 使用方法

スケジュールの作成

1. 「新規作成」ボタンをクリック
2. タイトル、日付、時間を入力（必須項目）
3. 説明、場所、優先度を設定（任意）
4. 「保存」ボタンをクリック

スケジュールの編集

1. スケジュール一覧で編集ボタンをクリック
2. 必要な情報を修正
3. 「更新」ボタンをクリック

カレンダー表示

1. 「カレンダー」タブをクリック
2. 月間カレンダーでスケジュールを確認
3. 日付をクリックして詳細を表示

フィルタリング

• すべて - すべてのスケジュールを表示
• 今日 - 今日のスケジュールのみ表示
• 今後の予定 - 今日以降のスケジュールを表示

対応デバイス

このアプリは以下のデバイスで最適化されています：

• デスクトップ（1200px以上）

🔧 開発

利用可能なスクリプト

• npm start - 開発サーバーを起動
• npm run build - 本番用ビルドを作成
• npm test - テストを実行
• npm run eject - Create React Appの設定を展開

📄 ライセンス

このプロジェクトはMITライセンスの下で公開されています。

🤝 貢献

プルリクエストやイシューの報告を歓迎します。

📞 サポート

問題や質問がある場合は、GitHubのIssuesページでお知らせください。