バイブコーディングチュートリアル – セットアップと高度なテクニック

AGIに仕事を奪われたい
この記事は約23分で読めます。

13,435 文字

Vibe Coding Complete Tutorial and Tips - Cursor / Windsurf
Start Vibe Coding with Windsurf: My Newsletter for Regular AI Updates 👇🏼 Links 🔗👉🏻 Subscri...

ここでバイブコーディングについて知っておくべきことをすべて説明します。まず、どのツールを使うか決めましょう。いくつかの選択肢があります。私はWindsurfとCursorを最も使用していますが、最近はWindowsurfを使うことが多いです。Windsurfはコードエディタで、世界で最も人気のあるコーディングエディタであるVS Codeのフォークでもあります。すでにVS Codeを使っているなら、これは自然な拡張といえるでしょう。
もう一つの選択肢は、VS Code自体に拡張機能を追加することです。完全に新しいIDEを使いたくないなら、「Klein」と呼ばれるものを使うことができます。評判が良いと聞いていますが、私はあまり広範囲にはテストしていません。
また別の選択肢はRepletを使うことです。Repletは完全にオンラインのコードエディタです。Repletの素晴らしい点は、すべてがクラウド上にあるため、アプリを非常に簡単にデプロイできることです。
最後に、おそらく最も簡単に始める方法は、お気に入りのホステッドAIのキャンバス機能を使うことです。ここにClaudeがあります。何でも入力できます。例えば「最もクールな回転する3Dシェイプのための3JSコードを書いて」と入力します。完成したらキャンバスで開いて、ブラウザから直接実行できます。これは私が約20分でコーディングした例です。
これには制限があり、基本的にHTMLとJavaScriptしか実行できませんが、JavaScriptは世界で最も人気のあるコーディング言語なので、ブラウザから直接実行するだけでもかなりのことが実現できます。Chat GPTにもキャンバス機能があり、Googleも独自のキャンバス機能をリリースしたばかりです。つまり、ブラウザから離れることなく、コードを書いて実行できるようになっています。
しかし、より複雑なプロジェクトの場合は、私は先ほど挙げた他のツールのいずれかを使用しています。これらの他のツールはエージェントです。ClaudeやChat GPT、Googleにコードを書くようプロンプトを入力して、そのコードを実行させても、実際にはコードを反復的に改良していくことはありません。WindsurfやCursorほどエージェント的ではないのです。
Windsurfについて言えば、このビデオのスポンサーであるWindsurfに感謝します。私はWindsurfを使用するのが大好きで、バイブコーディングによく使っています。チャット、ライト、レガシーモードを簡単に切り替えることができ、様々なモデルオプションがあります。Claude 3.7 Thinking、Claude 3.7、Claude 3.5、OpenAIモデルなど、タスクに合ったモデルを使用できます。
彼らはタブ補完に関する多くの新機能をリリースしました。ジャンプするタブ、インポートするタブなど、タブ機能はコードベースだけでなく、ターミナルの内容、さらにCascadeで書いている内容までコンテキストとして把握します。また、ブラウザプレビュー機能もリリースしました。これは非常に便利で、Cascadeが自動的にブラウザウィンドウを提供し、構築中のプロジェクトを確認できます。「これは正しくない」または「これは正しいが、他の機能を追加したい」などと特定のエリアをクリックしてフィードバックを与えることもできます。
ライブラリのドキュメントやAPIドキュメントなど、好きなURLを貼り付けて、望むようにコードを書くための追加知識を与えることもできます。このビデオのスポンサーであるWindsurfに感謝します。wind.surf/matthewにアクセスして、今すぐWindsurfをダウンロードし、バイブコーディングや従来のプログラミングをすぐに始めましょう。
次に、バイブコーディングを選んだら、どのコーディング言語を選ぶかです。コーディング言語だけでなく、どのコードスタックを選ぶかも重要です。プロジェクトには複数の部分があり、例えばフロントエンドとバックエンドがあります。特にどの言語の経験もない場合、どのコーディング言語を選べばいいのでしょうか?
一つの簡単なルールがあります。最も人気のあるコーディング言語を選ぶことです。AIが学習するためのコード例が多いほど、AIの経験が豊富になり、より良いコードを書けるようになります。世界で最も人気のあるコーディング言語はJavaScriptです。バイブコーディングでJavaScriptを使いたいなら、それは素晴らしい選択です。
もう一つの選択肢、そして実質的に人工知能のデファクトコーディング言語はPythonです。私はPythonが好きで、通常はバックエンドにPython、フロントエンドにHTMLとJavaScriptを使用しています。しかし、バックエンドにPythonを使う必要はなく、NodeJSのようなものを使ってJavaScriptをバックエンドにも使用できます。要点は、人気のあるものを選ぶことです。
私はGitHut 2.0という非常にクールなグラフィックを見つけました。これは基本的に最も人気のあるコーディング言語をすべて表示しています。ここではPython、Java、Grow、JavaScript、C++、TypeScriptなどが見られます。このリンクを説明欄に載せておきます。
ツールの選択(例えばWindsurf)、コードスタック(バックエンドにPython、フロントエンドにJavaScriptとHTML)を決めたら、次は何をするのでしょうか?プランを立てましょう。この段階に多くの時間を費やすことが重要です。AIに渡すための詳細で徹底的な計画が必要です。すべてのエッジケースを考え、アプリが期待通りに動作するようにそれを書き出す必要があります。
しかし、これをすべて自分で書く必要はありません。AIに手伝ってもらえます。このために私は通常Grockに助けを求めます。例えば「記事、YouTubeビデオ、研究論文へのリンクをドロップでき、AIを使ってそれぞれを要約し、関連検索を使って保存された記事をすべて検索できるSaaSアプリの詳細な計画仕様を書いて」と指示します。そして最後に「このアプリに必要なギャップを埋めるための質問をしてください」と付け加えます。
Grockは実際に追加したいさまざまな機能を特定するのに役立ちます。最初に提案されたものをそのまま受け入れる必要はなく、本当に素晴らしい計画ができるまで何度でもやり取りできます。ここではGrockがいくつかの質問をしており、私たちは最善を尽くして答えることができます。
もちろん、いくつかの質問はより技術的であり、その技術的能力がない場合は、再びGrockと協力して、各概念が何を意味するのか説明してもらいましょう。最後に「これをPRD(製品要件ドキュメント)の形式でMD(マークダウン)ファイル形式で書いてください」と言います。
書き終わったら、コピーしてプロジェクトを構築しているディレクトリに直接貼り付け、後で使用するために保存します。そして最後に、これを構築するためのステップバイステップのto-doリストをMD形式で考えるよう依頼します。MDは人工知能との相性が非常に良いからです。
ここに、アプリを実行するために必要なことをステップバイステップで設定したチェックリスト、to-doリストが表示されています。ETAが書かれていますが、明らかに必要ありません。Grockとやり取りして必要なものを伝え、全体的な計画とto-doリストを得ましょう。
この段階で時間をかけ、投資することの重要性を強調しきれません。考えられるすべての機能、すべてのエッジケース、考えられるすべての組み合わせを徹底的に考える必要があります。これが従来のコーディングの本質です。それらのエッジケース、それらの詳細は、今考えなければ将来問題になる部分です。将来変更を加えることは、最初から考えて実装するよりも常に難しくなります。
計画とto-doリストを持つことの良い点は、AIに常に参照させて、より効果的に軌道に乗せられることです。バイブコーディングを進め、プロジェクトを進行させる中で、機能が不要だと気づいたり、別の機能を追加したいと思ったり、何かの動作を変えたいと思ったりした場合は、いつでも計画に戻って変更することができます。
次にバージョン管理について話しましょう。これは将来的に多くの頭痛の種や正気を救ってくれるものです。コーディングに全く馴染みがない場合、バージョン管理は文字通りの意味です。基本的にコードを構築している間、異なる時点でコードを保存することができます。
なぜそれが重要なのでしょうか?それはバイブコーディングだけでなく、従来のコーディングでも絶対に重要です。コードを保存し、特定の時点で保存する方法が必要です。何か問題が発生した場合、いつでもロールバックできます。コードが期待通りに動作した以前の時点を見つけ、コードをその時点に戻して再開することができます。
これはバイブコーディングにとって特に重要です。AIはときに、コードベース全体に大きな変更を加え、コードを完全に壊してしまうことがあるからです。そのような場合、「修正して」「いや、それでもうまくいかない、再度修正して」「新しいことを試して、また修正して」というような長いループに入るのではなく、最近の変更を破棄して、最も安定していた最新のコードから再開すればいいのです。
もし人生で一度もコーディングをしたことがないなら、「git」というものを聞いたことがあるかもしれませんし、ないかもしれません。gitはデフォルトのバージョン管理ソフトウェアで、基本的に誰もが使用しています。これにより、異なる時点でコードを保存したり、他にも多くのクールなことができます。また、コードベースが非常に大きくなり、異なる機能や機能性を同時に作業し、最後にすべてをまとめたい場合にも非常に価値があります。
しかしGitはかなり複雑かもしれません。良いニュースは、AIコーディングアシスタントやエージェントにgitコードを書かせることができるので、それが何をしているのかを完全に理解する必要はないということです。プログラマーの皆さんはその発言に戸惑うかもしれませんが、少し考えさせてください。
これらの従来のコーディング技術をすべて学ぶことは非常に良いことですが、望まないなら必要ありません。自分のためだけにゲームを作ろうとしていて、世界に見せるつもりがないなら、できる限りのことをして、何かを立ち上げて楽しむだけで大丈夫です。commit、revert、logsなどのgitの基本的な用語を学ぶことをお勧めしますが、それ以上の複雑なことを知る必要はありません。
コーディングを始める前に最初にすべきことは、gitをインストールすることです。私はちょっと遊んでいた既存のプロジェクトがありますが、gitをインストールしていませんでした。やり方をお見せしましょう。AIエージェントに指示するだけで本当に簡単にできるはずです。
「gitをインストールして」と指示するだけです。ここに書かれている通り、gitは通常Mac OSにプリインストールされていますが、インストールされているか確認してみましょう。AIが本当にすべてを処理してくれます。gitはコマンドで、git-versionは正しくインストールされているか確認するだけです。すでにインストールされているようです。
次に「このプロジェクトにgitを追加して」と言います。すると、git initコマンドが実行され、初期化が行われ、git ignoreファイル(gitに含めたくないファイル)が作成され、新しいブランチが立ち上げられます。この用語はすべて進みながら学ぶことができます。質問があれば、AIに尋ねるだけです。すでに初期コミット(最初の保存ポイント)を作成しています。AIと話してそれをしてもらうだけで、それほど簡単です。
Gitを使用すると、すべてのものはコンピュータ(ローカルマシン)に保存されますが、より安全なコード保存が必要です。そのため、私はGitHubを使用しています。これは、Gitを取り、コードをクラウドに保存することを意味します。コードのためのGoogle Docsのようなものと考えてください。無料で、GitHubにサインアップし、AIにセットアップを手伝ってもらうことができます。
次に、ルールについて話しましょう。これらのバイブコーディングツール(Cursor、Windsurf、client)のほとんどはルールをサポートしています。ルールを使うと、AIコーディングエージェントに、あなたが望む方法、あなたが望む構造、あなたが望むワークフローに従ってコードを書かせることができます。LLMのシステムプロンプトを書くようなもので、AIに送られるすべてのプロンプトに含まれるものです。
使用するツールによって、ルールの表示場所が異なります。Windsurfをお見せしましょう。右下にあるWindsurf設定をクリックし、「メモリーとルール」をクリックして「管理」をクリックします。ここにメモリーも見つかります。Cascadeはプロジェクトを開発するにつれて、プロジェクトに関するメモリーを保存します。メモリーが正しくないと思ったら、削除して最初からやり直すことができます。
下部に「ユーザー定義ルール」があり、グローバルルールとワークスペースルールがあります。グローバルルールはすべてのプロジェクトに適用され、ワークスペースルールは特定のプロジェクトにのみ適用されます。私のグローバルルールをいくつかお見せしましょう。
もちろん、これはマークダウンファイルで、編集が非常に簡単です。すべて自然言語です。最初のルールは「変更を加えた後、常に新しいサーバーを起動して私がテストできるようにする」です。変更を加えた後、手動で既存のサーバーを終了して新しいものを起動するか、新しいものを起動するだけでよいことに気づきましたが、毎回自動でしてほしいと思いました。そのため、変更を加えるたびに、私の代わりに新しいサーバーを起動し、ウィンドウを開きます。
私が遭遇した別の問題は、更新するよう指示すると、既存のコードを進化させたり反復したりするのではなく、私の要求を満たすために完全に新しいコードを書くことでした。そのため、新しいコードを書く前に、既存のコードを見て変更できるかどうかを常に確認してほしいと思いました。この問題に何度も遭遇したので、既存のパターンを探して使用するようにするためにいくつかのルールをまとめました。
「既存のパターンを反復しようとする前に、パターンを大幅に変更しないでください」、「常にシンプルなソリューションを好み、コードの重複を避ける」など、デフォルトでこれを行うべきですが、ルールを通じてより強調することで、より良いコードを書くことができます。
これは私にとって非常に重要なルールです。「dev、test、prodの異なる環境を考慮したコードを書く」。これが何を意味するのかの簡単な説明ですが、もっと詳しく知りたい場合は、Grock、Claudeに尋ねれば説明してくれます。dev環境はコーディングしている環境です。ローカルホストを開いてコードが実行されているのを見ると、それがdev環境です。test環境はテストが使用する環境で、まだテストについては触れていませんが、すぐに説明します。prod、つまりproduction環境は、デプロイして世界に見せるものです。
これら3つはすべて別々に扱います。コーディングに馴染みがない場合、なぜこれら3つの環境が必要なのか理解できないかもしれませんが、AIに異なる環境が必要となるケースを説明してもらうことをお勧めします。
バイブコーディングを多く行い、特にClaude 3.7 Thinkingの傾向に気づいた後、いくつかのルールを設定しました。何かをすると「いや、その方法は好きではない、将来はそうしないようにして」と思い、それに気づき、ルールとして書き留め、二度と起こらないようにしました。
例えば、「可能であればファイルにスクリプトを書くことを避ける、特にそのスクリプトが一度しか実行されない可能性がある場合」。何かを変更する必要があり、AIがスクリプトを書いた場合、それをファイルに書き、そのファイルが永久に残り、一度も使用しなかったスクリプトがたくさん見つかることがありました。そうではなく、自分でコンソールでスクリプトを実行するか、使い終わったらファイルを削除してほしいと思いました。
これは非常に重要なルールです。ファイルを本当に短く保つことです。2〜300行のコードと言いましたが、100行のコードでもいいでしょう。コードをよりモジュラーにするだけでなく、AIがコードをより迅速に書いて反復することも可能になります。
前回のバイブコーディングチュートリアルビデオで、このファイルについて質問した人がいたので、gistにして説明欄に載せておきます。
これらはすべてワークフロールール、AIコーディングアシスタントに常に従ってほしい一般的なルールですが、コーディング言語に特化したルールやベストプラクティスもあります。それらを見つける場所をお見せしましょう。
GitHubで「awesome cursor rules」という素晴らしいリポジトリを見つけました。これはカーソルだけでなく、Windsurfにも適用され、コーディング言語に特化したマークダウンファイルであり、環境やコーディング言語に依存するベストプラクティスを示しています。
下にスクロールすると、フロントエンドフレームワークとライブラリがあります。たとえば、JavaScriptのフロントエンドライブラリであるReactを使うことにした場合、それをクリックすると、従うべき多くのルールがあります。これらはコーディング言語に特化したベストプラクティスです。戻ると、バックエンドとフルスタックがあります。ここにはPythonとFast APIがあり、「機能的コンポーネントを使用する」「宣言的ルート定義を使用する」など多くの素晴らしいルールがあります。
もし一度もコーディングをしたことがなければ、これらが何を意味するのか分からないかもしれませんが、使うことはできます。これらは事前にレビューされており、awesome cursor rulesに含まれているなら、一般的には非常に良いものです。
では、バイブコーディングの全体的なワークフローについて話しましょう。最初にすることは、プロジェクト計画とto-doリストを保存することです。Grockからプロジェクト計画を取り、「prd.mdという名前のファイルを作成し、これを入れて」と言います。単に貼り付けるだけです。もちろん手動でもできますが、私は自分でコードを書かない、バイブコーディングのアプローチを取っています。そしてprd.mdができました、きれいにフォーマットされています。
次にto-do.mdファイルを作成します。Grockに戻り、これをすべてハイライトします。私たちはただバイブコーディングしているだけなので、ローンチ後のことは必要ありません。ユーザーフィードバックを得ることなどは考えていません。「to-do.mdを作成して、これを入れて」と言い、貼り付けて入力します。ファイルが作成されます。これがto-doファイルです。コードを受け入れると、プロジェクト計画とto-doリストができました。
あなたが従う全体的なワークフローは次の通りです。AIアシスタントにプロジェクト計画とto-doリストを読ませ、一度に一つのことを開発します。一度に一つの機能を開発することを強調します。最初にプロジェクトを始めたときは、これらのほとんどを行うためのフレームワークを構築する必要があるかもしれませんが、その後、機能を追加するときは一度に一つです。
機能を追加したら、テストを追加します。もし人生で一度もコーディングをしたことがない場合、テストは実際のコードが期待通りに動作していることを確認する別のコードと考えてください。これは途中でテストを書くことが非常に重要です。期待通りに動作するコードができたら、それらのテストでうまく動作することを確認し、将来的に変更を加えると、それらのテストのいずれかが失敗した場合、以前の機能が期待通りに動作しなくなったことを示します。その時点で、変更された機能に基づいてテストを変更するか、壊れた可能性のあるものを修正します。
新しいテストが書かれたら、それらのテストを実行します。テストは文字通り、コードが期待通りに動作するかどうかをテストします。新しいテストが実行され、合格したら、テストスイート全体を実行し、コードがすべて期待通りに動作することを確認します。テストが失敗した場合は修正する必要があり、テストを修正する方法は主に2つあります。
1つは実際のコードを修正し、最終的にそれらのテストに合格するようにすることです。コードに問題が発生したら修正し、テストが最終的に合格するようにします。もう1つは、機能を更新し、新しい機能がテストを失敗させるが、それが望ましい動作である場合、テスト自体を更新する必要があります。これらのことはすべてAIコーディングアシスタントができます。
昨日遊んでいた楽しいシミュレーションをお見せしましょう。テストの書き方を示します。「このアプリが期待通りに動作することを確認するテストを書いて」と言うだけです。
Windsurfがたくさんのテストを書いたことがわかります。左側にテスト一覧があります。すべてのテストが完了したので、実行しましょう。テストを実行します。
すべてのテストが実行された後、11のテストが失敗したことがわかります。これは初めてテストを書いたので、「テストを修正して」と言うことができます。慣れてきたら、「テストが失敗した理由を説明し、テストを修正するか、テストを失敗させた実際のコードを修正するかを決めて」と言うことができますが、それが一般的な流れです。すべてのテストが合格したら、コミット(gitコマンド)します。単に「コードをコミットして」と言うだけです。
すると、変更されたすべてのファイルを見つけ、コミットし、コミットメッセージを書き、GitHubがあればGitHubにプッシュするという全プロセスが進行します。
もう一度全体の流れを見てみましょう。計画を参照し、to-doリストをチェックして、次の機能を構築します。次に新しい機能のテストを書きます。その機能のテストを実行します。すべて合格したら素晴らしい、次のステップに進みます。合格しなければテストを修正します。コードベース全体のテストを実行します。すべてのテストが合格したら素晴らしい、次のステップに進みます。そうでなければ失敗したテストを修正します。gitにコミットしてコードを保存します。そして繰り返します。これが全体の流れです。
しかし、時々コードが修正不可能な状態になることがあります。AIはときにこれを行い、コードを台無しにして、できることがあまりない状態になります。そのような場合、以前のコミットにロールバックしたいと思うでしょう。これは、最近加えた新しい変更がすべて消去されることを意味します。望むなら保存することもできます(git stashと呼ばれます)。これらのことすべてについて、実際にgitコマンドを知る必要はありません。AIに指示するだけです。そうでなければ「前のコミットにロールバックして」と言えば、最近のコードをすべて削除し、動作することがわかっている安定した場所に戻ります。
ここで、コーディング体験をより良くし、より多くの選択肢を提供するいくつかの雑多なことをお伝えしたいと思います。
まず、チャットモードとライトモードについて話しましょう。ライトとは、コードを書くことを意味し、そうしないよう依頼することもできますが、ライトモードにいる場合は、主にコードを書いてもらいたいと考えています。チャットモードに切り替えると、それは質問するだけで、基本的に大規模言語モデルと直接チャットするのと同じですが、コードベースのコンテキストも提供します。ここで使用したいさまざまなモデルを選択することもできます。私が発見したのは、Claudeが最高のコーダーだということです。多くの人々はまだClaude 3.5が最高だと言っていますが、私は本当にClaude 3.7 Thinkingが好きです。
最近気づいたのは、AIは美しいフロントエンドをコーディングすることがあまり得意ではないということです。AIは本当に基本的なものをコーディングすることはできますが、それは素晴らしいことです。しかし、もし本当に美しいものが欲しいなら、オンラインで無料のテンプレートを見つけるのが最良の方法です。すべてのデザインが既に用意されているものをダウンロードし、あなたのフォルダに入れ、AIに伝えて「これを構築したい、このライブラリにあるすべてのコンポーネントを使用して」と言います。
単に「無料のBootstrapテーマ」などを検索すれば見つけることができます。これらすべての小さなコンポーネント、グラフ、チャート、フォントなどは事前に定義されています。ここで購入することもできますし、多くの無料のものも見つけることができます。
別のヒントは、更新や修正したいコードの特定の部分をエージェントに与えることです。これを行うためにはコードベースの適切な理解が必要ですが、単に「@」と入力することで、ファイル、ディレクトリ、ドキュメント、コンテキスト、Webリンクを追加できます。これができることを忘れないでください。
多くの人がゲームをバイブコーディングしているのを見かけましたが、彼らはほとんど3.jsというライブラリを使用しています。これは3DのJavaScriptライブラリで、ほとんどのAIはすでにその使い方を知っており、現在注目を集めています。とても素晴らしいライブラリなので、ぜひチェックしてみてください。参照するには、単に「3JSを使用してXというゲームを作って」とします。Xはゲームの説明で、そのライブラリを使用します。
セキュリティと保守性について話しましょう。多くの伝統的なプログラマーがバイブコーダーについて非常にネガティブに話しているのを見かけました。彼らが言っていることは恐らく正しいのですが、このコードは保守できず、非常に安全ではないということです。つまり、一度公開すると、ハッキングされ、パスワードが盗まれ、DDoS攻撃を受ける可能性があります。なぜなら、人生で一度もコーディングをしたことがない人として、これらのベストプラクティスの一部を知らないからです。
自分を助けるためにいくつかのことがあります。まず、ベストプラクティスの一部を学ぶために時間を費やすことは間違いなく重要です。しかし、これはルールを使う良い機会でもあります。「これを絶対にしないでください」「これを常にしてください」というルールを追加し、これらはベストプラクティスです。しかし、これらのベストプラクティスが何であるかをどうやって知るのでしょうか?
AIに書いてもらうこともできますが、Jack Fricsはいくつかの本当に役立つヒントをまとめており、オンラインでもっと見つけることができます。たとえば、「すべてのAPIエンドポイントにレート制限を設ける」「行レベルのセキュリティを使用する」「すべての認証ルートとサインアップページでキャプチャを使用する」などです。
これらの数個以上にもっとたくさんありますが、発見することができます。ウェブで検索したり、Perplexity、Claudeに尋ねたりして、これらのベストプラクティスのリストを入手し、使用していることを確認し、ルールとして追加してください。
保守性について話しましょう。はい、AIコードは常にきれいではありませんが、これは最悪の状態であり、今後は良くなるばかりであることを覚えておいてください。コードベースを構築していて、バイブコーディングしていて、自分でコードの書き方を本当に知らない場合、かなり脆いコードベースになる可能性があります。
しかし、それは大丈夫です。それは学習プロセスの一部であり、実際にAIにコードをリファクタリングするよう頼むことができます。リファクタリングとは、より簡潔に、よりモジュラーにし、コードの重複を使用せず、その他のベストプラクティスを意味します。これらすべてのことをルールファイルに追加し、AIにセキュリティ監査を依頼することもできます。単に「私のコードをすべて見て、セキュリティの観点から私がどこに脆弱かを教えてください」と言います。
セキュリティのためのその他のベストプラクティスをいくつか紹介します。これはTed Worbleによるものです。「下のような写真を共有しないでください」。APIキーがある場合、これらは右側にあるキーです。これらのキーを公開しないでください。画像内のキーでも取得され、使用されるAPIのクレジットを使用されます。
また、キーをgitに保存しないでください。それがgit ignoreファイルの目的です。これらすべてが意味不明に聞こえても心配しないでください。AIに説明してもらいましょう。
彼はまた、nodeアプリを使用している場合は「npm run audit」を使用することを勧めています。また、「自分で認証を作らないでください」というアドバイスも素晴らしいです。これはほとんどすべてのことに当てはまる素晴らしいアドバイスです。本当に必要でない限り、「自分で何かを作る」ことはしないでください。「自分で作る」とは、自分で構築することを意味します。
Clerkのようなものを使用し、IP+ユーザーベースのレート制限、DoS保護、ファイアウォール、監視、分析をセットアップします。そしてまた、AIを使ってこれらすべてを学びましょう。
バイブコーディングについての重要なことは、必ずしもすべてを学ぶ必要はありませんが、それは素晴らしいことです。私はこれらすべてをとても興味深いと感じ、ティーンエイジャーの頃からコーディングが大好きでした。バイブコーディングを通じてそれに触れ、同じように愛するようになることを願っています。
また、「支払い、サブスクリプション管理、使用状況追跡など、失敗のコストが高いコードベースの部分にはテスト自動化を常に書く」ことをお勧めします。Tedによる素晴らしいヒントをありがとう。
最後に話したいのはMCPサーバーについてです。MCPに馴染みがない場合、これはエージェントにツール、追加ツールを提供する方法です。Windsurfでは右ここでMCPサーバーを設定でき、AIに書き方を手伝ってもらうこともできますが、AIエージェントに本当にクールなツールを追加することができます。
いくつかのクールな例をお見せしましょう。これはBilawalからのUnity MCPです。基本的にUnityに直接接続できるツールです。見てみましょう。これで直接Unityにアクセスでき、基本的にUnityに直接バイブコーディングしています。これは非常に素晴らしいです。実際にUnityの使い方を知る必要はありません。もしUnityが本当に好きで、これらの3Dモデルの作成が好きなら、バイブコーディングしながら学び始めましょう。
Firecrawl MCPツールを使用した別の例をご覧ください。深い研究、Firecrawlの深い研究を行っています。これで突然、WindsurfやCursor内のAIエージェントが外に出て、このFirecrawlツールを使用し、多くの情報を取得できます。
MCPツールを試してみることをお勧めします。バイブコーディングに非常に精通した後の、より高度な機能ですが、お勧めします。
以上です。バイブコーディングについて多くのことを学んだことを願っています。バイブコーディングをやってみることをお勧めします。経験豊富なプログラマーなら、それは単に楽しくリラックスできます。学び始めたばかりなら、これらすべてに触れ、学習の旅を始めるための素晴らしい方法です。
このビデオを楽しんでいただけたなら、いいねとチャンネル登録を検討してください。次回のビデオでお会いしましょう。

コメント

タイトルとURLをコピーしました