Name: ボルト対カーソルによるAIバイブ・コーディング (AI vibe coding with Bolt vs. Cursor)
Uploaded: 2025-06-17T16:29:34.000Z
Duration: 10 min 38 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

法助動詞 B1

you might be wondering which tool you should use for a project.

プロジェクトにどのツールを使うべきか迷うかもしれない。

程度の副詞

Now, some of the tools are better for beginners, some of them are great at prototyping, and some are really meant for experienced developers.

初心者向けのツールもあれば、プロトタイピングに最適なツールもあり、経験豊富な開発者向けのツールもある。

上級比較級を表す句型

I'm going to use two of them, Bolt as well as Cursor.

ボルトとカーソルの2つを使うつもりだ。

Bolt is several steps beyond using a chatbot, and it's going to give me a great starting template.

ボルトはチャットボットを使うよりも数段進んでいて、素晴らしいスタートテンプレートを与えてくれそうだ。

What Bolt does best is prototype a concept, and then give you a fantastic starting point.

ボルトが最も得意とするのは、コンセプトをプロトタイプ化し、素晴らしい出発点を与えることだ。

That's going to be more difficult for a tool like Cursor, which is really meant more for professionals.

Cursorのようなツールでは、それは難しいだろう。

It's by far the most popular vibe coding tool out there.

バイブ・コーディング・ツールの中で最も人気のあるツールだ。

To get started, I'm going to use this data file right here.

手始めに、このデータファイルを使ってみよう。

これは一連のパフォーマンス指標だ。

You'll be able to find this data in the repository for this course.

このデータはこのコースのリポジトリにあります。

Let's add this to Bolt so it has context as to what I want to do, and then I'm going to start with a simple question.

これをボルトに追加して、私が何をしたいのかがわかるようにし、簡単な質問から始めることにしよう。

I'll just say, create a dashboard for analyzing this data, and then I'll hit send.

このデータを分析するためのダッシュボードを作って、送信ボタンを押してください。

Bolt has a number of pre-built templates, and it's going to create a project by analyzing our data, and then building a great looking dashboard.

Boltにはあらかじめテンプレートがいくつか用意されており、データを分析してプロジェクトを作成し、見栄えの良いダッシュボードを構築してくれる。

Most of the time, Bolt is going to use a React project, and it knows how to create those really well.

ほとんどの場合、BoltはReactプロジェクトを使うことになり、Reactプロジェクトの作成方法を熟知している。

The thing about vibe coding is that no two sessions will be the same, even if you type exactly what I did in this course.

バイブコーディングの特徴は、このコースで私がやったことをそのままタイプしても、同じセッションは2度とないということだ。

The AI models take a bit of creative license when coding, so it's okay to start a new session if you don't get something you love.

AIモデルはコーディングの際に少しクリエイティブな裁量を与えてくれるので、気に入ったものがなければ新しいセッションを始めても構わない。

As Bolt vibe codes, you can actually see what it's doing here on the right-hand side, and you can click on some of these files and see how it codes the different components.

ボルト・バイブがコード化すると、右側で何をしているのか実際に見ることができます。これらのファイルをいくつかクリックして、異なるコンポーネントをどのようにコード化しているのか見てください。

It looks like it's done with the application, and you can see that it did a pretty decent job with the data analysis, and it was even able to give me a light or dark mode version.

このアプリケーションを使うと、データ分析がかなり適切に行われ、ライトモードやダークモードのバージョンまで表示してくれたことがわかる。

Of course, I can ask Bolt to continue designing and modifying this project, but I want to show you how it pairs well with most professional tools like Cursor.

もちろん、ボルトにこのプロジェクトの設計と修正を続けてもらうこともできるが、Cursorのようなほとんどのプロフェッショナルなツールとの相性の良さをお見せしたい。

So to do that, I'm going to hit this export button and just download the file into my local computer, and it'll be here in my desktop.

そこで、このエクスポート・ボタンを押して、ファイルをローカル・コンピューターにダウンロードする。

So we're now done with Bolt, so I'll go ahead and close that window, and I'm going to decompress this file.

これでBoltは終わったので、このウィンドウを閉じて、このファイルを解凍します。

I'm going to rename this vibe coding, and I'll open this up in Cursor.

このバイブコーディングの名前を変えて、カーソルで開いてみよう。

Now, when you first open up Cursor, you'll see that there is a new chat section right here, which is where you're gonna do most of your prompting.

