🎉
🗓️ 開発記録｜日記アプリをCursorで作ってみた
日々の感情や出来事をサクッと記録できたら。
しかもテンプレートがあれば、もっと気軽に続けられるかも？
そんな思いつきから、テンプレート付き日記アプリを1日で開発してみました。
この記事では、開発の流れ、実装した機能、直面した課題、そして今後の改善点までをまとめています。
🎨 完成したUIはこちら
- 感情選択（😄😐😢）で気分をワンタップ入力
- テンプレートを選ぶだけで記録が完了
- 自由入力欄も完備で、カスタマイズ性も◎
- ダークモードにも対応
🔧 実装の流れ
1. 環境構築
- Next.js 15.x ＋ TypeScriptでプロジェクト立ち上げ
- TailwindCSS導入と開発サーバー動作確認
2. UIコンポーネント作成
5つの主要コンポーネントを設計＆実装しました。
| コンポーネント | 内容 |
|---|---|
MoodSelector |
😄・😐・😢で感情を選択 |
DiaryInput |
テキスト自由入力欄 |
TemplateSelector |
テンプレート選択UI |
DiaryEntries |
過去の日記表示 |
TemplateManager |
テンプレートの追加・編集・削除 |
3. データ管理
-
localStorageベースで保存・取得 - テンプレートや日記の管理
- 自動で日付・IDを付与
4. 統合と動作確認
- ページにすべての機能を統合
- 状態管理・データフロー設計
- 各種イベント処理の実装
5. UI改善
- Tailwindの
dark:クラスでダークモード対応 - コントラスト＆配色調整
- レスポンシブ対応確認
📦 実装済みの機能まとめ
- 感情記録（3種アイコン）
- 自由入力 + テンプレート記述
- テンプレートの追加・編集・削除
- 過去の記録を日付付きで保存・表示
- ダークモード対応
🕒 開発時間（約2時間強）
| フェーズ | 所要時間 |
|---|---|
| プロジェクト構築 | 15分 |
| UIコンポーネント開発 | 40分 |
| データ管理実装 | 15分 |
| 統合＆テスト | 20分 |
| UI調整 | 20分 |
| ドキュメント作成 | 10分 |
🚧 開発中に直面した課題と対処法
| 課題 | 解決策 |
|---|---|
Mood型の不一致 |
共通型を定義して各所で統一 |
DiaryInputの親子データ連携が不安定 |
onChangeで親に即時反映させる実装に |
| ダークモード時の文字色反転 | Tailwindのdark:クラスを適切に活用 |
🔭 今後追加したい機能
- エクスポート/インポート機能：バックアップや端末間共有のために
- 記録の絞り込み（フィルタ）機能：感情や日付で探しやすく
- 簡単なユーザーテスト：実使用時の改善点を洗い出し
✍️ 雑感と課題感：プロトタイプはつくりやすく、続けやすく
今回の開発で意識したのは、「書くことのハードルを下げる」という設計思想です。
テンプレートや気分選択のような“最初の一歩”を補助する工夫は、日記を継続する心理的な壁をかなり下げてくれると感じました。
とはいえ、現時点ではlocalStorageのみで完結する簡易アプリなので、以下の課題も見えました。
- データのポータビリティがない
- 検索・分析・可視化の余地がまだない
- ユーザーにとって「記録が報われる」体験設計が未完成
「書きやすさ」に加えて、「振り返りやすさ・つながりやすさ」をどう組み込んでいくかが次のステップだと考えています。
Discussion