田口和裕の「ChatGPTの使い方！」 第26回

プレゼン資料が一発で出せると話題　AIツール「v0」の使い方

Webコンポーネント作成の使用例

　まずは簡単なWebコンポーネント（ウェブアプリケーションやウェブサイトの再利用可能な部品）を作成してみよう。アカウントを作成しログインした状態でプロンプトを入力し「↑」ボタンをクリック。

プロンプト：簡単なアンケートフォームを作って

　「React と shadcn/ui コンポーネントを使用して、基本的なアンケートフォームを作成します」というメッセージとともに画面が二分割され、右側でコーディングが始まった。

　しばらくするとアンケートフォームが完成した。

　作成したコンポーネントを利用する際の説明が記載されている。

　追加で自然言語プロンプトを入力することで細かい改良やブラッシュアップ作業も簡単だ。

プロンプト：年齢は必要ありません 性別をプルダウンで入力するようにして

　すぐに項目の差し替えができた。

　成果物の左上には「v2」とバージョン名が表示されている。

　クリックしてプルダウンを選択することで、いつでも任意のバージョンに戻ることが可能になっている。

　「Fork」ボタンをクリックすると連携させたGitHubの任意のレポジトリーに作成したコンポーネントをフォーク（複製）できる。

　さらに、「Share」ボタンをクリックし「Public with link」にチェックを入れることで、作成したコンポーネントを他の人にプレビューしてもらうことができる。

　また、「Publish」から「Confirm and Publish」をクリックすることで新たなURLを作成してコンポーネントを公開することも可能だ。

作成したWebコンポーネントを公開するには

　作成したWebコンポーネントを公開するにはいくつかの方法がある。いちばん簡単なのは先述した「Publish」機能を使うことだが、今回作成したVercelのアカウントがあれば、クラウドサービス「Vercel.com」でウェブサイトとしてデプロイすることも可能だ。

　また、他の開発者が簡単に再利用できる「npmパッケージとしての公開」や「GitHubリポジトリでの共有」、「自己ホスティング」といった方法もある。

「Vercel.com」のダッシュボード