ユーザーインタフェースのデザイン
オリジナルのWebアプリケーションをなにか作ろうと考えたときに、悩みの種がユーザーインタフェースをどうするかですね。私はデザインセンスがないので、HTMLやCSSを時間かけて頑張って書いても、なんだか微妙だなというものしかできません。さてどうしたものか…。
V0
そんな悩みを持った方向けに、Vercelが新たなサービスを始めようとしています。それがV0です。V0ってなにかと言うと、最近よく話題になる生成系AI(ChatGPT等)にユーザーインタフェースを考えてもらって、ソースコードも生成してもらうサービスです。
生成されるソースコードはshadcn/uiとTailwind CSSを使用して作成されたReact系のコンポーネントです。
shadcn/uiとは、UIコンポーネント集です。特徴的なのはライブラリではなく、ソースコードをコピペする感じでアプリケーションに適用することです。内部的にTailwind CSSを使っていますが、これらはどちらも実行時に特定のライブラリを必要としないことが特徴です。そういった特徴を持つソフトウェアはゼロランタイムと呼ばれ、昨今のフロントエンド界隈では流行しているようです。ちなみにshadcnは"シャッドシーエヌ"と読むらしいです。
参考URL：https://v0.dev/
参考URL：https://ui.shadcn.com/
v0を使ってみる
それではv0を試してみましょう。
v0は現在のところpublic betaとして運営されています。利用するにはwaitlist
に登録する必要があり、すぐに利用できるわけではありません。（とはいえ、waitlistに登録してから1週間ほど待ってたら利用可能になりました）
https://v0.dev/にアクセスします。
生成系AIでよくあるプロンプト入力のための入力欄が一つだけのシンプルな画面です。
それでは、ここに作ってほしいUIを書いてみましょう。
すると下記のような三つの候補を出してくれます。
一つ目の候補
二つ目の候補
三つ目の候補
私は二つ目が良さそうだと思ったので、これを使います。
プロンプトを追加して変更を行ってもらうこともできます。
Next.jsアプリケーションへの適用
アプリケーションへ適用するには、v0の右上にあるcode</>ボタンを押します。
すると次のような画面に切り替わり、今回生成したUIのソースコードが表示されます。
これをこのままコピーして、アプリケーションに適用することもできますが、shadcn/uiのコンポーネントは別途準備する必要があります。
そのあたりを一括でやってくれるコマンドnpx v0 add T0QPlTwHTvJも上記の画面上に提示されています。
このコマンドをアプリケーション内で実行することで、今回生成したUIのソースコードと、そこで利用されているshadcn/uiのコンポーネントを一括でインストールできます。
ただしこのコマンドを実行する前に初期化コマンドを実行しておく必要があります。下記のコマンドをアプリケーション内で実行してください。
>cd next-notslack-app
↑※next-notslack-appはアプリケーションフォルダの名称と仮定しています。
> npx v0@latest init
✔ Writing components.json...
✔ Initializing project...
✔ Installing dependencies...
それが済んだら、改めて下記のコマンドを実行します。途中でインストールする画面のコンポーネントとしての名前を聞かれますので、わかりやすい名前をつけておきましょう。
> npx v0 add T0QPlTwHTvJ
✔ What should we name the component? … Board
✔ Done.
これで完了です。
アプリケーションのソースコードを除いてみると、下記のフォルダとファイルが追加されています。
board.tsxが生成したUIをコンポーネント化したソースコードです。ただし一応、拡張子は tsx なのですが、ソースコードの中身はあきらかにJavaScriptです。それを修正して利用するのが本当はいいのでしょうが、ここではメンドーなので、拡張子をjsxにしてしまって逃げてしまいます。
/**
* This code was generated by v0 by Vercel.
* @see https://v0.dev/t/T0QPlTwHTvJ
*/
import Link from "next/link"
// ここから下は`shadcn/ui`のコンポーネントをインポートしている
import { Button } from "@/components/ui/button"
import { CardTitle, CardDescription, CardHeader, CardContent, Card } from "@/components/ui/card"
import { Avatar } from "@/components/ui/avatar"
import { Input } from "@/components/ui/input"
export function Board() {
return (
{/* コンポーネントのスタイルはTailwind CSSを利用している */}
<div className="grid min-h-screen w-full lg:grid-cols-[280px_1fr_280px]">
<div className="hidden border-r bg-gray-100/40 lg:block dark:bg-gray-800/40">
<div className="flex h-full max-h-screen flex-col gap-2">
{/* 途中省略 */}
</div>
</div>
</div>
)
}
//アイコンもSVGを使ったコンポーネント。
//ただしなぜか引数に型アノテーションが無く、TypeScript的にはアウト!
function EqualNotIcon(props) {
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="5" x2="19" y1="9" y2="9" />
<line x1="5" x2="19" y1="15" y2="15" />
<line x1="19" x2="5" y1="5" y2="19" />
</svg>
)
}
//以下、省略
uiフォルダの中には利用しているshadcn/uiのコンポーネントが配置されています。
board.jsxをホーム画面となるコンポーネントapp/page.tsxに配置すると、とりあえずアプリケーションで表示することができます。
import { Board } from "@/components/board";
export default function Home() {
return (
<Board />
)
}
v0が生成したboard.tsxは、shadcn/uiとTailwind CSSを使用して作成されたコンポーネントとして純粋に記述されていますので、ここから手を入れていくのは容易でしょう。