【生成AI】Vercel V0でコード書かずにアプリ作ってみた

どうもこんにちは。

今回は生成AIツールの一つである、V0 Vercelを触ってみたので紹介します。

V0 Vercelって何？

V0 Vercelは、「テキストからUIを作成する生成AI」です。
勘の良い方は「ChatGPTでできるじゃん？」って思うと思うんですよ。
違うんです。V0 Vercelはコードを生成してくれるんですけど、コードの生成で終わらないんですよ。

実際に動かす！

（サインアップにはGithubアカウントがあると楽です。）

新しいチャットからプロンプトを入力

今回は、以下のプロンプトを入力しました。

開発者向けのタスク管理ダッシュボードをshaduiで作って。サイドメニューも欲しい。

プロンプトを見てわかる方もいるかもしれないですが、生成AIにタスク管理アプリを作成してもらいます！

回答

tsxというファイル？が生成されましたね。クリックしてみます。

dev-task-dashboard.tsxというファイルに、Reactで書かれたであろうJSコードが記載されていますね。

ではPreviewタブを開いてみます。

タスク管理アプリができてる...!!（文字がはみ出しているのは多めにみましょう。）

Add New Taskのところでタスク名を入力してAdd Taskをクリックすると、タスクが登録されます！

というように、実際にAIによって作成されるUIを確認しながらUIをブラッシュアップしていくことができるわけですね！

VScodeで動かしてみます。

まず、生成されたtsxファイルを開きまして、右上のターミナルボタンをクリックします。

すると、npxコマンドをコピーすることができるのでありがたくコピーさせていただきます。

次にターミナルを開きます。開いたら、作業ディレクトリを作成します。
（自分はいつもアプリ開発を、/Users/testuser/codeディレクトリで行うようにしています。）

cd /Users/testuser/code # ディレクトリを移動
mkdir vercel_test # 今回はVercelのテストアプリを動かすのでこのように実行
cd vercel_test

次に、VScodeで/Users/testuser/code/vercel_testを開きます。開いても空のはずです。

それでは、ターミナルでコピーしたnpxコマンドを実行します。

しばらくすると色々聞かれます。

Need to install the following packages:
shadcn@2.0.7
Ok to proceed? (y) y  # Yesなので「y」を入力

✔ The path /Users/testuser/code/vercel_test does not contain a package.json file. Would you like to start a new Next.js project? … yes  # yesかnoで答える必要があったので「yes」
✔ What is your project named? … vercel_test_todo_app  # プロジェクトの名前を入力
✔ Creating a new Next.js project.
✔ Which style would you like to use? › Default  # 選択肢がいくつか出てきたがわからなかったので「Default」
✔ Which color would you like to use as the base color? › Neutral  # 選択肢がいくつか出てきたがわからなかったので「Neutral」
✔ Would you like to use CSS variables for theming? … no / yes  # よくわからなかったので「yes」を選択
✔ Writing components.json.
✔ Checking registry.
✔ Installing dependencies.
✔ Created 6 files:
  - components/dev-task-dashboard.tsx
  - components/ui/button.tsx
  - components/ui/input.tsx
  - components/ui/label.tsx
  - components/ui/select.tsx
  - components/ui/card.tsx

npm notice
npm notice New patch version of npm available! 10.8.1 -> 10.8.3
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.3
npm notice To update run: npm install -g npm@10.8.3
npm notice

実行が完了したようです。
そうすると、こんな感じで色々と自動で作成されると思います。実行中のログで「Next.js使います〜？」って聞かれて「Yes！」と答えたので、Next.jsフレームワーク内で動作するようになっていますね。

では実際にローカルでサーバを立ててみましょう。
サーバの立て方は、作成されたプロジェクトのREADME.mdに記載されています。

$ cd vercel_test_todo_app  # 作成されたプロジェクトの中に移動
$ npm run dev

> vercel_test_todo_app@0.1.0 dev
> next dev

  ▲ Next.js 14.2.13
  - Local:        http://localhost:3000

 ✓ Starting...
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

 ✓ Ready in 2.3s

これでローカルホストが立ち上がったと思います。

では、http://localhost:3000にアクセスしてみましょう。

表示されました！ちなみにちゃんと動きます。

まとめ

今回はVercel V0を使用してタスク管理アプリを作成してみましたが、すごいですね...
自分が手を動かしたのは、以下だけです。

• AIにアプリ作成の要求をする
• npxコマンドのコピー
• アプリを動かす準備（コマンド3つ）
• npxコマンドの実行
• ローカルホストを立てる

全くコーディングしてないのにアプリができてしまうのはちょっと凄すぎますね...

以上