【React初心者向け】Vercel v0で生成したページ・アプリをローカルで動かす 

（2024/12/10追記）もっと簡単な方法がありました！→[『mozさんのnoteです』](https://note.com/moz_ai_tech/n/n9c2494baec2b)

ただReactに興味ある方はこちらも参考にして頂けたらと思います。

# UI生成AI『v0』

v0はVercel Labs社が開発したウェブデザインに特化した生成AIツールです。

https://v0.dev/chat

WebサイトやWebアプリはもちろんプレゼン用のスライドや図解資料など様々なものをチャット形式でアシスタントが生成してくれます。
 
Anthropicの『Artifacts』と似ていますが、v0の特徴は**React**を利用した生成に特化しており、私の体感ですがArtifactsより見た目が綺麗なUIを作ってくれます。

ただこの**React**がくせ者でhtmlファイルならひょいとブラウザで閲覧ができますが、TypeScriptファイルとなるとそうはいきません。（なのでそこまでは大きく話題にならないのかもしれません）

ということで今回はv0で生成したWebサイトを自分のPC（ローカル）に移すとどんな手順になるかを紹介したいと思います。

※私もReact勉強の身であることにご留意ください。

:::note info
PCのOSはWindows11です。
:::

# v0を利用する

最初にv0でWebページを生成してもらいます。
v0の利用方法は色々な記事がありますのでこちらなどの方が参考になるかと思います。

https://weel.co.jp/media/innovator/vercel-v0/

<br>

ざっと紹介します。今回は『セミナーの応募フォーム』を生成してもらいます。

![Snapshot_136.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549938/522e2fd1-a376-f522-1315-039c17fe27bd.png)

![Snapshot_137.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549938/180658b0-5607-8b58-df60-cfd55e965050.png)

<br>

こんな感じで生成してくれました。ボタンの追加など要望も聞いてくれます。フォームはGoogleフォームなど色々なツールが存在しますが、こちらの方がおされな気がしますね。
※実際に利用するにはバックエンド側の処理が必要です

では今度はPC（ローカル）側の準備に移ります。

# PCでの準備

最初にPCにNode.jsをインストールして下さい。（初めての方）
こちらに詳しく記載があります。

https://qiita.com/gahoh/items/8444da99a1f93b6493b4

<br>

ではReactプロジェクトを作成します。
コマンドプロンプトまたはPowershellを起動して、フォルダ作成されても困らない場所にcdコマンドで移動して下さい。（右クリック<b>"ターミナルで開く"</b>が移動不要で楽です）

![スクリーンショット 2024-09-11 211354.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549938/88756547-e7db-a402-f17b-db20bb3fc20c.png)

<br>

移動したら次のコマンドを実行してください。
```Powershell:Next.js プロジェクト作成
npx create-next-app@latest
```
<br>

reactに入門すると**Viteを使え**と言われ「npm create vite@latest」で作成しろと言われることが多いかと思いますが、v0は主に[shadcn](https://ui.shadcn.com/)という外部コンポーネントを利用して作られており[Vite](https://zenn.dev/comm_vue_nuxt/articles/what-is-vite)だとちょっと面倒です。（[公式の手順](https://ui.shadcn.com/docs/installation/vite)を見てもらえればわかると思います）

「今Viteで作っているアプリに追加したい」ではなく、ちょっと試してみたい方は[Next.js](https://zenn.dev/cloud_ace/articles/nextjs-basics-for-non-frontend-devs)で作成することをお勧めします。

長くなりましたが、上記コマンドを実行すると色々聞かれるかと思います。
最初はプロジェクト（フォルダ）名なので適当に入力して下さい。

![スクリーンショット 2024-09-11 213017.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549938/fe1d32b0-a273-3600-270f-098dd7fb73ff.png)

<br>

その後も色々聞かれます。私は以下を選択しました（青字が選択）。何を聞かれているかは[こちらを参考にして下さい。](https://zenn.dev/ikkik/articles/51d97ff70bd0da)

![スクリーンショット 2024-09-11 213335.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549938/fc9123ac-11e2-4382-7835-60f5f1ad796f.png)

~~基本的にはデフォルトで6番目のimport aliasはYesにしました。こちらの方がimportのパスを気にしなくて済むかと思います。~~
(訂正)デフォルトの記号について聞いているので6番目はそのまま**No**で構わないと思います。

これが終わると入力した名前でフォルダができていると思います。こちらにコマンドで移動して下さい。

```Powershell:
cd [作成したフォルダ名]
```

これで一度試しにプロジェクトを起動してみてください。

```Powershell:開発モードで起動
npm run dev
```

「～ http://localhost:3000 ～」と出てくると思いますのでCtrlを押しながらクリックして表示してみて下さい。エラーとならず"Next.js"と真ん中に表示されたページが出れば成功です。（成功したらCtrl+cで終了してください。）

ではこれからv0で生成したものを利用してみたいと思います。

# shadcnコンポーネントの追加

v0のページの右上のコードマークをクリックしてください。
そして出てきたコマンドをコピーして下さい。

![Snapshot_138.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549938/88eb8ab7-1c67-513e-fef7-6584adca662f.png)

<br>

これをコマンドで実行。（カレントディレクトリはプロジェクトのフォルダになっていることを確認して下さい。）
![スクリーンショット 2024-09-13 104646.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549938/1ba0307c-06a3-d1bb-322f-670ca81fb0f4.png)

<br>

色々聞かれますがYes、あとはそのままでいいと思います。（私はStyleだけをDefaultに変えました）
![スクリーンショット 2024-09-13 104811.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549938/1ed84b06-962c-1e56-ee90-30bfd48fdf91.png)

<br>

実行後にsrc\components下にファイルができています。
※これはVSCodeで[フォルダを開く]から作成したプロジェクトフォルダを開いています。一例としてVSCodeで表示していますが、VSCodeがなくても利用できます。

![スクリーンショット 2024-09-13 105334.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549938/60f2529a-8c10-8e87-63a6-1deea3caffed.png)

<br>

components直下にv0で生成したファイル。（フォルダ名にある通り"コンポーネント"となっており、コンポーネントはWebページを作るための"部品"のようなものです。）uiフォルダ下にshadcnのコンポーネントが配置されています。

詳細にはわかりませんが、コピーしたコマンドは<b>「利用するshadcnコンポーネントを一括でインストール」＋「生成したコンポーネントを追加」</b>をしてくれているようです。

なのでこのコマンドを使わない場合は"npx shadcn@latest add button"など手動で追加する必要があるようです。

<br>

ではこれを動かしてみたいと思います。
まずプロジェクトフォルダのsrc/app下にある **page.tsx** の中身（デフォルトの内容）を削除して以下だけにして下さい。

```typescript:page.tsx
export default function Home() {
  return (
    <div>テスト</div>
  );
}
```

<br>

まだ中身はテストです。
これでもう一度プロジェクトを立ち上げて下さい。http://localhost:3000 にアクセスして"テスト"と表示されればOKです。

```Powershell:開発モードで起動
npm run dev
```

<br>

では生成したコンポーネントを追加します。ここからはファイル名などご自身のものに合わせて下さい。
```typescript:page.tsx
import { SeminarRegistrationComponent } from "@/components/seminar-registration"

export default function Home() {
  return (
    <SeminarRegistrationComponent/>
  );
}
```

<br>

私が生成したファイル名は"seminar-registration.tsx"なのでインポート元が"@/components/seminar-registration"となっています。コンポーネント名<b>"SeminarRegistrationComponent"</b>はこのtsxファイル内にある **export function XXXXXX()** と書かれた関数の名称になります。

**※export default function XXXX となっている場合はdefaultを消すかpage.tsxのimport後の{}（中身そのまま中括弧だけ）を消してください**

![スクリーンショット 2024-09-13 204623.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549938/b5cf389b-7dbc-85db-d02d-6ea9435c1ab8.png)


<br>

returnの中身にもコンポーネントを追加してあげてください。
で、これでソースを保存してhttp://localhost:3000 が正常に表示できていればOKです！

ただそのままでは上手くいかない場合もあります…
私の場合use-toastの配置場所がおかしかったようで修正が必要でした。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549938/3b8d2cd3-3a5d-20e8-a331-661d568d6815.png)

```diff_typescript:seminar-registration.tsxの修正

- import { toast } from "@/components/ui/use-toast"

+ import { toast } from "@/hooks/use-toast"

```

**※use-toast.tsの場所を移動しても大丈夫かと思います**

<br>

上手く行くとこんな感じで表示できます。

![スクリーンショット 2024-09-13 210132.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549938/a813d05e-35ba-c850-6462-3384b48e2a0e.png)

# おわりに
これは一例ですので、生成ファイルによってすんなりいかない場合もあるかもしれません。ただ環境設定も含めて勉強だと思い頑張りましょう。

**「AIは幻滅期」** なんて話もありますが、v0を使うとやっぱりまだまだ「生成AIすごいなぁ…」と思ってしまいました。素人でもこんなWebデザインができるようになるとは。

ただ今後は画像生成と同じように **「このページはおれのパクリだ！」** とWebデザイナーから訴訟される未来もやってきそうです。ちょっと怖いですねw


## 続編

（2024/10/30追記）デプロイ編投稿しました！アプリを公開したい方はぜひ！

https://qiita.com/nekoniii3/items/223d77a8df429985cb51

## おまけ

~~非公式XAPIの[twikit](https://qiita.com/a_f1/items/342ad5fb7db2b4f907fe)を使って、ユーザ名からXに投稿された画像・動画一覧が表示できるサイトを作ろうとしています。（データはダミーです）~~

完成しました使って見て下さい！（2024/12/10更新）


https://x-image-gallery.vercel.app

※初期表示がえなこさんなので開くときは気をつけてください
※twikitがゲストアカウントのため全画像が取得できるわけではありません。

こんな綺麗なUIにできると思いませんでした。v0のおかげです。
~~完成したら公開したいと思います。~~