Zenn
👌

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

に公開
Django
DRF
Nuxt 3
Claude
tech

概要

トレーニング記録の追加更新の実装。

プロンプト23

# 命令23
- カレンダーの日付をダブルクリックすると表示されるトレーニング記録ポップアップ画面で保存ボタンをクリックしたときの処理を実装します。
    - 該当日付に記録済みのデータがなければ、新規追加し、そうでなければ更新するようにしてください。
    - `目的`、`体重`、`体脂肪率`は入力必須、`トレーニング項目`は１件以上の入力必須、`メモ`は任意入力とします。
    - フロントエンド、バックエンドとも起動済みですので、実装後のテストをする場合は新たにサーバー起動する必要がないので覚えておいてください。

追加命令

  • REST APIパラメータの型定義をOpenAPISchemaから自動生成した型定義を使うよう命令。
  • バックエンドのシリアライザー内のバリデーションに不具合があったので修正を命令。

対応内容

フロントエンド

  • 保存ボタンクリック時に新規追加ならトレーニング記録の追加、更新ならトレーニング記録の更新APIを実行する。
    • 保存ボタンクリック時に入力内容のバリデーションを行うようにした。
  • pnpm run generate-typesコマンドでIF定義を修正し、トレーニング記録追加更新APIパラメータ定義を追加。
    • 追加した型定義を使ってAPIパラメータを指定するようにした。

バックエンド

  • トレーニング記録追加更新用APIのシリアライザーを追加。

ソース差分

バックエンド

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

フロントエンド

https://github.com/tkure/prototype-frontend/commit/7336a793298fe57da4b47caaa31572d289878878

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

Discussion