🙆♀️
Nuxt.jsでWebアプリケーション開発メモ29
概要
サマリーダッシュボードガジェットの機能実装。
プロンプト29
# 命令29
- `サマリー`ダッシュボードガジェットの機能実装
# 命令29-1
- 現在`サマリー`ダッシュボードはモックとなっています。ガジェット内に表示するデータはモックと同じとする前提です。
- まずは、サマリーを表示するためのデータ取得方法を検討したいです。バックエンド側にサマリーデータを取得するための専用APIが実装されているか確認してください。（現状では実装されていないという想定です。）
- APIが実装されていない場合、既存のAPIとフロントエンドでサマリーを集計する方法とするか、バックエンド側にサマリー取得用APIを新設すべきか、設計的にどちらが良いか提示してください。
- Claude Codeからの回答(抜粋)：
結論
バックエンドに GET /api/training/summary/ API新設を推奨します。データベースの集計機能を活用し、効率的でスケーラブルなアーキテクチャを維持できます。
- 続きの命令
# 命令29-2
- ではバックエンドにAPIを新設して、サマリーガジェットにデータを表示できるようにしてください。
- 期間を設定するボタンはサマリーガジェットも対象になりますので、留意してください。
- モックでは`今週の人気項目`とありますが、期間は今週限定ではありません、上述の通り期間設定ボタンの適用対象ですので、`今週の`は不要です。
- `人気項目は`左右２分割で、`人気の筋トレ`、`人気の有酸素運動`とするように変更してください。
- 上位3件まで表示する仕様ですが、同数で3件以上存在する場合でも3件を超えて表示しないようにしてください。
- `詳細統計`ボタンはひとまずモックのままでよいです。（クリックしても何もしなくてよいです。）
対応内容
バックエンド
- サマリデータ取得用APIとシリアライザーの実装。
フロントエンド
- REST APIでサマリデータを取得し、サマリーガジェットに表示する。
画面
ソース差分
バックエンド
フロントエンド
Discussion