【個人開発】React × Vite で「Game Progress Tracker」を作った話（V1.0公開）
個人開発として、React × Vite で ゲーム進捗管理アプリ（Game Progress Tracker） を作り、Vercelで公開しました。
- デモURL
👉 https://game-progress-tracker-v1.vercel.app - GitHub
👉 https://github.com/koyanagi-dev/game-progress-tracker-v1
本記事では 技術的なポイントや実装時のハマりどころ、解決方法 をまとめます。
📌 使用技術
- React
- Vite
- JavaScript / JSX
- Vitest + Testing Library（UIテスト30本）
- LocalStorage
- Vercel (Deploy)
- Git / GitHub
📌 実装した主要機能
- タスク追加・編集・削除
- 状態管理（未着手 / 進行中 / 完了 / 保留）
- カテゴリ別カラー
- Undo（削除取り消し）
- LocalStorage 保存
- ソート機能（昇順 / 降順 / 重複なし）
- プログレスバー
- IME入力Enter対応（日本語入力での誤送信防止）
🧪 UIテスト（Vitest + Testing Library）
UI操作ベースのテストを 30件以上 作成しました。
例：
- タスク追加／編集／削除の流れ
- Undoが正しく動作するか
- カテゴリ絞り込み
- ソート状態で順序が崩れないか
- LocalStorageからの復元が正しいか
Testing Library はユーザー操作に近いテストが書けるので非常に有用でした。
🧩 ハマった問題と解決方法（実例）
① GitHubにpushしても反映されない問題
原因は macOSキーチェーンとHTTPSの資格情報衝突 でした。
解決：
- SSH Keys を作り直す
- HTTPS → SSH push に移行
- 新リポジトリに再push
これで完全解決しました。
② 日本語入力（IME）中のEnterで誤送信される問題
compositionstart / compositionend のフラグを使い、
IME中は Enter を無効化して対処。
③ 状態変更時のソート順が崩れる問題
「状態変更ではソート再計算しない」という仕様で統一し、
UI/UXが安定しました。
🚀 デプロイ（Vercel）
Viteとの相性が非常に良く、設定はほぼ自動で完了しました。
- Build Command:
npm run build - Output:
dist - GitHubと連携してpush→自動デプロイ
初学者にもおすすめです。
🙌 まとめ
- 想像以上に「UIテストが学びになった」
- Undo実装やLocalStorage周りは個人開発の良い経験になる
- GitHubトラブルは大変だったが、良い勉強になった
- 個人開発のアウトプットとしては十分な形になった
📢 お知らせ
次はフルスタック総決算プロジェクト（Next.js / Prisma / PostgreSQL / Docker / AWSなど）の開発に入ります。
その前に、このアプリに関しての意見・改善案などあれば気軽にコメントください！