Cursorを初めて開くと、ここに新しいチャットセクションがあるのがわかるだろう。

If that is not showing up, then click right here on this toggle AI pane section, and there's a few other things that you may want to check before you begin.

もし表示されない場合は、このトグルAIペインをクリックしてください。

First off, you may want to choose the model that you want to use for your projects.

まず、自分のプロジェクトに使いたいモデルを選ぶといいだろう。

You can have Cursor automatically pick a model for you by clicking on this auto-select section.

この自動選択セクションをクリックすると、カーソルが自動的にモデルを選んでくれます。

You can also choose to look at only the thinking models or pick whatever you want yourself.

また、思考モデルだけを見ることも、自分で好きなものを選ぶこともできる。

私はクラウド3.5ソネットにこだわる。

It'll work really well with this project.

このプロジェクトにはとても効果的だ。

The other thing that you may want to check is whether you want it to work in Agentive mode, which means that it will do most of the changes automatically.

もうひとつ確認しておきたいのは、Agentiveモードで動作させたいかどうかだ。

You can also tell it to ask you whether or not you want to implement the changes, and then it will just give you suggestions and let you pick whether or not you want to approve those changes.

また、変更を実行するかどうかを尋ねるように指示することもでき、その場合は提案だけを出して、その変更を承認するかどうかを選ばせることができる。

エージェントモードにしておくよ。

You may also want to check the Cursor-specific settings.

また、カーソル固有の設定を確認することもできます。

Cursor is a copy of Visual Studio Code, which should look familiar to most developers, but it has its own settings.

CursorはVisual Studio Codeのコピーで、ほとんどの開発者には見慣れたものだろうが、独自の設定がある。

The most important thing you want to check is, of course, your list of models.

最も重要なチェックポイントは、もちろん、モデルリストだ。

This tab will control which models show up in this dropdown.

このタブは、このドロップダウンに表示されるモデルをコントロールします。

There are some models that have the name Max in them.

マックスの名がつくモデルもある。

These models will cost more, so I like to turn those off.

これらのモデルはコストがかかるので、私はオフにしたい。

You can also use your own API keys if you've got them.

自分のAPIキーがあれば、それを使うこともできる。

However, those may make some custom features not work.

ただし、その場合、一部のカスタム機能が動作しなくなる可能性がある。

The other place that you want to look at is this Rules section.

もうひとつ見ておきたいのは、この「ルール」のセクションだ。

This is where you would add anything that you want the project to always consider.

ここで、プロジェクトに常に考慮してほしいことを追加する。

Think of them as system instructions, and you can do those for all your projects by putting them in this User Rules or create a rule for the specific project.

これはシステム指示と同じで、このユーザールールに入れるか、特定のプロジェクト用のルールを作成することで、すべてのプロジェクトに適用することができます。

Because I have quite a comprehensive project that Bolt has already created for me, I don't want any of my rules to fight what it's already done.

ボルトがすでに私のために作ってくれたかなり包括的なプロジェクトがあるので、私のルールのどれもが、ボルトがすでにやったことと戦うことを望んでいない。

だから、それは放っておくつもりだ。

So I'm gonna go ahead and start by asking it to help me preview this code.

では、このコードのプレビューを手伝ってくれるよう、お願いしてみることにしよう。

So first, it's gonna look at the entire code base.

そこでまず、コードベース全体を調べる。

And in this case, it's gonna run npm install and npm run dev and run a server for you.

この場合、npm installとnpm run devが実行され、サーバーが実行される。

So you can command click to open that up.

コマンドクリックで開くことができる。

And here's what that social media dashboard looks like.

ソーシャルメディア・ダッシュボードはこんな感じだ。

Overall, I think it did a pretty good job, but I think my performance trends could be a little bit better.

全体的には、かなりいい仕事をしていたと思うが、僕のパフォーマンス傾向はもう少し良くなると思う。

だから、それを修正するように頼むつもりだ。

I'm gonna say, can you modify the performance trends section?

パフォーマンス・トレンドのセクションを修正できないか？

I want to see the video names when I roll over them and would prefer a stacked line chart.

ビデオ名をロールオーバーして見たいので、折れ線グラフを積み重ねたい。

It's going to automatically make some suggestions and you can review them right here and accept any changes individually.

自動的にいくつかの提案がなされるので、ここでそれを確認し、変更を個別に受け入れることができる。

