v0を使ってテトリスを作ってみたけど、ローカルで実行するにはどうすればいいの？｜Tomo100

「v0」というAIツールが優秀ということを聞き、いろいろと遊んでみようと思い、とりあえずゲームを作ってくれるのか試してみました。
わからないことがあったらすべてAIさん（おもにChatGPTさん）にすぐに聞きます。

テトリスを作る前に「v0」って何？

🧩 v0とは？

v0（ブイゼロ） は、Vercel が開発した AIベースのUIコンポーネント生成ツール です。

💡 特徴

• 自然言語でUIを作れる
  「ダッシュボード付きの管理画面を作って」といったテキストを入力するだけで、React＋Tailwind CSSベースのコードを自動生成します。

• 出力はコピー＆ペースト可能なコード
  JSX形式のコードが出力され、開発にすぐ使えます。

• ShadCN UIとTailwind CSS対応
  モダンなデザインと高いカスタマイズ性を両立。

✅ 用途の例

• プロトタイプのUIをすばやく作る

• 繰り返し使うデザインのテンプレート生成

• デザイナーとエンジニアの間の橋渡し

🔗 公式サイト

https://v0.dev

さっそく作ってみる

プロンプトを入力して「テトリス」を作ろう

とりあえず、以下のようなプロンプトを入力します。
わからないことがあったら、つどChatGPTさんに頼ります。

美しいグラフィックのテトリスを作ってください

待つこと数十秒

うん、できました。

で、通常「v0」さんは、何も指示しないと「React」でコードを書いてくれるようです。
「React」って何？ってことで、ChatGPTさんに聞いてみると

Reactとは

Reactは、Meta（旧Facebook）が開発したJavaScriptライブラリで、ユーザーインターフェース（UI）を構築するために使われます。特にWebアプリケーションの「画面部分」を効率的に作るために利用されます。

特徴

コンポーネントベース
UIを小さな部品（コンポーネント）に分割し、それぞれを再利用可能にすることで、保守性と開発効率を高めます。

状態管理（State）による動的なUI
ユーザーの操作やデータの変化に応じて、自動的に画面が更新される仕組みがあります。

仮想DOM（Virtual DOM）
変更された部分だけを効率的に更新することで、高速に動作します。

一方向のデータフロー
データの流れが単方向なため、コードの予測性が高まり、バグが減ります。

できること

• シングルページアプリケーション（SPA）の作成

• 管理画面やチャットアプリ、TodoリストなどのWebアプリ

• React Nativeを使えばiOSやAndroidのアプリも開発可能

よく使われる関連技術

• Next.js（Reactベースのフレームワーク）

• ZustandやRedux（状態管理）

• Tailwind CSS（デザイン用CSSフレームワーク）

Reactは、シンプルなコードで複雑なUIを作れるのが強みです。初心者にも人気があり、学習用の教材も豊富です。必要であればチュートリアルもご案内できます。

わかったふり…

で、先ほどのテトリスが実際どんな感じに作られたかというと

tetris-game/├── tetris-game.tsx     └── app/page.tsx        

上記のように「tsx」という拡張子のファイル２つで作られたようです。
「tsx」ってなに？ってことでやっぱりChatGPTさんに聞いてみます。

以下ChatGPTさんの回答

「.tsx ファイル」とは、TypeScript と JSX を組み合わせたファイル形式です。

tsxファイルを詳しく説明すると

• TSX = TypeScript + JSX

• TypeScript（TS）は、JavaScriptに型を追加した言語です。

• JSXは、JavaScriptの中にHTMLのような記述を埋め込む構文で、Reactというライブラリでよく使われます。

例：

import React from 'react'; type Props = { name: string;}; const Hello: React.FC<Props> = ({ name }) => { return <h1>Hello, {name}!</h1>;}; export default Hello;

このように .tsx ファイルでは、TypeScript の型を使いながら JSX の構文も同時に書くことができます。

いつ使うの？

ReactプロジェクトでTypeScriptを使いたいときに .tsx 拡張子のファイルを使います。通常の .ts ファイルはJSXを書けませんが、.tsx にすることでJSXの記述が可能になります。

よくわからないので、とりあえずReactで開発するときのファイル形式ってことなのかなということで納得してみました。

これからどうしよう

まずはデータをダウンロードですよね。

とりあえず「v0」上ではプレビューできているけど、このあとどうしようかな…ということで、とりあえずデータをダウンロードできそうなのでいったん「Download ZIP」をクリックしてダウンロードして解凍してみると…

なんでこんなにファイルがあるの？
っていうことで、こんどは「v0」さんに「ダウンロードデータのファイル構成を教えて」って尋ねたら、以下のように答えてくれました。

ダウンロードしたプロジェクトのファイル構成について説明します。v0からダウンロードすると、完全なNext.jsプロジェクトとして構成されます。 tetris-game-project/├── 📁 .next/ ├── 📁 .vscode/ │ └── settings.json├── 📁 app/ │ ├── favicon.ico│ ├── globals.css │ ├── layout.tsx │ └── page.tsx ├── 📁 components/ │ ├── 📁 ui/ │ │ ├── button.tsx│ │ ├── card.tsx│ │ ├── accordion.tsx│ │ ├── alert.tsx│ │ ├── avatar.tsx│ │ ├── dropdown-menu.tsx│ │ └── ... (その他のUIコンポーネント)│ └── theme-provider.tsx ├── 📁 hooks/ │ ├── use-mobile.tsx│ └── use-toast.ts├── 📁 lib/ │ └── utils.ts ├── 📁 node_modules/ ├── 📁 public/ │ ├── next.svg│ └── vercel.svg├── .eslintrc.json ├── .gitignore ├── components.json ├── next.config.mjs             ├── package.json                ├── package-lock.json           ├── postcss.config.mjs          ├── README.md                   ├── tailwind.config.ts          ├── tetris-game.tsx             └── tsconfig.json               

なんじゃこりゃ。
ダウンロードしたのはいいけど、これをローカルでどうやって実行していいかまったくわからない。

わからないので、今日はいったんここまでとして、また後日にダウンロードしたこのファイルたちをどうにか実行できるようにしたいと思います。

Claudeさんはすごかった！

ちなみに「Claude」で同じプロンプトでテトリスを作らせたらこうなりました。

こっちの方がきれい。そして、作成してくれたコードもコピペしてHTMLファイルとして保存すれば、そのまま実行可能。

有能過ぎないですか、Claudeさん！