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

はじめに

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

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

v0とは？

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

生成されたコードはコピペしたり、コマンド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

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

v0のセットアップ

npx v0 init

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

UIコンポーネントの生成

v0の画面に移動してUIコンポーネントを作成していきます

プロンプトを入力していきます
今回は下記のような感じで入れてみました

「Trelloのような看板アプリのメインボードのUIを作成してください。複数のリストを持ち、リスト内にカードを追加できるUIで、カードはドラッグ&ドロップで移動可能にしたいです。」

　

　
すると画像のようにA,B,Cの3種類のUI案を出力してくれます
画面下部の入力欄に追加のプロンプトを入れてUIを更新することもできます

　
また、特定の要素を選択してプロンプトを指定することもできます
例えば、リスト内のカード要素を選択して、その部分だけをカスタマイズすることもできます

　
何度かプロンプトを入力して、いい感じのUIになったので、次にソースコードをプロジェクトに反映する操作をしていきます

生成したコンポーネントをプロジェクトに反映する

画面右上のCode </>を押すと、コードを見ることができます
ここでコードを修正して、UIを変更することもできます

Add component to projectのコマンドをコピーして、プロジェクトのルートディレクトリで実行します

cd my-kanban-app
npx v0 add MOnw5KVjT5j

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

　
ここまででアプリを確認してみます

npm run dev 

　

　

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を選択します

　
リポジトリを選択して、Importをクリックします

　
Deployをクリックしてデプロイします

　
うまくいくと画像のような画面になり、デプロイ完了です！

参考文献