ホームページ > ウェブフロントエンド > jsチュートリアル > Cursor + Claude Sonnet の初めての体験

Cursor + Claude Sonnet の初めての体験

WBOY
リリース: 2024-09-03 17:04:01
オリジナル
1257 人が閲覧しました

Cursor を IDE として使用し、Claude 3.5 Sonnet を使用してソフトウェアを開発したのは初めての経験

Minha primeira experiência com Cursor + Claude Sonnet

皆さんはこれまでに Cursor に関連するものについて聞いたことがある、または少なくとも見たことがあると思います。そうでない場合は、独自のドキュメントに従って、それが何であるかを簡単に説明します。

カーソルは VS Code のフォークです。これにより、使い慣れたテキスト編集エクスペリエンスを提供しながら、AI を使用したコーディングの最適な方法の作成に集中できます。

要約すると、Cursor はソフトウェア開発における AI の使用に直接リンクされた統合と機能を備えた IDE です。

そうは言っても、私の経験を見てみましょう :)

ここにリポジトリへのリンクを残しておきます: Game of Life

私の経歴

私の経験をより深く理解していただくために、結果と最終的な考慮事項に関連する可能性のある情報をここに残しておきます。

  • 私はソフトウェア開発者で、特にフロントエンドの開発に 5 年の経験があります
  • 私はコンピューター サイエンスの学位を取得しています
  • 私は AI に関係する Github Copilot 以外の IDE レベルの拡張機能を使用したことがありません
  • はい、私は日常生活で ChatGPT を使用しています (これについてはいくつかの点がありますが、それは次の投稿にします)

あらゆる経験と同様に、ルールを定義する必要があります:

AI が生成したコードの提案を受け入れることが必須です
コミュニケーション言語として英語を使用します
バグの解決策を見つけたり、生成されたものの品質を向上させるためにコードを変更することはできません
目的
指摘されたことをすべてテストするために、目的は、Angular 17 を使用して Jhon Cornway の「Game of Life」のインタラクティブ バージョンを実装することです (はい、このバージョンはこの記事の内容に関連しています)

人生ゲーム

ライフ ゲームはセル オートマトンであり、いくつかの定義されたルールがあります。

  • 2 つまたは 3 つの生きている隣接セルを持つ生きたセルは生き続けます。
  • 生存している隣接セルが 2 つ未満の生存セルは死亡します。
  • 3 つ以上の隣接セルが存在する生存セルが死亡します。
  • ちょうど 3 つの生存している隣接セルを持つ死んだセルが生きます。

Minha primeira experiência com Cursor + Claude Sonnet

プロンプト

前述したように、対話全体で使用された言語は英語であり、次のようなコマンドが直接かつ明確に与えられました。

画面の全幅と高さのグリッドに「ライフ ゲーム」を実装します。
グリッドをランダム化するボタンと開始するボタンを追加します
シミュレーション。スタイルにはAngularマテリアルを使用してください

重要: テストの少し後にこの記事を書こうと決めましたが、コマンドと結果の履歴を失ってしまったため、書いた内容を 100% 伝えることはできません。これにより、各コマンドの結果が存在しないことが説明されます。指示。ただし、このプロジェクトの次のステップと進化についてはフォローアップするつもりです。

コード生成ごとに、すべてを受け入れて実行し、レイアウト調整、マージン、バグなどの修正を依頼しました。

コードの品質

コードが完璧であるとは言えませんが、読みやすく理解可能なコードが常に生成されているので、必要に応じて介入して、生成されたコードを修正/改善できることは簡単に言えます。

バグ/問題

私たち生身のプログラマーと同じように、AI もバグを生成します。私の最初の接触も例外ではありませんでした。レイアウト内の要素の配置 (ボタンの統計や可視性など) に多くの問題があり、グリッドと主要な色にいくつかの問題がありました。パターン検出システムが機能しません (ただし、は次のステップとしてリストされています)。

問題はあったものの、生成されたコードは信頼性が高く、要求されたものは解決されましたが、あちこちでいくつかの調整が必要でした。ライフ ゲームのルールはすべて、何の問題も調整の必要もなく実装されたことは、強調する価値があります。

時間

まだショートカットに慣れ、プロンプトを実行するいくつかの方法をテストしていることを考慮すると、プロジェクト全体に費やした時間は 1 時間 30 分もかからなかったと思います。また、これはそれほど複雑なプロジェクトではありませんが、同じ方法で実装するには (楽観的に見て) 少なくとも 2 倍の時間が必要になります。

良い点

  • 高速コード生成
  • 各コマンドにコンテキストを柔軟に追加できるため、バグの修正、関数の作成、気づかなかった問題の検索がはるかに簡単になります
  • 動作するコード:)
  • VSCode ベースの IDE なので、日常生活で使用するすべてのものを簡単にインポートできます

マイナスポイント

  • いくつかの問題 (主にレイアウトに関連する) を解決するのはまだ困難です
  • コードは機能しますが、一部の実装にはまだ改善の余地があります

結論

私は、作成されたすべての品質に非常に驚き、非常に満足しています。テストの生成、単純なバグの修正、MVP の作成、および概念は単純なので、コードの品質が満足できるように調整する必要があります。

次のステップ

最初のプロトタイプが作成されたので、次のステップは、このプロジェクトの新しい機能を作成することです (パターン検出を修正し、ロジック ゲートなどの事前実装されたパターンを追加したいと考えています)。さらに、自分がマスターしていないテクノロジー (ただし、Three.js のように学びたい) を使用してアプリケーションを作成し、コードを受け入れるだけでなく、生成されたものの品質を調整および改善して、本当の可能性を理解します。

ああ、v0 がどのように動作するのかも見てみたいです (とても面白そうです)。

再度、Github 上のリポジトリへのリンク: Game of Life。

ここまで読んでくださった方、ありがとうございます :)
今後の投稿のためのレビューや提案をここに残してください

以上がCursor + Claude Sonnet の初めての体験の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート