Cursor講座 第6章6.4節「Cursor×AIで進めるエラー修正の流れ」

Cursorでエラーが出たときの対処法

まずは赤く表示されているフォルダをクリックし、エラー元を探します。上記のように赤い下線が表示されているのがエラー部分です。

エラー部分にカーソルを当てると「Fix in Chat」と表示されます。これはCursorに搭載されている修正機能なので、こちらをクリックして下さい。

すると画面右のチャット欄でコードを修正してくれます。上記のように赤い表示が解消されていれば、エラーを解決できています。

つぎに黄色く表示されている「index.css」を表示してみます。

同じく下線部分がエラーの原因なので、カーソルを当てて「Fix in Chat」をクリックします。

こちらも無事エラー内容を解消できました。ではショートカット「Ctrl + Shift + @またはCommand+ Shift + @」でターミナルを開き、以下のコマンドを実行してアプリを立ち上げます。

npm start

上記のようにエラーが表示されたときは、その内容を丸ごとコピーし、Cursorのチャット欄に入力して下さい。

また、エラーコードをChatGPTやGeminiGeminiは、Googleが開発した大規模言語モデルとマルチモーダルAIで、テキスト・画像・音声・動画を理解し、高度な推論能力と創造性を持ちます。などの生成AI生成AIは新しいデータやコンテンツを自動的に作り出すAI技術で、テキスト・画像・音声など様々な形式のデータを生成します。に読み込ませ、わかりやすく解説してもらうことでより理解が深まるのでおすすめです。

エラーコード入力後に「Send」ボタンをクリックします。

上記のように、インストールする必要性がある処理の実行手前まで提案してくれます。「Run Command」をクリックして処理を実行します。

実行するコマンドが対応していない場合も、最適な方法を提供してくれます。先ほどと同じく「Run command」をクリックします。

問題を解決したと表示されたので、再度「npm start」コマンドを実行してみます。実行結果は下記の通りです。

このままでも簡単なTodoアプリとして機能しますが、中には自分好みの機能を追加したいと考えている人もいるかと思います。次節ではCursorとChatGPTを使ってTodoアプリをカスタマイズする方法について解説します。