【個人開発1作目】時間管理アプリ「TickTockTask」を10日間でリリースしました！🚀
こんにちは！普段はコーダーとして活動していますが、今回初めて個人開発にチャレンジしました。
使用した技術はNext.js、React、TypeScript、Tailwind CSS。正直、これらの技術はあまり慣れていませんでしたが、試行錯誤しながら**約10日間（実装時間は18時間ほど）**でリリースできたので、その体験を共有します。
🎯 作ったもの - TickTockTask
「TickTockTask」は、現在の時刻と登録したタスクまでの残り時間をアナログとデジタルで表示する時間管理アプリです。
以下のような悩みを持つ人に向けて開発しました。
- 子どもに時計の読み方を教えたい
- 育児や家事、仕事のルーティンを効率化したい
- 在宅ワーク中に時間を見える化したい
ブラウザのローカルストレージにデータが保存されるので、会員登録は不要！タスクを登録するだけで、すぐに使い始められます。
🔧 使用した技術スタック
- Next.js（フレームワーク）
- React（UIライブラリ）
- TypeScript（型安全なJavaScript）
- Tailwind CSS（ユーティリティファーストのCSSフレームワーク）
📅 開発期間と作業時間
- 制作期間: 10日間
- 実装時間: 約18時間
初めて触る技術が多かったので、調べる時間が多く、実際にコードを書いていたのは18時間くらいでした。
💡 なぜこのアプリを作ったのか？
子どもの時計の読み方を練習するため、そして自分自身の日々のタスク管理をもっとシンプルにしたいと思ったのがきっかけです。
育児、家事、仕事のルーティーンに追われる中で、**「今どれくらい時間が残っているのか？」**を一目で把握できるツールがあれば便利だと感じ、今回の開発に踏み切りました。
🚀 機能紹介
- 🕒 アナログ＆デジタル時計で現在時刻とタスクの残り時間を表示
- ✅ タスク登録機能（ブラウザのローカルストレージに保存）
- 🌐 日本語・英語対応
- 🔒 会員登録不要で即利用可能
🛠️ 開発中に苦労したこと
1. Next.jsとTypeScriptに不慣れだったこと
初めて使う技術スタックだったので、型エラーに悩まされることも多く、特に型定義とPropsの受け渡しで手間取りました。
2. ローカルストレージの扱い
ブラウザにデータを保存するためにローカルストレージを使いましたが、**サーバーサイドレンダリング（SSR）**と絡めると、window オブジェクトが使えない場面が多く苦戦しました。
3. Tailwind CSSの慣れ
普段のCSSの書き方とは違うので、クラス名の付け方に慣れるまでに時間がかかりました。ただ、慣れるとスタイリングが圧倒的に早くなるので、今ではかなり気に入っています。
✨ 学びと得られたこと
- Next.jsの基本的な構造やページ遷移、SSRとCSRの違いについて理解が深まった
- TypeScriptの型の重要性と、エディタの補完機能の便利さを実感
- Tailwind CSSの効率的なスタイリングに感動
特にTypeScriptに関しては最初は「面倒だな」と感じていましたが、途中からは型エラーがバグの未然防止につながることに気付き、むしろ安心感を持って開発できるようになりました。
🔗 完成したアプリはこちら！
ぜひ試してみてください！フィードバックもお待ちしています😊
📩 最後に
今回のプロジェクトを通じて、初めての個人開発でも「やってみる」ことの大切さを実感しました。今後は会員登録機能の追加、デザインの強化、集客・収益化に取り組んでいきます。
読んでいただき、ありがとうございました！🙌
Discussion