😺

Nuxt.jsでWebアプリケーション開発メモ34

に公開
Django
DRF
Claude
Nuxt UI
nux3
tech

概要

カスタムトレーニング項目の追加、編集、削除、一覧表示画面追加。

プロンプト34

# 命令34
- カスタムトレーニング項目の一覧、追加、編集、削除画面を作成したいと思います。UIの検討と提案をお願いします。
    - 以下のポイントをよく検討してください。
        - 誤って削除させないこと。
        - 削除は複数項目が一括での削除ができること。
        - `TrainingExercise`テーブルに必要な列データ`movement_distance`、`energy_efficiency`,`metabolic_correction_factor`、`calories_per_unit`をどう入力させるか？
            - アプリである程度自動で入力する or データの内容について注釈をいれて手動入力させ、アプリ側でチェックしてデータが標準範囲を逸脱していないかチェックする。（標準範囲の値をどうもつ？）

ClaudCodeの回答

  • 記録忘れ。。

追加命令

  • 画面構成については文字でイメージを提示してきたがわかりづらかったので、モック画面作成を指示。
    • 何度かのやり取りを経て画面構成を固める。
    • 全体的に文字サイズは小さめにしてコンパクトにした。
      • （他ページとスケール感があってないので後日合わせる予定。）

対応内容

  • カスタムトレーニング項目の一覧画面、追加画面、編集画面を追加。
    • 前述のとおり画面は基本的にコンパクトに。
    • 各要素に対して、:ui={...}で個別にサイズ指定するなど煩雑になってしまった。
      • グローバル設定(app.config.ts)で一括設定した方がよかったかも。→ 気が向いたら修正する。
  • バックエンド側にカスタムトレーニング項目追加、編集、削除APIを追加。

画面


ソース差分

バックエンド

https://github.com/tkure/prototype-backend/commit/b8a73adbf2e6679fdc138f5e496ae0f18a704bec

フロントエンド

https://github.com/tkure/prototype-frontend/commit/98c2a99accf7222b3adf42806e9ea9bf5a3c9063

→ Nuxt.jsでWebアプリケーション開発メモ35

Discussion