はじめに
こんにちは，記事を読んでくださりありがとうございます！
今回は開発経験ゼロだった自分が，firebaseとReactなどを利用して『ふくログ!!』を作ったので紹介します！
簡単な自己紹介
技術を通して成長できる仕事がしたいと思い、今年の５月頃から本格的に独学でWeb開発について学んできた駆け出しエンジニア（大学三年）です。最近はTypeScriptを中心に開発しています。趣味はサッカーで小学一年から高校三年まで12年間続けてきました。高校では関東大会出場を果たしました。
ポートフォリオサイトhttps://my-portfolio--site.pages.dev/
ふくログ!!の概要
服の購入状況を視覚化し、効果的に管理する WEB アプリです。このアプリでは、あなたが購入した服の「色」や「カテゴリ」（トップス、ボトムス、アウターなど）ごとの購入数や支出額をグラフで一目で確認できます。たとえば、カラーバリエーション、アイテムカテゴリ別の円グラフを使って、どの色の服が多いのか、どのカテゴリにお金をかけているのかが直感的に把握できるようになっています。
ふくログ!!はこちら
GitHubリポジトリ
このサービスへの思い・制作した理由
自分が欲しい！
という理由がありました。具体的には、まず、自分が服が好きで、自分がどのようなアイテムに多くの出費をしているのか、どの色のアイテムを多く持っているのかを忘れてしまうことがありました。そのため、手持ちの服とのバランスを考えずに、似たようなアイテムを無意識に買ってしまうこともありました。そんな課題を解決するために、購入した服を「色」や「カテゴリ」ごとに整理し、視覚的に把握できるツールを作りたいという思いで、このアプリを開発しました。自分が欲しいという理由というのがモチベーションになり、1ユーザーとしての視点で開発することができました。
アプリの機能
【メイン機能】
-
服購入の「保存」「削除」「変更」機能（バックエンドには FireStore を利用）
- 日付、「カテゴリ」「ジャンル」「カラー」、金額、内容を保存
- React Hook Formを使用してユーザー入力を管理
- Zodバリテーションチェックによるエラー
-
カレンダー機能（FullCalendar を利用）
- カレンダーの日付に収支を表示
- 日付ごとの収支を表示
-
金額集計機能
- 今年の服代を表示
- 選択した月の服代を表示
- 日付ごとの服代を表示
-
グラフ表示
- 「カテゴリ」「ジャンル」「カラー」ごとの合計購入数を表示した円グラフ
- 円グラフの選択している月と年に切り替え可能
- 選択している月の日別の服代の割合を表示した棒グラフ
-
レスポンシブ対応
-
ユーザー認証機能追加（2024/10/06）
- Google と GitHub にてログイン可能
- Firebase Authenticationがユーザーを認証し、認証情報を取得
- 認証情報はReduxを通じてアプリ全体で管理。
使い方イメージ
- ログイン画面
- ホーム画面
- 入力フォーム
- レポート画面
【スマホ画面】
 |
 |
 |
 |
 |
 |
 |
 |
使用技術、データ構造
技術スタック
1. フロントエンド
- フレームワーク: React + TypeScript
- デザイン/UIライブラリ: MUI (Material-UI)
- 状態管理: Redux + Redux Toolkit
- フォーム管理: React Hook Form
- バリデーション: Zod
- カレンダー表示: FullCalendar
- グラフ描画: react-chartjs-2
- 日付操作: date-fns
- モジュールバンドラー: Vite
2. バックエンド
- バックエンドサービス: Firebase
- データベース: Firestore
- 認証機能: Firebase Authentication (GoogleおよびGitHubログイン)
- ホスティング: Firebase Hosting
これらの技術の選定理由はドキュメントがしっかりしているか、メンテナンスがされているかという点で決めています。自分自身、個人開発かつ開発経験が浅いということもあり、参考にできるものが多い方が嬉しかったり、Reactの進化がすごいので、それに対応していってくれるかどうかというのもありました。
Firestoreデータ構造
users (コレクション)
│
├── user_uid_1 (ドキュメント)
│ ├── name: "ユーザーA"
│ ├── auth_provider: "Google"
│ └── purchases (サブコレクション)
│ ├── purchase_id_1 (ドキュメント)
│ │ ├── date: ""
│ │ ├── category: ""
│ │ ├── genre: ""
│ │ ├── color: ""
│ │ ├── amount: 0
│ │ └── description: ""
│ └── purchase_id_2 (ドキュメント)
│ └── ...
├── user_uid_2 (ドキュメント)
│ └── ...
こだわった点
1. グラフによるデータの視覚化
「色」や「カテゴリ」、「ジャンル」フィールドを作成し、react-chartjs-2を使用して、円グラフや棒グラフで表示し、自分のファッションの傾向を一目で把握できるようにした。
2. ユーザー目線での開発（ユーザーエクスペリエンスの向上）
フォームのバリデーションで入力ミスをなくしたり、レスポンシブデザインにしてデバイスの画面サイズに応じた最適なレイアウトを実現するなどユーザーに寄り添った開発を意識しました。例えば色に関しても以下のように直感的に分かりやすいように工夫したり、数字をフォーマットにかけて日本円表示にするなどしました。
 |
 |
追加したい機能・改善点
- 服の画像保存・表示機能
Firebase Storageを利用して画像を安全に保存。 - コーディネート提案機能
AIとか使って実装できたらいいな - 購入品の検索・フィルター機能
カテゴリ、カラー、購入日、価格帯などで購入履歴を検索・フィルターできる機能を追加。 - SNS連携・共有機能
自分の購入履歴やグラフをSNSで共有できる機能を追加。 - テストコード
開発中はテストコードがほとんど書けていないので、テストコードを追加します。 - React NativeかFlutterを使ってスマホアプリにしてみたい。
関連記事
フィードバック、感想など
ご意見，感想，改善点，バグ，質問などなんでも大丈夫です！
なにかあれば以下のフォームに送ってくださると助かります。
最後に
ここまで記事を読んでくださりありがとうございます！まだまだ改善点が多いサービスですが、どんどん改善していって、もっと良いサービスとしていけるように頑張っていきたいです！今回の開発では，色々新しい技術に挑戦したり，失敗したりしてそこから多くの学びを得ることができたのでとてもいい経験になりました。これからももっといろいろ挑戦してワクワクできるようなアプリを作りたいと思ってます！