コース: Cursorで行うバイブコーディング
無料トライアルでこのコースを視聴する
今すぐ登録して、24,900件以上登録されている、業界エキスパート指導のコースを受講しましょう。
エラー修正とリファクタリング
ここまでで、 フロントとサーバのやり取り、 またログイン認証を実装しました。 ここからは、エラー修正と リファクタリングについて 説明していきます。 今回のレッスンでは、 一度追加したタスクを チェックをした後読み込むと、 チェックが外れてしまうという エラーを修正していきます。 こちらフロントだけでは 保存できないはずなので、 前回のポスト、追加しかなく更新がない、 なので、done というものが サーバに残っていません。 サーバから直していきます。 チェック状態を保存する API を用意しましょう。 まずサーバの方で 更新 API を追加するように 指示をします。 はい、こちらで完了しました。 「Keep All」を押し、 サーバを再起動して完了です。 次はフロントを直していきます。 トグル時にサーバへパッチします。 修正が完了したようなので、 実際にフロントを見ていきましょう。 タスクをクリックしようとすると、 クリックができなくなってしまいました。 コンソール画面からエラーをコピーして、 カーソルに投げてみます。 現象とコンソールのエラーを出力します。 カーソルから返信がきました。 サーバを再起動してというふうに 指示があるので、サーバを再起動します。 はい、次はタスクが消えなくなりました。 再読み込みしてみると、 はい、そのままチェックしたまま 残っています。 最後に API 呼び出しを 1箇所にまとめる 処理ファクタを実行します。 カーソルのチャットにて、 このように、getTodos、 addTodo、updateTodo を div API に切り出して、 UI 側は呼ぶだけにします。 こちらで完了しました。 小さく直して小さく確かめる、 これが崩れにくい直し方です。 もし途中でわからないことがあれば、 なぜとカーソルに聞き、 サーバにて更新 API、 フロントでバッジ&ロールバックで 回帰確認、 この流れで エラー修正と改善を進めることができます。 次は GitHub 連携と プロンプト共有です。 チームでの開発に広げていきます。