7,144 文字
Claudeは開発者にとって使うべきモデルで、今日はClaude 3.7 Sonnetがリリースされました。ここで見せますが、このモデルはコードのためにさらに最適化されています。この動画では、まず記事を読んで何が変わったのかを見て、私の意見を述べます。次に、数学を行うアプリケーションを生成するチャレンジを用意しました。つまり、コード能力を少しテストします。目的は、ボールと重力を持つアプリケーションを作ることです。
この動画で3つ目にやることは、私のメーラーアプリケーションLyXで新機能を作成し、私たちのコードで直接アクションを実行するよう依頼します。すでにClaude 3.7 SonnetまたはClaude 3.7 Sonnet Thinkingを選択できることがわかります。これによって、Claude 3.5とClaude 3.7の間の改善点を実際のケースで全てテストして確認できます。
ここでは、最高のツールであるという通常の宣伝文句がありますが、変わったことは何でしょうか？Claude 3.7 Sonnetには有名なThinkingモードが付いています。これは、OpenAI、Z0 One、その他のモデルなど、すでに何度も見てきたものです。これらはすべて推論（reasoning）機能を持つモデルです。これは、何かを尋ねたときに推論を行って考えていることがわかります。面白いのは、Claude 3.7は通常のモデルだけでなく、推論モデルでもあるということです。だからここではClaude 3.7かClaude 3.7 Sonnet Thinkingを選択できるのです。これはモデルの拡張で、思考するためのものです。
APIを通じて、Claudeが思考するために使えるバジェットをコントロールすることができます。例えば、使用できる最大トークン数を指定するなどです。これは嬉しいことですが、今日のベンチマークには嬉しくないかもしれません。私たちの推論モデルの開発では、数学や科学よりも実際の問題に最適化しています。これは良いことです。AIでポンゲームを作れることよりも、機能を実装してほしいからです。
もちろん、彼らは世界最高のモデルだと言っていますが、Cursorもこれがコード作成に最適なモデルだと気づきました。私も気づきました。これは断然、最高のコードを作成し、最高のものを理解するチート的なモデルです。Vercelも同様です。ここでは、Claude 3.7がClaude 3.5より20%優れているという小さなグラフが見えます。そして非常に重要なのは、Agentのツール使用です。これにより、Agentモードを使用するとき、良い決定を下し、正しいツールを使用できるようになります。これは非常に重要です。
ここにはたくさんの数字を含むベンチマークがありますが、私たちが興味があるのはClaud Codeです。これはベータ版の限定研究プレビューですが、かなり興味深いものです。ここに小さな動画があり、簡単に言えば、ターミナルに直接統合されたツールで、ファイルの読み取りなどができます。Cursorがあるのになぜこれを開発しているのかわかりませんが、気にしません。これがClaude 3.7についてのニュースです。
最初のチャレンジをして、違いがあるかどうか見てみましょう。ここでは、赤または青のボールを含むボックスを持つアプリケーションを作成し、重力などを管理することを依頼します。プロンプトをコピーします。まずはClaude 3.5から始めて、タスクを実行するよう依頼し、Claude 3.5 Sonnetを選択します。
これはClaude 3.5 Sonnetのデモです。タイトルを追加し、うまく機能していることがわかります。衝突の処理はあまり良くありませんが、プロンプトから数学の概念をよく理解し、ほぼ機能するものを作ってくれました。「ほぼ機能する」というのは大げさかもしれません。ボール同士が飛び出していくのが見えます。これがClaude 3.5の結果です。
次に同じことをClaude 3.7で試してみましょう。プロンプトを使い、Claude 3.7を指定します。ここでは最良のモデル、Claude 3.7 Sonnet Thinkingを直接選択します。Agentモードは必要なく、Claude 3.5を維持したまま続けます。ここで思考部分があり、考えている最中です。思考の終わりがないようなので、この処理のために多くのお金を払う必要があるかもしれません。2回実行されるようですが、スレッドでは私が必要とすることをほぼ要約しており、これにより潜在的にエラーを回避できる可能性があります。
彼は考え、コードを作成し、重力などを確認し、パフォーマンスを最適化しています。そして直接最終的な修正を生成しています。Claude 3.5に比べてかなり時間がかかりましたが、このファイルを受け入れて、ナビゲーターに直接移動します。ここでClaude 3.7を取り、何が起こっているかわかるように小さなタイトルを追加します。
ここでは重力がかなり良いことがわかりますが、少し遅いです。ボール間の相互作用が良いかどうかを見てみましょう。重力はそれほど素晴らしくなく、滑らかではありません。結果を示すと、これは本当に数学なので、あまり得意ではないのは当然かもしれません。OpenAIの結果を見ると、彼らは本当に私が求めたものを正確に尊重するアプリケーションを作り、非常に滑らかな効果で、現実世界で想像できるような重力を持っています。一方、ここでは要素があまり速く動かず、あまり相互作用がないように見えます。
同じプロンプトでのClaude 3.7は、OpenAIに比べるとかなり劣りますが、バグの面ではClaude 3.5よりはやや良いです。フィードバックして改善するかテストしてみましょう。「動きが遅すぎる、実際の重力に合っていない、requestAnimationFrameを使用してください」と言います。すると、フランス語でのフィードバックを翻訳してくれます。
彼は少しこれについて考え、コードの修正を生成しています。変更を適用し、ファイルを受け入れてClaude 3.7に戻ります。これは良い結果で、アプリケーションがあるという印象を受けます。結果はずっと良く、より楽しいです。このボールはバグがあり、他のボックスの上でうまく滑らず、うまく跳ね返りませんが、かなりうまく機能しており、Claude 3.5よりも良いです。これが改善点です。
これは少し遊びのようなものですが、私たち開発者が本当に興味があるのは実際のコード、ハードスキルです。そのために私のSaaSであるMailer LyXに移動します。これは以前にも何度か紹介したものです。新機能を追加したいと思います。まずClaude 3.5を、次にClaude 3.7を使用して、実装の違いを見てみましょう。
ここでは要素を選択できることがわかります。選択したとき、削除ボタンがありますが、機能していないだけでなく、削除ボタン以外のものも欲しいです。タグを追加するボタンが欲しいです。ここにはタグがありませんが、複数の要素にタグを追加したり、複数の人をunsubscribeしたり、複数の人からタグを削除したり、削除したりできるようにしたいです。
そのために、サーバーアクション、「add to group」、「remove tag」、「unsubscribe」、「delete」を追加するプロンプトを準備しました。これを行うには、rootにあったのと同じ概念を使用して、シンプルで美しいスタイルで「すべて選択」ボタンを作成する必要があります。「すべて選択」されていない場合は、バルクアクションIDに選択されたものを使用し、フィルターを送信してsubscriber IDを取得します。
アクションには、これら4つのアクションを持つドロップダウンメニューを追加する必要があります。unsubscribeとdeleteにはアラートダイアログを使用し、removeにはタグを選択するためのタグセレクターを表示する別のダイアログを作成します。これはかなり完全なプロンプトです。まずClaude 3.5で試して、何をしてくれるか見てみましょう。
現在は修正がないことがわかるので、異なるコミットを見ることができます。AIを起動し、終了したら結果を見てみましょう。ロード中に、最初のリンクdescription mlv.sh/aiに移動して、私のすべてのCursorルールと、Cursorに関するミニトレーニングを取得することをお勧めします。それは本当に価値があります。すぐにmlv.sh/aiか、説明の最初のリンクにアクセスしてください。
AIが作業している間に、彼が行ったことをレビューできます。なぜ正しいインポートをしなかったのか疑問に思いますが、心配しないでください、すべて修正します。ここでは、タグ、input.queryで取得するgetSubscriberID methodがあります。satisfyを忘れています。そうでないと動作しません。satisfyを追加する必要があります。
次に、add tag actionがあります。ここでA5のために間違いをしていますが、常に問題を起こします。すべて送信して作成しています。remove tagはOKです。delete manyですが、ここで同じロジックを使用していないのはなぜかわかりません。unsubscribeはかなりうまく機能し、DELETEもかなりうまく機能します。これは受け入れます。
ここにあるのはtag dialogueで、open optionはmode、selectedID、filterです。modeはaddまたはdeleteです。ここで行ったことから見ると、add deleteのようです。これは素晴らしいです。subscriber dataでは、unsubscribe、delete mutation、handle unsubscribeがあり、alert dialogueを使用しています。handle deleteと、ここにドロップダウンがあります。多くのものがほぼ機能しています。
良いプロンプトで選択し、アクションを見ることができます。まずタグを追加することから始めましょう。ここでは両方とも2つのタグしかないことがわかります。例えば「beginner」「javascript」「member」を追加します。機能したというメッセージが表示されますが、確認するにはリフレッシュする必要があります。これらを選択して「add tag」を行うと、すでに「javascript」「member」がありますので、「next」タグを追加してみます。これはタグをうまく追加しています。
タグを削除しようとすると大変かもしれないので、「react」タグを削除してみます。remove tag… OKです、うまく機能しています。ここで選択できますが、すべて選択するボタンがないのは良くありません。ここにすべて選択するボタンがあるかもしれませんが、ただCを選択するだけです。どちらにしても、うまく機能しており、かなり満足しています。
ここでunsubscribeをテストできます。通常、彼らは消えるはずです。常にリフレッシュする必要があります。あ、unsubscribeは機能していません。いや、OKを入力していなかったからです。これでうまく機能します。ID番号98を削除したい場合、deleteを入力すると、98がなくなったことがわかります。また、うまくリフレッシュしていることがわかります。refetchを呼び出しているのでしょう。これはuseSubscriberのメソッドであるrefetchを呼び出していて、とても良いです。
AIをうまく使えば、印象的な結果を得られることがわかります。ただ「select all」がありません。すべてを選択する方法がわかりません。何を作ったのかわかりませんが、この機能を管理していないようです。stateを見ると、select allを管理していません。これがClaude 3.5の結果です。
すべての変更を取り消して、少し残念ですが、かなりうまく機能していましたから。たくさんのお金をテストのために払っています。すべて削除し、同じコードを再度投入しますが、今回はClaude 3.7 Sonnet Thinkingを使用します。これにより、より深く考えるかどうかを確認できます。
ここで彼は私たちの問題について考えていますが、これは少し残念なことに、thinkingの段階で最初にコーディングしているので、トークンがお金を消費します。これを何度もコーディングすると、最終的に価格が高くなります。私はここでAPIを使用せず、Cursorを使用していますが、最近はSaaSに完全に移行しているため、プレミアムリクエストで限界に達しています。今はこれを無効にして、何をしているのか見てみましょう。
まだthinkingしているので、thinkingモデルなしでもテストして、より良い結果を得られるかどうか見てみます。たくさんのコードを生成していますが、Agentモードを使用していません。thinking段階で最初にすべてのコードを生成し、thinking無しで2回目を生成しているようです。これは非常に逆効果だと思います。特に、彼はコードを分割し、ドロップダウンのために新しいファイルを作成する興味深いイニシアチブを取りました。以前はすべてを同じ場所に置いていましたが、それはあまり良くありませんでした。
thinkingが終了し、今やっとコードの生成が始まります。ここでは、これだけのために25の高速APIリクエストを使用しました。「select all」機能を作成しているようで、明らかにずっと賢いです。結果はかなり良さそうです。ファイルを確認しましょう。
まだ作業中で、5分経っています。本当にCDIにいる開発者が一生懸命働いているような印象を受けます。素晴らしいです。変更を確認すると、多くのpropsがありますが、コードを以前のように全て同じ場所に置かず、分割したのが良いです。これは受け入れます。bulk action dropdownでは、isAttackDialogOpen、isRemoveDialog、unsubscribeMutation、deleteMutationなど、必要なものすべてがあります。
彼が作ったのは少しクリーンかもしれませんが、Claude 3.5の方法の方が好みでした。今回は毎回2つのメソッドを作成しているので、かなり重くなっています。ここですべてを削除していますが、カスケードがあります。handleUnsubscribe、handleDeleteがあり、ここにはアクションがあります。
bulkActionでは、これがすべてのバックエンドコードですが、メソッドをすべて複製したのはあまり好みではありません。これは大混乱で、全く最適化されていません。Prisma transactionを使用していないからです。前者はPrisma transactionを使用していたので、Claude 3.5のコードの方が興味深いと思います。
dialogは良いですが、今回は2つのダイアログを作成しました。コードはより清潔ですが、同時に多くのファイルを追加するのでより汚いです。ここにはselect allがあります。インターフェースとしてあまり明確ではありませんが、これらの2つの要素を選択し、タグを追加してみましょう。ここにメニューがあり、例えば「beginner web」のようなタグを追加できます。インターフェースはリフレッシュされていませんが、リフレッシュすると正常に動作します。失敗しています。
「beginner」「javascript」「member」からタグを削除すると、リフレッシュして正常に削除されますが、最高ではありません。ユーザーID 44を削除したい場合、deleteと入力すると正常に削除されます。これはとてもクールです。すべてを選択して、タグを追加したり、「welcome」タグを削除したりできます。「welcome」タグを削除してリフレッシュすると、正常に動作し、アップデートされます。素晴らしいです。
Claude 3.7モデルは素晴らしく、思考モードを使用しないことをお勧めします。思考モードはさらに良くなると思っていましたが、Claude 3.7をテストして良かったです。素晴らしいです。Claudeは、Cursorをマスターし、AIだけでこのような完全なアプリケーションを作成したい場合、最高のツールです。
LLMトレーニング、Cursorトレーニング、私のCursorルールなどを含む無料コースがあります。mlv.sh/aiと入力するか、説明の最初のリンクから登録することでこれらを取得できます。Claude 3.7はクリエイションをさらに便利にし、私のプロンプトはさらに効果的に機能します。私と同じくらい良いプロンプトを作る方法を説明しています。すぐにお会いしましょう。また会いましょう、さようなら。
コメント