v0を使用してカンバンアプリを作成してみた

# はじめに
最近、Xで[v0](https://v0.dev/)や[GitHub Copilot](https://github.com/features/copilot)などの投稿をよく目にする気がします
業務ではVue.js（Nuxt.js）を使用していて、今まで本格的に`v0`を使用したことがなかったため、今回は簡易的なカンバンアプリ作成を通じて、`v0`の使い方を学習し、実際どのように役立つのかを記事にまとめたいと思います

今回のアプリ作成のゴールは、簡易的なカンバンアプリを作成し、[Vercel](https://vercel.com)にデプロイするところまでになります
　
プロジェクトのリポジトリはこちらです

https://github.com/Kaiwa-Jun/kanban-app-v0-and-copilot

# v0とは？
**v0**は、**Vercelが提供するAIを活用したUI生成ツール**です
テキストや画像のプロンプトからReactコンポーネントを生成し、`shadcn/ui`や`Tailwind CSS`を使用したコードを自動的に作成してくれます

https://v0.dev/docs

生成されたコードはコピペしたり、コマンド1つでプロジェクトに統合できたりもします

- **効率的なUI生成**: プロンプトに基づいて、カスタマイズ可能なUIを生成できます
- **React対応**: `shadcn/ui`や`Tailwind CSS`に基づくReactコンポーネントの生成をサポートしており、UI部分の開発がスムーズにできます
- **コードの流用が可能**: 生成されたコードをそのまま使えるので、手動でのUIコーディングを大幅に減らすことができます
# 実装していく

## 使用技術
- Next.js: 14.2.8
- React: 18
- TypeScript: 5
- Tailwind CSS: 3.4.1
- shadcn/ui
- @hello-pangea/dnd: 16.6.0 (ドラッグ＆ドロップのためのライブラリ)

## 実装手順
### まずNext.jsのプロジェクトを作成します
```
npx create-next-app@latest my-kanban-app --typescript
cd my-kanban-app
```

### 必要な依存関係のインストール
```
npm install @hello-pangea/dnd
npm install @v0labs/core
```

:::note warn
ドラッグ&ドロップのライブラリとして`react-beautiful-dnd`を使用していたのですが、React18以降では使用できないため、`@hello-pangea/dnd`をインストールしています
:::

### v0のセットアップ
```
npx v0 init
```
プロジェクトごとに初めに実行するコマンドです
このコマンドを使うことで、v0がUIコンポーネントを生成できる環境がセットアップされます
　
### UIコンポーネントの生成

[v0の画面](https://v0.dev/?from=chat)に移動してUIコンポーネントを作成していきます
![スクリーンショット 2024-09-08 20.36.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1865715/b37f2051-ea37-e058-ddd5-35246f5904bb.png)


プロンプトを入力していきます
今回は下記のような感じで入れてみました
```
「Trelloのような看板アプリのメインボードのUIを作成してください。複数のリストを持ち、リスト内にカードを追加できるUIで、カードはドラッグ&ドロップで移動可能にしたいです。」
``` 
　
![スクリーンショット 2024-09-08 20.39.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1865715/1213501e-09a0-0380-2589-fd30dbbf91b1.png)
　
すると画像のようにA,B,Cの3種類のUI案を出力してくれます
画面下部の入力欄に追加のプロンプトを入れてUIを更新することもできます
![スクリーンショット 2024-09-08 20.41.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1865715/9d7b0a90-05bd-f381-eb0a-ba44733f8d6d.png)
　
また、特定の要素を選択してプロンプトを指定することもできます
例えば、リスト内のカード要素を選択して、その部分だけをカスタマイズすることもできます
![スクリーンショット 2024-09-08 20.44.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1865715/ca633a7a-4e7f-1cb8-40d4-5b6fc0fb706e.png)
　
何度かプロンプトを入力して、いい感じのUIになったので、次にソースコードをプロジェクトに反映する操作をしていきます

### 生成したコンポーネントをプロジェクトに反映する
画面右上の`Code </>`を押すと、コードを見ることができます
ここでコードを修正して、UIを変更することもできます
![スクリーンショット 2024-09-08 20.54.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1865715/356ddd68-e8d9-b020-24b7-f204fb96cbd9.png)

`Add component to project`のコマンドをコピーして、プロジェクトのルートディレクトリで実行します
```   
cd my-kanban-app
npx v0 add MOnw5KVjT5j
``` 

これで、componentsディレクトリ内にboard.tsxが生成され、各UIコンポーネントはcomponents/ui配下に追加されます。

![スクリーンショット 2024-09-08 21.07.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1865715/eca91c99-4ce4-bad4-08be-14438eed6f26.png)
　
ここまででアプリを確認してみます
```
npm run dev 
```    
　
![スクリーンショット 2024-09-08 21.17.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1865715/0f7ae778-c080-128c-266b-6f53dfeae69a.png)
　
### GitHub Copilot Chatを使った機能実装
`v0`の説明がメインのため、`GitHub Copilot Chat`については簡易的に説明します
`GitHub Copilot Chat`は、`GitHub Copilot`の拡張機能として提供されるAIチャットアシスタントです
プログラミング中に自然言語で質問をすると、コードの提案、デバッグのサポート、ドキュメントの生成などをリアルタイムで支援してくれます 
下記のコマンドを使用することで、より適切な回答を受け取りやすくなります 

```
/help: 利用可能なコマンドの一覧を表示
@workspace: プロジェクト全体やファイルに関する質問ができる
/explain: 選択したコードやファイルの動作を説明
/tests: 選択したコードに対するテストコードを生成
/fix: コードのエラーを検出し、修正案を提案
/new: 新しいコードの生成や既存コードのリファクタリング
```
　
`@workspace`を中心に`GitHub Copilot Chat`を使いながら、下記機能を実装しました
- リストの追加機能の実装
- カードの追加機能の実装
- ドラッグ＆ドロップ機能の実装

### デプロイする
最後に、作成したアプリをVercelにデプロイします
Vercelの`Overview`タブで、右上の`Add New…`から`Project`を選択します
![スクリーンショット 2024-09-08 17.00.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1865715/23a19831-f006-c6a4-1c16-659813bf5d30.png)
　
リポジトリを選択して、`Import`をクリックします
![スクリーンショット 2024-09-08 17.04.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1865715/febcb22c-e965-f40f-ed9e-16e815ca86ab.png)
　
`Deploy`をクリックしてデプロイします
![スクリーンショット 2024-09-08 17.07.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1865715/3a6e607a-db29-9545-3d3a-7f27bdbab964.png)
　
うまくいくと画像のような画面になり、デプロイ完了です！
![スクリーンショット 2024-09-08 20.26.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1865715/c1f49510-a550-8f13-a42a-d879b0b5a4c2.png)


# 参考文献
https://v0.dev/docs

https://docs.github.com/ja/copilot/about-github-copilot