React×Vite×Tailwindで作る階層型ToDoリストを公開しました
🔗 実際のアプリURL
⚡️ 作ったものの概要
階層構造に対応したToDoリストアプリです。
- 親タスク → 子タスク → 子の子タスク の階層表示
- ドラッグアンドドロップで順番入れ替え
- 完了チェックボックスの切り替え
- データのローカル保存と引き続き
- JSONエクスポート / インポート対応
⛏️ 作った理由
- 階層構造のメモ、タスク管理ができるものがほしかった
- Reactでの再帰コンポーネントやDnDを実践したかった
- 仕事以外で好きなものを作ってみたかった
使用技術
- React + TypeScript + Vite
- Tailwind CSS
- @dnd-kit/core（DnD実装）
- lucide-react（アイコン）
- gh-pages（GitHub Pages公開）
🛠 工夫した点
- 再帰表示で階層構造を満たせるロジック
- バックエンドを使わずに、フロントエンドだけで保存する機能
- localStorageで自動保存するロジック
- JSONダウンロード/アップロード
🚀 今後のアイデア
- タスクに期限を指定
- ステータスの自由設定
- タグ分類やフィルター機能
おわりに
ここまで読んでくださってありがとうございます！
今回の開発では、ChatGPTの助けを借りながら進めました。やりたいことを指示するだけで、ソースコードの提案や丁寧な解説が得られ、ストレスの少ない開発体験ができました。
とはいえ、実際に動かして調整したり、表示や動作を確認して理解していく中で、自分自身の学びや気づきもたくさんありました。
もし「作りたいけど難しそう…」と感じている方がいれば、こういったAIの力を借りてでも、まず一歩踏み出すのは本当におすすめです！
良いなと思ったらGitHubで星をつけたり
フィードバックを頂けたら嬉しいです！