こんにちは。アプリケーションサービス部の渡辺です。
今回は Vercel の v0 を使い自然言語で UI コンポーネントを作るお話です。
※ 記事では React を使用しています。
v0 とは
v0 は Vercel が提供する自然言語によるフロントエンドアプリケーション構築のためのサービスです。 GitHub Spark や Bolt.new が似たようなサービスでしょうか。
shadcn/ui とは
shadcn/ui は shadcn 氏が開発したアプリケーションにコピー & ペーストで追加できる再利用可能な UI コンポーネントコレクションです。
一般的な UI コンポーネントライブラリと異なりそれ自体がコンポーネントの実態を持っているわけではありません。
shadcn CLI コマンドを経由して、外部の依存ライブラリを取得し UI コンポーネントを作成してくれます。
非常にユニークなツールですね。この特性が v0 と高い親和性を生み出します。
UI コンポーネントを v0 で作って shadcn CLI で自分のプロジェクトにコピーしよう
今回作りたい UI コンポーネント
それでは本題です。shadcn/ui で提供されていない以下のような UI コンポーネントを作成したいとします。
参考実装は Tags Input - shadcn/vue です。
(Vue.js 用の shadcn インスパイアライブラリには存在しますが、本家 shadcn/ui には存在しません。)
v0 にお願いしてみる
では、上記のコンポーネントを v0 に作ってもらいましょう。
一番最初の出力ではエラーを含む UI コンポーネントを生成してくれました。
しかし、エラーの修正をお願いすると期待通り動作する UI コンポーネントになりました。
ここからが肝心。shadcn CLI でローカルにコピー
v0 で生成した UI コンポーネントを自分達のプロジェクトで使いたいときはどうすればよいでしょうか？
v0 をよく見てください！なんとダウンロードボタンを押下すると shadcn CLI コマンドが表示されます！！！！
ローカルプロジェクトで npx shadcn@latest add "https://v0.dev/chat/*** を実行します。
そして生成された UI コンポーネントを呼び出すと...
v0 で生成した UI コンポーネントをローカルプロジェクトに追加できました 🎉
まとめ
v0 で UI コンポーネントを作成し、shadcn CLI コマンド経由でローカルプロジェクトに追加する方法を紹介しました。
少しでもみなさんの普段の開発フロー改善の参考になれば幸いです。
私自身、いままで v0 は Next.js アプリケーションをまるっと作れるサービスという印象でした。
しかし、このように UI コンポーネントの作成だけお任せすること、shadcn CLI コマンドで簡単にその UI コンポーネントをローカルプロジェクトに追加できることを知りかなり普段の実装にも役立っています。
特に shadcn/ui 自体はデザインライブラリでなく、外部の依存ライブラリを取得し UI コンポーネントを作成するという点が最初は不思議だったのですが、こういうことができる素晴らしいツールの設計だったんだと今は感嘆しています。
ここまで読んでいただいてありがとうございました。
