【ポートフォリオ】消費したカロリーを食べ物の個数に換算するアプリ
サービスへ
GitHubリポジトリへ
Qiitaの記事へ
サービス名：なんこメシ
この記事では、私自身の体験から生まれたサービス「なんこメシ」について、
開発に至る背景と、私が得た困難や学び、大切にしていくことをストーリーとして残します。
▍全ての始まり、ダイエット中の気付き
突然ですが、私はダイエットをしています。
2024年の9月から始めて、現在も絶賛減量中です。
開始当初、体重計に93kgと表示され、「え...嘘？...」と大根演技みたいな声を出したことを覚えています。これまでの人生で体重増加は何度か経験してますが、過去最高値をゆうに更新していたからです。このままでは転職どころではないため、ダイエットを決意しました。
最初はウォーキングから始め、徐々に運動量を増やし、現在では午前に8kmのジョギング、午後には室内で有酸素運動を週6日行うまでになりました。日々の運動で消費カロリーを計測する中で、ある時ふと思いました。「この消費カロリー、数値だけじゃ全然分からない」と。
その問いに対する答えが、「食品の個数に置き換えてみたら分かりやすくなるのでは？」というものでした。そこから始まったのが「なんこメシ」の開発でした。
▍ここがこだわり、UI / UXを重視して
開発中はとにかくシンプルで見やすいUI/UXを重視しました。
そのために、FigmaでUIの構造を徹底的に練り上げ、どの画面でもユーザーが直感的に操作できるように設計を固めてからマークアップに臨みました。
UIは温かみのあるオレンジを基調に「明るさ」を出しつつ、サブカラーの緑で「健康的」な印象を与えました。情報量が多くなる換算画面では、PC・スマホ共にレイアウトを紙に書きして案を練りました。
また、アップロード時のローディング表示や、入力フォームのモーダル化を実装し、ユーザが「今、何がおきているのか」を瞬時に理解できるようにしました。実際にX（旧：Twitter）にて、ユーザー様から「UIがとても見やすい！」といったご意見もいただくことができました！
▍課題に直面、そこから得た学び
開発では問題がつきもの。順調なことばかりではありませんでした。
その課題とは"Firebase Authenticationとの連携"です。
当初の私は「Googleログインも導入できるのか！やってみよう！」のスタンスで検討しました。
作業としてReactとFirebaseで先にメールアドレスとパスワードのログイン処理を実現し、後にRailsとも連携して必要項目を追加する流れを取りました。そこで鬼門だったのが、Railsとの連携におけるトークン検証のロジックです。
初めは「JWT？、ペイロード？」という状態から公式ドキュメントや技術記事を調べたり、Firebaseを利用している他のGitHubプロジェクトのコードを読み解き、処理の流れを分析しました。その結果、なんとかトークン検証を実装でき、DBにユーザー情報を登録できた瞬間は高揚感でいっぱいでした。
（一度、落ち着きたかったので、その日はもう何も作業はしませんでした...笑）
この結果から学んだことは、
「全く先のタスクが想像つかなくても、小さくてもできることから始めてみる」ということです。
当初は3つの技術連携に思考が混乱しましたが、「Reactでの簡易ログイン実装」という自分にとって見通しが良いタスクから着手することで、序盤で多大なエラーでやる気を削がれずに最後のゴールまでたどり着けたのだと思います。
▍未来への展望
この開発での経験から以下の2つを大切にしようと考えました。
- ユーザー体験を重視した開発
実務では目の前のタスクや技術習得に追われ、つい「誰のために、何のために作るのか」を見失いがちです。
しかし私は、「この機能はユーザーの何を解決するのか」という意識を常に念頭に置きます。独りよがりの開発ではなく、常に自問自答しながら業務を遂行していきたいです。 - 先が不透明でも挑戦から逃げない
今後、技術だけが全て解決できないような大きな壁は必ず現れるはずです。人間ですから、逃げ出したくなることもあると思います。しかし、そんな苦しい局面だからこそが、一番成長できるチャンスだと、私はこの開発を通して気づきました。「できなかったことができるようになる楽しさ」という気持ちを私は持ち続けて挑戦していきます。
