#001カロリーチ

カロリーチ

毎日のカロリーを管理するWebアプリです。

Next.js、Supabase、Honoを使用し、認証機能やCRUD機能を実装しました。データベース設計からバックエンドAPIの実装まで、一貫して担当しています。

制作期間：120日

スクールのオリジナルアプリ制作課題として、身近な課題を解決できるアプリを作りたいと考えました。

友人がメモ帳アプリで日々の摂取カロリーを管理しているのを見て、食事ごとのカロリー検索や目標値までの計算に手間がかかることを知りました。

そこで、1食ごとの記録をより簡単に行えるWebアプリを制作しました。

毎日摂取するものを予め登録して、ワンタップで記録できる機能を実装しました。頻繁に摂取する、白米250gやプロテイン100gなどを簡単に記録が可能となりました。

食品マスタを作成し、検索後該当した食品のカロリーを自動計算する機能を実装しました。摂取した食事のカロリーをWeb検索をして、食べた量から摂取カロリーを計算する作業を一括で行えるようにしました。

課題

食事記録の追加・編集・削除に伴い、記録一覧や合計カロリーなど、複数の関連データをユーザー操作に合わせて更新する必要がありました。

また、初回表示で取得したデータと、クライアント側で管理するデータをどのように連携させるかが課題となりました。

解決

TanStack QueryのqueryKeyをデータの種類ごとに整理し、CRUD操作後に関連するキャッシュを無効化して、必要なデータを再取得するように実装しました。

また、サーバー側で取得したデータをHydrationによってクライアント側のキャッシュへ引き継ぎました。

課題

Hono.js導入後、サーバーコンポーネントとクライアントコンポーネントでは実行環境が異なるため、認証付きAPIを共通の実装で利用できず、リクエストで認証エラーが発生しました。

解決

実行環境ごとにSupabaseからJWTを取得するHono RPCクライアントを作成し、API呼び出し関数もサーバー用・クライアント用に分けました。

これにより、SSR・CSRの両方から認証付きAPIを利用できるようにしました。