And normally, if it changed multiple files, you would see accept all right here, but because it's only one file, it says accept.

通常、複数のファイルを変更した場合は、ここですべて受け入れると表示されるはずだが、1ファイルだけなので、受け入れると表示されている。

It doesn't look like it's automatically updated.

自動的に更新されるようには見えない。

And sometimes it won't let you refresh this.

リフレッシュできないこともある。

Somehow it stops the server from running.

どういうわけか、サーバーの実行が止まってしまう。

知らないふりをするつもりだ。

And I'll just say, I can't see the preview.

プレビューを見ることができないんだ。

これで再びサーバーが起動した。

So I'm gonna click on this server and you can see that when I roll over these, it's showing me some of the information.

このサーバーをクリックして、この上にロールオーバーすると、いくつかの情報が表示されるのがわかると思う。

Sometimes I make the mistake of trying to explain the cursor in natural language, how to make a visual change when it's just a lot easier to include a screenshot.

スクリーンショットを添付する方がずっと簡単なのに、カーソルの視覚的な変更方法を自然な言葉で説明しようとするミスを犯すことがある。

So I'm going to take a screenshot and I'm going to let it know that when I roll over, I can't see the entire graph.

そこでスクリーンショットを撮って、ロールオーバーするとグラフ全体が見えないことを知らせようと思う。

スクリーンショットを撮っておこう。

Snagitというツールを使っている。

So it has this nice way of adding little arrows so I can point to what I'm talking about here.

小さな矢印を追加することで、今話していることを指し示すことができるんだ。

And I'll go ahead and add this as context into cursor.

そして、カーソルのコンテキストとしてこれを追加しておこう。

そして、画像が読み込まれたことに気づく。

That's a really useful thing to do when you want to tell the model something that is more easily understood visually.

視覚的に理解しやすいようにモデルに何かを伝えたいときには、本当に便利なことだ。

And it looks like once again, it lost track of its live reload.

またしてもライブリロードを見失ったようだ。

So this time I'm going to open up a terminal and just run the npm run def command myself over here.

そこで今回は、ターミナルを開いて、自分でnpm run defコマンドを実行することにする。

That way hopefully it won't be based on whatever it is on this chat.

そうすることで、このチャットの内容が何であれ、それがベースにならないことを祈るよ。

All right, let's go to the other window and we'll refresh this.

よし、別のウィンドウに移動して、これをリフレッシュしよう。

And now I can see everything a little bit better.

そして今、すべてが少しよく見えるようになった。

Now I really would like to see some sort of line drawings here.

今、私は本当にここで線画のようなものを見たいと思っている。

So let's try taking another screenshot just of this section.

では、この部分だけのスクリーンショットを撮ってみよう。

And once again, I'm going to go into my little tool here and ask it to sort of draw some of the lines, something like this, and I'll move this in.

そしてもう一度、この小さなツールで線を引くように頼みます。

All right, let's see if that's working a little better.

よし、もう少しうまくいくか見てみよう。

I do like these open dots better, but I'm not sure it's actually giving me lines.

このオープンドットの方が好きだけど、実際にラインが出るかどうかはわからない。

I'll ask it to try recreating that chart from scratch.

そのチャートを一から作り直してみるように頼んでみるよ。

All right, let's take a look at what it did.

では、その結果を見てみよう。

And now the data doesn't look right at all.

そして今、データはまったく正しく見えない。

Every once in a while, you're gonna have to roll back to a previous checkpoint.

たまに、前のチェックポイントにロールバックしなければならないことがある。

I do like when it got to this section here, so I'm going to restore this checkpoint and I'll modify this message right here.

チェックポイントを復元して、このメッセージを修正します。

And I actually think that's a lot better.

I'm gonna try asking it to just stack this information.

この情報をスタックするように頼んでみるよ。

Can you try stacking the text information?

テキスト情報を重ねてみることはできますか？

That is looking really nice now, although I would like these dates to be a little bit more underneath.

今はとてもいい感じだが、この日付はもう少し下にしてほしい。

Let's go ahead and grab another screenshot really quick.

もう一枚スクリーンショットを撮ってみよう。

This time, I'm gonna put my handy dandy arrows to these dates right here.

今回は、この日付に便利な矢印をつけよう。

I'll say, can you move these dates down a bit?

もう少し日程をずらしてもらえないか？