読み込み中...

Web · 完了

タスクカレンダーツール

タスク管理とカレンダー表示を組み合わせたSPA。ドラッグ&ドロップでタスクを移動でき、週間カレンダービューでタスクの時間管理を視覚化

期間: 2025年7月 – 2025年7月
分野: Web
所属: 趣味（個人・チーム）
状態: 完了

概要

React + TypeScript + Viteで構築したタスク管理とカレンダー表示を組み合わせたSPAを開発しています。
週間カレンダービューでタスクを時間軸に沿って表示し、@dnd-kitを使用してドラッグ&ドロップでタスクを移動できる機能を実装しています。
Zustandを使用してタスク、カテゴリ、モーダル状態を管理し、Radix UIを使用してアクセシブルなコンテキストメニューを実装しています。
date-fnsを使用して日付操作を行い、Tailwind CSSでモダンなUIを構築しています。
Vitestを使用してテストを行っています。

アーキテクチャ

機能モジュールcalendar / task-list / task-edit など
状態管理Zustand
ドラッグ&ドロップ@dnd-kit
コンテキストメニューRadix UI

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コンポーネントの構築