読み込み中...
タスクカレンダーツール
2025年7月 - 2025年7月
趣味
プロジェクト概要
React + TypeScript + Viteで構築したタスク管理とカレンダー表示を組み合わせたSPAを開発しています。週間カレンダービューでタスクを時間軸に沿って表示し、@dnd-kitを使用してドラッグ&ドロップでタスクを移動できる機能を実装しています。Zustandを使用してタスク、カテゴリ、モーダル状態を管理し、Radix UIを使用してアクセシブルなコンテキストメニューを実装しています。date-fnsを使用して日付操作を行い、Tailwind CSSでモダンなUIを構築しています。Vitestを使用してテストを行っています。
アーキテクチャ
Vite + React + TypeScriptでSPAとして構築しています。機能別にディレクトリを分割し、calendar、task-edit、task-drag-drop、task-listなどの機能モジュールに分離しています。Zustandを使用してタスク、カテゴリ、モーダル、ナビゲーション、レイアウトの状態を管理し、各機能モジュールから必要な状態を参照します。@dnd-kitを使用してドラッグ&ドロップ機能を実装し、タスクリストからカレンダーへの移動や、カレンダー内での日付・時間の変更を可能にしています。Radix UIを使用してコンテキストメニューを実装し、タスクやカテゴリの編集・削除機能を提供しています。
技術的挑戦
- 週間カレンダービューでのタスクの時間軸表示とレイアウト計算 → date-fnsを使用して日付操作を行い、タスクの開始時間と継続時間から位置とサイズを計算
- @dnd-kitを使用したドラッグ&ドロップ機能の実装 → タスクリストからカレンダーへの移動や、カレンダー内での日付・時間の変更を実現
- Zustandを使用した状態管理の設計 → タスク、カテゴリ、モーダル、ナビゲーション、レイアウトの状態を適切に分離し、各機能モジュールから参照
- Radix UIを使用したアクセシブルなコンテキストメニューの実装 → キーボード操作やスクリーンリーダーに対応したUIコンポーネントの構築