はじめに
初の個人開発記事になります。
ざっとサービス紹介と苦労した点などを書いています。
1. サービス概要
学習内容と時間を記録し、一覧・削除できるシンプルな学習記録アプリです。
2. 開発の背景
実力試しのため、シンプルなCRUDアプリ（なんでも良かったけどとりあえず学習記録アプリ）をReactで作ってみることにしました。
今回は意図的にAIツールをほぼ使わず、自力での実装にこだわりました。
理由は、AIバイブコーディングでは得られない「エラーに向き合い、公式ドキュメントを読み、原因を理解して解決する」プロセスを経験したかったからです。
趣味の範囲であればAIに任せてサッと作るのも一つの手だと思いますが、仕事として開発をしていく上では「なぜこう動いているのか」を理解していることが、技術選定や提案の幅を広げると感じています。
3. 使用技術
| 技術 | 用途 |
|---|---|
| React（JavaScript） | フロントエンド。今後TypeScript化を予定 |
| Vite | 開発環境構築・ビルドツール |
| ESLint | Lint |
| Supabase | データ永続化（DB） |
| Firebase Hosting | デプロイ先 |
| react-testing-library | 自動テスト（CI） |
4. こだわった点・工夫した点
-
データ永続化：Supabaseを導入し、学習記録の登録・取得・削除をクライアントから直接操作できるようにした
- Supabase選定理由は、「素早く開発」したかったためSupabase一択でした
-
自動テスト（CI）の導入：react-testing-libraryを用いて、テキスト入力やボタンクリックなどの操作を検証するテストを実装
- 画面をレンダリングして、ユーザー操作視点でテストケースを作成できるため、react-testing-libraryを採用
-
自動デプロイ（CD）：mainにpush時、自動でデプロイされるように対応しました
- デプロイ先はVercelかFirebaseで悩みましたが、firebase deploy コマンドによる手元からの検証を先にやりたかったため、採用しています（Vercelの方が簡単かもしれない）
5. 苦労した点
詳細な原因調査や試行錯誤の過程は、関連記事リンクにまとめています。
- Supabaseの環境変数まわりの設定（Project ID・Publishable Keyの取得方法が記事によって古く、公式Docを都度確認する必要があった）
- Firebase Hostingへのデプロイ方法（
firebase init hosting:githubを用いたGitHub連携が最もスムーズだった） - CIでのテスト実装（非同期処理・複数同一要素の特定）
関連記事リンク：
6. 今後の展望
- javascript -> typescript 化も考えています
- あとはデザインをもっと頑張る（Tailwindあたりで）
7. リンク
- GitHubリポジトリ：https://github.com/taki-umi/study-log-react
- 【メモ：デモURLをここに】
参考にさせていただいた記事：