こんにちは、個人開発者のnkitaoです。
今回は、私が個人開発したWebサービス「ShibaToDo」について少しご紹介させてください。
ShibaToDoは、Vimライクなキーボードショートカットを駆使して、最速でタスク管理ができるよう設計されたWebサービスのTodoアプリです。
この記事では、ShibaToDoの特徴や開発の背景、技術要素についてご紹介させていただきます✨
作ったもの
さっそくですが作ったものはこちら👇
使い方
ShibaToDoは、Vimライクなキーバインドを目指して、タスク操作に必要な様々なショートカットを用意しています。
-
現在位置から上へ移動:
kキー -
現在位置から下へ移動:
jキー -
プロジェクトを右移動:
lキー -
プロジェクトを左移動:
hキー -
タスクを下に追加:
aキー、 -
タスクを一番下に追加:
Shift + aキー -
タスクを上追加:
aキー -
タスクを一番上に追加:
Shift + aキー -
タスク完了:
Space -
インデント追加:
Tab -
Undo:
uキー -
Redo:
rキー
etc...
主な特徴
- タスクの作成から完了までマウス操作は不要 🖱️
-
ログイン不要で利用可能 🔓
- ログインすることでWeb上にデータを保存・履歴表示などが可能
- １行テキスト、詳細テキストなどの登録が可能 📝
- タスクを種類ごと（プロジェクト）に整理可能 📂
作成のきっかけ
タスク管理を長らくメモ帳で行ってきました。1行ずつ書き込むことで視覚的かつ直感的で分かりやすいというメリットがありましたが、次第に以下のような限界を感じるようになりました
- タスクの分類や優先度の管理が難しい
- 完了済みタスクの整理に手間がかかる
- 詳細情報を追記するスペースがない（または１行がかなり長くなる）
これらの課題を解消するために、Google TodoやMicrosoft Todo、Trelloといった一般的なタスク管理ツールを試しました。
どれも多機能で優れたデザインを持っており一時的には運用可能でしたが、次第に操作性に不満を感じるようになりました。特に、 「マウス操作の多さ」 が効率を妨げる原因でした。
私が求めていたのは、次のようなシンプルかつ高速なタスク管理です
- 思いついたタスクを即座に記録する。
- 必要最低限の情報で管理し、必要に応じて詳細を追加できる。
- 完了したタスクは速やかに処理する。
特に短期間で大量のタスクを処理する必要がある場合、タスク管理に時間をかけすぎること自体が非効率と感じていました。
これらの課題を解決するため、「自分専用のタスク管理ツール」を開発することを決意しました。
開発にあたり、以下の4つのニーズを最優先に設計を進めました
- キーボード操作に最適化
- ホームポジションから手を動かさずにすべての操作を完了できること。
- 1行タスク管理のシンプルさ
- 必要最低限の情報で素早くタスクを追加し、詳細を後から追記できる柔軟性。
- Undo機能の実装
- 操作ミスに即座に対応できる安心感を提供。
- タスクの順序維持
- メモ帳のようにタスクの位置をそのまま保つことで、視覚的な整理が容易に。
特にキーボード操作については、Vimライクなキーバインドを採用することで、効率性をさらに高めました。
これにより、タスクの追加、編集、完了が直感的に行えます。
このような背景のもと完成したのが、ShibaTodoです。
技術要素 💻
ShibaToDoの開発には以下の技術を使用しています。
フロントエンド
- Next.js
- Tailwind CSS
- shadcn/ui
- react-hotkeys-hook
- react-hook-form
- lucide-react
- React Activity Calendar
バックエンド
- Next.js
- Prisma
認証
- Auth0
インフラ&ホスティング
- Vercel
- Supabase
- AWS Amplify
- AWS Route 53
まとめ 🏁
ShibaToDoは、最速でタスク管理ができるように設計されたWebサービスです。
ぜひ一度触って、感想をお聞かせいただけるととても嬉しいです！
