8,403 文字
この動画では、カーソルエージェントを使用してシンプルなブログを一から開発する完全なチュートリアルをお見せします。その仕組みと私の使い方を説明させていただきます。チャンネルにはコンポーザーについての他のチュートリアルもたくさんありますが、この新しいエージェントはシンプルさの面でさらにレベルアップしています。
私は音声だけでアプリ全体を生成しました。1行もコードを書いていません。結果として、Next.js、Shad CN、そして現代のフルスタックアプリケーションで使用される他のクールな機能を備えた、完全に機能するブログができあがりました。
もし気づいていなかったとしたら、Cursorは AI 開発の分野で圧倒的な存在感を示しています。いくつかの競合が出てきましたが、正直に言って、私はそれらすべてを試してみましたが、まだCursorを使い続けています。そして今回の新リリースで、エージェントが導入されました。以前からあったCursor Composerはそのまま残っていて、今はそこにエージェントが組み込まれています。
実際の動作を見てみましょう。gitのコミットメッセージの生成は歓迎すべき機能です。特定のコミットで何を実行したのかを考えて覚えておくのは私にとって面倒だったので。これらは継続的なアップデートで、コンポーザー自体で更新を実行できますが、うまくいかない場合は、セットアップファイルをダウンロードして実行することもでき、Cursorのバージョンを置き換えることなく更新できます。
話はこれくらいにして、何か面白いものを開発できるか見てみましょう。現在実行しているバージョンを確認したい場合は、ヘルプから「アバウト」に進むと、私は0.43を実行していることがわかります。前回は0.42でした。
これはMac、Linux、Windowsで動作します。私はWindowsマシンを使用していますが、WSLと呼ばれるものを使用して、バックグラウンドでLinuxを実行しています。WSLについてご存じない方は心配いりません。Cursorは実際にお使いのオペレーティングシステムに対応して動作します。
「grow with AI blog」という新しいフォルダを作成します。というのも、ブログを素早く作成してその動作を確認するためです。フォルダを選択してクリックします。これはMacでも、Windowsの標準PowerShellでも、どのような開発方法でも動作します。私はただWSLでの作業が好きで、Cursorがフォルダを開いて、WSLに切り替えるかどうか尋ねてきます。
コントロールキーとEYを押すと、右側にコンポーザーが開きます。非常によく似ているように見えます。画像を追加したり、モデルを設定したり、必要なコンテキストを追加したりできます。そして、通常のエージェントとエージェントツールの選択肢があります。
ここでは音声入力を使用します。これを使うと作業がずっと速くなると感じています。チャンネルには、音声を使用して開発速度とコミュニケーション速度を4倍にする方法についての別の動画があります。この場合、私はただWindowsの音声入力を使用していますが、Macでも同じことができます。スタートキーとHを押すだけです。
「ブログウェブサイトを開発したいと思います。Next.jsを使用したいと思います。ブログはマークダウンとしてアップロードするので、新しいマークダウンファイルをフォルダにアップロードするたびに、新しいブログが表示されるようにしたいです。全てのブログを紹介とスニペットとしてリストアップしたランディングページが必要で、投稿をクリックすると実際の投稿に移動します。Shad CNコンポーネントとLucide Reactアイコンを使用してデザインし、ブログを紹介するヒーローセクションを設けてください。ブログのタイトルは『grow with AI』で、ドメイン名はlets.grwi.ai.comです。これを始めるために関連すると思われる質問があればしてください。」
これが私の最初の入力です。かなりの情報を詰め込みました。エージェントが選択されていることを確認したので、どうなるか見てみましょう。
そうですね、すべてを説明してくれています。Next.js 14を使用してモダンなNext.jsアプリケーションを作成します。これは素晴らしいですね。Shad CN UI、Lucide React、マークダウン処理用のMDX、型安全性のためのTypeScriptですね。完璧です。
推奨事項に関しては、これまでに提案されたものすべてを採用しましょう。アクセントカラーには明るい黄色を使用したいと思います。Tailwindの用語ではyellow-200だと思います。そう、このプロジェクトにもTailwindを使用したいので、それも追加してください。
以前は、パッケージをインストールして前に進むために、多くのターミナルコマンドを自分で入力する必要がありました。コントロールKを使用することもできますが、私はここでターミナルを開いて、何が起こっているかを見てみましょう。サイズを少し小さくしましょう。
「コマンドを実行」をクリックして、何が起こるか見てみましょう。承認待ちだと表示されているので、このコマンドを実行してみましょう。ここで開いたこのターミナルは使用されていないようですが、ターミナルをポップアウトするオプションがあります。クリックしてみると、Next.jsのCLIとのやり取りを求められています。
ここで戻って、他に何が起こっているか確認しましょう。Turbopackを使用しますか？いいえ。インポートエイリアスをカスタマイズしますか？実際には何をすべきかを教えてくれています。インポートエイリアスについてのさらなる指示はないので、いいえと答えてデフォルトを使用します。
これで依存関係がすべてインストールされています。プロジェクト作成後、Shad CN、Lucide React、MDXなどの追加の依存関係をインストールすると言っています。フォルダを確認すると、すべてがインストールされていて素晴らしいですね。
アプリを見てみましょう。最初のプロジェクトセットアップが完了したことを確認したら、コアコンポーネントを作成するために追加の依存関係のインストールに進みます。はい、続けましょう。
今、これらをインストールしています。さっと見た限り、まだShad CNへの言及が見当たりません。通常、過去にShad CNをインストールする際は古いバージョンのドキュメントを使用していたので、それを注意深く見ています。
この黄色いアイコンは、承認待ちで保留中であることを示していると思われます。「コマンドを実行」をクリックしてみましょう。パッケージの追加が進行中です。以前開いていたターミナルではなく、アクティビティが行われている場所を見たい場合は、ターミナルをポップアウトすると、新しいターミナルインスタンスが開き、すべての進行状況を確認できます。
ここで一つの注意点として、Cursorを使用してShad CNをインストールする際、まだ古いバージョンのインストール方法を使用していて、これによってエラーが発生することがあります。必要なのは単にShad CNだけです。通常私がすることは、ここにコンテキストを追加し、最新のドキュメントを追加するか、CursorのルールファイルにShad CNの場所を指定する特定の指示を入れることです。
Shad CNのドキュメントページから取得した正しいコマンドをここに入力しました。「npx shadcn-ui@latest init」です。これを送信しましょう。インストールの新しいコマンドはこれだと伝えました。
修正ありがとうございます。更新されたコマンドを使用しましょう。このまま進めていたら、後の段階でエラーが発生する可能性がありましたが、これで前もって解決できます。致命的な問題ではありませんが、これで時間を節約できます。
このコマンドを実行します。ここでターミナルを操作することはできません。新しいターミナルとしてポップアウトする必要があります。進めますか？はいをクリックします。デフォルトスタイルとしてNewYorkを使用し、テーマ用のニュートラルCSの変数を使用します。はい。これでTailwindの設定が書き込まれました。
良いですね。エージェントに戻りましょう。選択する必要があるものを教えてくれました。申し訳ありませんが、エージェントの指示に注意を払わずに、自分が知っていることを進めてしまいました。
これまでの作業の多くはボイラープレートのセットアップでした。ファイルに変更を加え始めているのが分かります。global.cssをクリックすると、加えられた変更が表示されます。赤色は以前の内容で、緑色は提案された変更です。
通常、Cursor内で作業している場合は、コントロール+シフト+Yを押すか、これをクリックして承認しますが、モデルを信頼して「すべて承認」を選択します。一般的にこれが私の作業方法です。重要で理解が必要な場合は少し読み込んでから、「すべて承認」を押し続けます。バグに遭遇するまでこれを続けます。
これは危険な作業方法かもしれません。しかし、私の目的はMVPを作成し、非常に速くイテレーションを行い、物事をテストすることです。その後、セキュリティとベストプラクティスのテストに戻ります。より高度な本番コードで作業している場合、このような方法で作業する余裕はないかもしれません。各イテレーションを実際にチェックする必要があります。
もう一つの点は、学習についてです。このような方法でアプリケーションを非常に速く進め、エラーに遭遇したら学習することができます。あるいは、各変更を実際に読み込んで、そのコンポーネントが何であり、どのように機能するかを正確に学ぶことを選択することもできます。
チームプロバイダーコンポーネントは、ヒーローセクションを持つメインページを作成し、これらがすべてここに表示され始めています。また、Shad CNからボタンコンポーネントをインストールする必要があります。
まず、これらの変更をすべて承認します。ここで変更が行われたことが分かります。リポジトリにまだコミットされていないため赤く表示されています。また、Shad CNにボタンコンポーネントをインストールします。
コンポーザーとコンポーザーエージェントの素晴らしい点は、ディレクトリを作成し、ファイル構造全体を理解する能力があることです。以前のコンポーザーバージョン全体を見ると、コードベース全体にわたって変更を加える能力があることが分かります。これは強力で、少し危険ですが、主に強力です。
他のツールの制限は、作業中のファイル内でのコード補完だけを提供することですが、コンポーザーは大規模な変更を加え、それらの変更を実行する能力を提供します。これは本当に素晴らしいことです。
では、次に何をするよう指示されているでしょうか？このディレクトリ構造を作成します。はい。Source content blogがここに表示されるか見てみましょう。コマンドを実行すると、はい、ここにあります。blogフォルダが作成されました。
すべてをセットアップし、ヒーローセクションを設定しました。次はブログリストコンポーネント、マークダウン処理ユーティリティ、個々のブログ投稿、検索フィルタリングを作成します。
ここで注目すべき点は、これらの完了した変更です。以前は左側の大きなコンポーネントウィンドウに表示されていましたが、今は下に表示されています。これは、どのファイルが影響を受けたかを把握するのに良いです。変更を再適用したり、様々なチェックポイントに戻ったりすることができます。
ロールバックするための素晴らしい機能の一つは、このチェックアウトボタンです。特定のコード変更のラウンドが完了すると、チェックアウトする機能が提供されます。これらの変更の後にたくさんのバグがあり、ファイル構造が気に入らない方法で変更された場合、自動的に戻ってチェックアウトを押すことができます。
おそらく、これを行うべき方法は、変更を継続的に追加し、ステージングし、コミットすることです。コンポーザーを使用して変更を加え、すべてが正常に動作していることを確認したら、その変更が何であるかを正確に把握します。例を見てみましょう。ここで行われたすべての変更をステージングし、次にこのボタンをクリックしてコミットメッセージを生成します。
通常、コミットメッセージでは、最後のコミット以降に発生したすべての変更と事象を説明します。ここでは最初のコミットの前に多くの作業を行いました。構成ファイルの追加、コンポーネントの導入など、私が行ったことすべての内訳を示してくれています。
通常、私の場合は情報をあまり共有しない一行のコミットですが、これは後で誰か、あるいは私自身がコードの特定の変更で何が起こったのかを理解するのに素晴らしいです。
これはかなり長いコミットメッセージです。大規模なインストールとインフラの変更を行った場合にこうなります。通常は、コードにより小さな調整を加えてコミットするので、より理解しやすい小さなコミットメッセージになります。とりあえず、今はコミットを押しましょう。
戻ってみると、実際にはジャンプして「すべてをセットアップし、次にブログリストコンポーネントと他のものすべてを作成します」と言っていますが、まだテストしていません。現在の状態を確認して、これが実行可能かどうか見てみましょう。
ターミナルに移動して、正しいディレクトリにいることを確認します。はい。そして入力します…これは別の小さな機能です。ここで何をすべきか分からない場合、ターミナル内でコントロールKを押すと、ターミナルチャットが表示されます。「開発モードでの実行方法を教えてください」と尋ねることができ、クイック質問か送信のどちらかを選択できます。
クイック質問ボタンを押してみましょう。「npm dev」または「npm run dev」を使用するように指示されています。良さそうですね。Next.jsは小さなサーバーをセットアップし、自分のコンピュータでこのURLにアクセスできます。コントロールを押してクリックします。
素晴らしいスタートですね。少し拡大してみましょう。「人工知能の未来を共に探る」「革命の中で学び、成長し、先を行く」があり、Lucide Reactのアイコンも小さく表示されています。記事を探るをクリックしてみましょう。何もありませんね。おそらくこのページはまだ作成されていないのでしょう。
良いですね。スタート地点としては動作しているようです。戻りましょう。utilsセクションでマークダウンファイルを処理するユーティリティを作成しています。そこに作成されたものすべてが見えます。
ブログのプレビューを表示するブログカードを作成しましょう。素晴らしいですね。必要なShad CNコンポーネント、カードとバッジをインストールしましょう。それは成功したようです。
次に…まだすべての変更を承認していませんが、それは問題にならないことを願っています。次のコマンドを実行する前にすべての変更を承認する方が良いと思います。次のループに進んでしまうようですから。
残りの依存関係をインストールしようと言っています。「yarn add next-remote」を実行しましょう。
次にタイポグラフィプラグインを含めるためにTailwindの設定を更新します。ここでも生成が行われているのが分かります。
検索機能、カテゴリーフィルタリングを追加しますかと尋ねてきました。これらの提案の仕方が気に入っています。
そして、ここで行われたファイルの変更をすべて見ています。これは本当に多くの変更です。正直なところ少し不安です。エージェントが動く速度と適用する変更の量はかなり大きいです。
開発者として、おそらくコードに戻って変更を加え、知っていることを追加し始めたくなるでしょう。私も最初はそうでした。最も効果的なのは、プロダクトマネージャーのように考え、一般の人のように開発について考えることだと分かりました。
最初にNext.jsを使いたいというような要件はいくつかありましたが、それは私がそれに慣れているからです。しかしそれ以外は、一般的な用語を使用してモデルとチャットし、可能な限り変更を実行させることができます。
コードに飛び込んでいくのではなく、そこで遅くなり始めます。それは奇妙に感じるかもしれません。違和感があるかもしれません。しかし、これが私が見つけた最も速い作業方法のようです。
その後、コードに入って掘り下げる能力はありますが、速く動いて何が可能かを見たい場合は、これが私のやり方です。
開発サーバーを実行してみましょう。素晴らしいですね。「grow with AI」「人工知能の未来を探る」があります。記事を探ってみましょう。この画像はどこから来たのでしょうか？
これは素晴らしいですね。最新の記事があり、Shad CNコンポーネントを使用しています。ダークモードスイッチはありませんが、今のところそれで十分満足です。カテゴリータグが追加されています。
これをクリックしてみましょう。画像全体が開き、日付、タグ、ブログ記事のマークダウンが表示されます。
これは非常にクールです。エージェントを初めて使用して、一つもエラーがありません。TypeScriptのエラーも一つもありません。これは印象的です。
これは多くのことを変えます。本当に多くのことを。私はただいくつかのコードエディタを試してみただけで「これはゲームチェンジャーだ」「これは狂気だ」「これはすべてを変える」と叫んでいる立場からは来ていません。
これは大きな変化だと本当に感じています。そしてまだ多くの人々が、おそらくあなた、この動画を見ている人以外は、この変化がどれほど大きいのかを本当に理解していないと思います。
たった6ヶ月前でも、すべてのボイラープレートを書き、マークダウンを取り出し、これらすべてを追加するのにどれだけの時間がかかったかを考えてみてください。これらのツールの使い方を知っていて、熟練していた場合でも何時間もかかります。
そして、端末、Next.js、WSL、これらすべての異なる環境、その他すべてを学ぶのに何ヶ月もかかっていたでしょう。今では少しの手助けがあれば、誰でもアプリケーション全体の構築を進めることができ、私は数分でこれを行いました。
では、1週間でこのアプリケーションに何を追加できるでしょうか？これはソフトウェア開発のすべてを変えます。これには問題があり、エラーがあり、そして多くのセキュリティの問題も起こり得ることは完全に理解しています。
しかし、これが大きな速度の向上であることを認めざるを得ません。10倍以上、むしろ100倍くらいです。私は非常に興奮しています。
Cursor AIの使用を続けていきます。現時点で彼らは本当に分野をリードしていると感じます。他のツールにも注目を続けています。
コメントで皆さんがどのように進めているか聞けたらと思います。私の場合はとてもスムーズに進みました。もっと多くのエラーや問題が出てくると思います。
実験中にエラーに遭遇した場合は、ここでエラーを強調表示し、ここで「チャットに追加」をクリックするか、コントロール+シフト+Lを押すことができます。それによってそこにあるエラーが追加され、その後「修正」と入力するだけで、コンポーザーが最善の修正を試みます。
これまでのところ、コンポーザーエージェントには本当に感心しています。ファイルのコンテキストを一度も追加する必要がありませんでした。これは以前なら必要だったことです。
通常は、作業しているファイルやコードベースのどの部分について関連する変更を加えるかを伝える必要がありました。これを一度も行わなかったのですが、これは新機能なのでしょうか？とても便利です。
コンテキストの使い方、ファイルの追加方法、ドキュメントの追加方法をより理解したい場合は、私のCursor Composerの動画をチェックしてください。
質問がありましたら、ぜひ聞かせてください。次回お会いしましょう。
コメント